---
tags: 互動程式設計,2-12,sass，學生版,動畫互動網頁特效入門（JS/CANVAS）
---
# 2-12 -css動畫基礎與滑鼠互動_學生版
---
# 畫元件
## 設定pug
可使用.eyes>.eye*2>eyeball
```pug=
```
---
## 設定初始sass
```sass
*
border: solid 2px black
html,body
width:100%
height:100%
```
## 為了其他方框大小，可以統一使用@mixin
使用@mixin
```sass=
```
---
## 使用@mixin讓所有方框可以置中
置中放置
```sass=
@mixin flexCenter
display: flex
justify-content: center
align-items: center
```
---
```sass=
```
---
## 頭髮設定
### 使用圓角方塊
```sass=
.person
.hairs
width:150px
height:80px
border-radius:40px
```
---
### 使用@mixin設定一個方框
```sass=
```
---
### 使用@mixin設定三個方框
```sass=
```
---
```pug=
```
## 移動頭髮位置
```sass=
```
---
## 臉的繪製
使用@mixin
```sass
@mixin bdrsRect($w,$h,$bdrs:$h/2)
width: $w
height: $h
border-radius: $bdrs
```
---
```sass=
```
---
## 眼睛與眼球
```sass=
```
## 加入嘴巴與食物部分
```sass=
```
---
# 塗顏色
框架架構好之後，加入顏色
使用變數
```sass
$colorBlue: #307BE1
$colorDeepBlue: #2F4A6E
$colorYellow: #FFC12C
$colorOrange: #F38A0C
$colorShadow: rgba(black,0.1)
$shadowInset: inset -10px -10px 0px $colorShadow
```
---
## 背景
```sass
```
---
## 身體
```sass
```
---
## 頭髮
```sass
```
---
## 眼睛與眼球
```sass=
```
---
## 嘴巴與食物
```sass=
```
---
# 陰影設定
---
## 頭髮陰影
```css=
```
---
```sass
```
---
使用變數
```sass
@mixin hair($w,$h)
+bdrsRect($w,$h)
background-color: #fff //white
box-shadow: inset -10px -10px $colorShadow//inset：內陰影
```
---
## 身體陰影
```sass=
```
---
## 三個方框頭髮設定位置
只要在頭髮處設定一個por
```sass=
```
---
# 滑鼠互動
```pug=
```
---
```sass=
```
---
## 文字要先透明，滑鼠移入才變不透明
```sass=
```
---
## 加入滑鼠移入的動畫
```sass=
$colorBlue: #307BE1
$colorDeepBlue: #2F4A6E
$colorYellow: #FFC12C
$colorOrange: #F38A0C
$colorShadow: rgba(black,0.1)
$shadowInset: inset -10px -10px 0px $colorShadow
*
// border: solid 2px black
//如果沒有傳$h值，以預設的$w為主
@mixin size($w,$h:$w)
width: $w
height: $h
@mixin flexCenter
display: flex
justify-content: center
align-items: center
@mixin bdrsRect($w,$h,$bdrs:$h/2)
+size($w,$h)
border-radius:$bdrs
@mixin hair($w,$h)
+bdrsRect($w,$h)
background-color: #fff
box-shadow: inset -10px -10px $colorShadow
html,body
+size(100%)
+flexCenter
.scene
+size(600px,500px)
+flexCenter
background-color: $colorBlue
position: relative
.title
position: absolute
left: 20px
top:20px
font-size: 50px
margin:0
color: white
opacity: 0
.person
.hairs
position: relative
.hair1
+hair(150px,80px)
margin-left:10px
position: relative
.hair2
+hair(150px,60px)
margin:
left:50px
top:-40px
.hair3
+hair(150px,70px)
margin:
left:5px
top:-45px
.body
+bdrsRect(210px,120px,40px)
margin-top: -40px
padding-top:50px
background-color: $colorYellow
box-shadow: $shadowInset
.eyes
.eye
+bdrsRect(50px,25px)
display: inline-block
margin-right:5px
margin-left : 15px
background-color: #fff
.eyeball
+bdrsRect(25px,25px)
background-color: $colorDeepBlue
.mouth
+bdrsRect(70px,25px)
background-color: $colorOrange
margin:
left:70px
top: 15px
.food
+bdrsRect(12px,12px)
margin-left: -40px
background-color: $colorOrange
.scene:hover
.title
opacity:1
.person
margin-top: 50px
.body
box-shadow: $shadowInset,30px 10px $colorShadow
```
---
## 滑鼠移到人物上有不同的動態
```sass=
```
## 讓其有點時間上的緩衝
```sass
transition:0.5s,background-color 4s 1s //背景顏色一秒延遲，不做任何動作，並利用四秒變色
```
---
```sass=
```
---
## 產生一個訊息(message)
```pug
```
---
## 在person下設定message
message的設定
與滑鼠移動人物上的運作
```sass=
```
---
```sass=
```
## 按下滑鼠
```sass=
.scene:active
```
---
```sass
```
---
加入左右兩個
https://codepen.io/frank890417/pen/MpKebd
```sass=
//顏色變數
$color_black: #303030
$color_bg: #F7F0E9
$color_berry: #D56134
$color_top: #9C4215
$color_md_1: #F3D1BA
$color_md_2: #F7E1CD
$color_bottom: #773000
$color_cherry_1: #FF613A
$color_cherry_2: #DF5333
```
---
```sass=
$colorBlue: #307BE1
$colorDeepBlue: #2F4A6E
$colorYellow: #FFC12C
$colorOrange: #F38A0C
$colorShadow: rgba(black,0.1)
$shadowInset: inset -10px -10px 0px $colorShadow
*
// border: solid 1px
// transition: 0.5s
position: relative
@mixin flexCenter
display: flex
justify-content: center
align-items: center
@mixin size($w,$h:$w)
width: $w
height: $h
@mixin bdrsRect($w,$h,$bdrs:$h/2)
+size($w,$h)
border-radius: $bdrs
@mixin hair($w: 200px,$h: 40px,$color: white)
+bdrsRect($w,$h)
background-color: $color
box-shadow: $shadowInset
z-index: 1
@mixin abPos($l,$t)
position: absolute
left: $l
top: $t
html,body
+size(100%)
+flexCenter
background-color: #fff
.scene
+size(600px,500px)
+flexCenter
cursor: pointer
background-color: $colorBlue
.title
+abPos(20px,20px)
font-size: 50px
margin: 0
color: white
opacity: 0
.question
display: none
.person
.hairs
position: relative
z-index: 5
.hair1
+hair(150px,80px)
margin-left: 10px
.hair2
+hair(150px,60px)
margin:
left: 50px
top: -40px
.hair3
+hair(150px,70px)
margin:
left: 5px
margin:
top: -45px
.body
+bdrsRect(210px,120px,40px)
margin-top: -40px
padding-top: 50px
background-color: $colorYellow
box-shadow: $shadowInset
.eyes
.eye
display: inline-block
+bdrsRect(50px,25px)
margin:
right: 5px
left: 15px
background-color: #fff
.eyeball
+bdrsRect(25px,25px)
background-color: $colorDeepBlue
.mouth
+bdrsRect(70px,25px)
margin:
top: 15px
left: 70px
background-color: $colorOrange
.food
+bdrsRect(12px,12px)
background-color: $colorOrange
transform: translateX(-40px)
.message
font-size: 20px
font-weight: bold
color: white
+abPos(-200px,50px)
opacity: 0
//設定漸變持續時間
.scene
.title
transition: 0.5s
.person
transition: 0.5s
.body
transition: 0.5s, background-color 4s 1s
*
transition: 0.5s
//滑鼠移入場景
.scene:hover , .scene:focus
.person
margin-top: 50px
.body
box-shadow: $shadowInset,30px 10px $colorShadow
.person:hover
.body
box-shadow: $shadowInset,-30px 10px $colorShadow
.title
opacity: 1
//滑鼠移入場景
.scene:active
.question
display: block
color: $colorYellow
.person
transform: scale(0.95)
//滑鼠移入場景
.person:hover , .person:focus
transform: translateX(40px)
.body
background-color: $colorOrange
.hairs
.hair3
margin-left: 0px
.eyes
transform: translateX(30px)
.eyeball
transform: translateX(25px)
.mouth
transform: translateX(20px)
.message
opacity: 1
transition-delay: 0.5s
.person:active
.hairs
transform: translateY(-25px)
.person .mouth:hover
transform: translateX(40px)
```
2-12 -css動畫基礎與滑鼠互動_學生版.md
選擇開啟工具
目前顯示的是「2-12 -css動畫基礎與滑鼠互動_學生版.md」。
Sign in with Wallet
Connect another wallet