---
# System prepended metadata

title: 2-12 -css動畫基礎與滑鼠互動_學生版
tags: [2-12, sass，學生版, 動畫互動網頁特效入門（JS/CANVAS）, 互動程式設計]

---

---
tags: 互動程式設計,2-12,sass，學生版,動畫互動網頁特效入門（JS/CANVAS）
---

# 2-12 -css動畫基礎與滑鼠互動_學生版

![](https://i.imgur.com/q19teIz.gif)

---
# 畫元件
## 設定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=


```
---

![](https://i.imgur.com/HcLdA4a.png)


```pug=



```
## 移動頭髮位置
![](https://i.imgur.com/nezy10o.png)


```sass=



```


---

## 臉的繪製
使用@mixin

```sass
@mixin bdrsRect($w,$h,$bdrs:$h/2)
  width: $w
  height: $h
  border-radius: $bdrs
```



---
![](https://i.imgur.com/MM9JaqT.png)

```sass=



```



---
## 眼睛與眼球
![](https://i.imgur.com/hO4OUgW.png)


```sass=
  


```

## 加入嘴巴與食物部分
![](https://i.imgur.com/9X32V8U.png)
![](https://i.imgur.com/Z3Kj7B2.png)


```sass=



```


---
# 塗顏色
框架架構好之後，加入顏色
使用變數
```sass
$colorBlue: #307BE1
$colorDeepBlue: #2F4A6E
$colorYellow: #FFC12C
$colorOrange: #F38A0C
$colorShadow: rgba(black,0.1)

$shadowInset: inset -10px -10px 0px $colorShadow
```



---
![](https://i.imgur.com/iA6BExG.png)



## 背景

```sass



```


---
## 身體

```sass



```


---
## 頭髮

```sass



```

---

## 眼睛與眼球
```sass=
  


```



---
## 嘴巴與食物

```sass=
 


```
---

# 陰影設定


---
## 頭髮陰影

![](https://i.imgur.com/b64Rc79.png)


```css=



```


---
![](https://i.imgur.com/Xe2yopE.png)

```sass


```
---
使用變數
```sass
@mixin hair($w,$h)
  +bdrsRect($w,$h)
  background-color: #fff  //white
  box-shadow: inset -10px -10px $colorShadow//inset：內陰影
```


---
## 身體陰影
![](https://i.imgur.com/RriB0AU.png)

```sass=



```
---
## 三個方框頭髮設定位置
只要在頭髮處設定一個por
![](https://i.imgur.com/6FRcytg.png)

```sass=



```


---

# 滑鼠互動

![](https://i.imgur.com/it4PjWw.png)

```pug=



```


---


```sass=


```


---

## 文字要先透明，滑鼠移入才變不透明

```sass=

```


---

## 加入滑鼠移入的動畫

![](https://i.imgur.com/Yuel6YF.gif)

```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
```



---
## 滑鼠移到人物上有不同的動態
![](https://i.imgur.com/xodrxV8.gif)

```sass=


```

## 讓其有點時間上的緩衝
![](https://i.imgur.com/sNPQxwj.gif)
```sass
transition:0.5s,background-color 4s 1s //背景顏色一秒延遲，不做任何動作，並利用四秒變色
```


---

```sass=




```


---
## 產生一個訊息(message)
![](https://i.imgur.com/L6SpnT6.gif)
```pug




```


---
## 在person下設定message
message的設定
與滑鼠移動人物上的運作

```sass=



```
---
```sass=



```

## 按下滑鼠

![](https://i.imgur.com/q19teIz.gif)

```sass=
.scene:active
```



---

```sass



```

---

加入左右兩個

![](https://i.imgur.com/zdupiyE.png)
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」。