CSS

【CSS】CSSだけでマウスオーバーをすると動く顔のアニメーションを作る

マウスオーバーすると被っている帽子が光って見上げるというCSSだけで動く顔のアニメーションを作ってみました。
このアニメーション自体を使う事はないですが、基本的な動きのアニメーションはCSSでも使う事が多くなりましたので、使える様になっておくと制作の幅が増えるかもしれませんね。

動きのイメージ動画

マウスオーバーで動くキャラクターのアニメーションになっています。

HTMLソース全体の記述

以下がHTML全体のソースになります。
部分的説明は後ほど。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<section>
　<div class="circle">
　　<!-- 帽子  -->
　　<div class="hat"></div>
  
　　<!-- ここから顔  -->
　　<div class="face">
　　　<!-- 左目 -->
　　　<div class="eye-left">
　　　　<div class="eyeball-left"></div>
　　　</div>
　　　<!-- 右目  -->
    　<div class="eye-right">
　　　　<div class="eyeball-right"></div>
　　　</div>
    　<!-- 口  -->
    　<div class="mouse"></div>
　　</div>
　</div>
</section>

CSS全体の記述

以下がCSS全体のソースになります。
部分的説明は後ほど。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
body{
margin: 0;
padding: 0;
}
 
section{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #c7d8da;
}
 
/*キャラ全体------------------------*/
.circle{
position: relative;
width: 300px;
height: 450px;
}
 
.circle:hover{
cursor: pointer;
}
 
/*帽子------------------------*/
.hat{
position: absolute;
top: 0%;
left: 10px;
right: 10px;
bottom: 44%;
background: #38bdda;
border-top-left-radius: 250px;
border-top-right-radius: 250px;
transition: 0.3s;
}
 
.hat::before{
content: "";
position: absolute;
bottom: -100px;
width: 100%;
height: 200px;
background: #26a6c2;
border-radius: 50%;
}
 
.circle:hover > .hat{
filter: drop-shadow(0 0 30px #38bdda);
}
 
/*顔------------------------*/
.face{
position: absolute;
top: 40%;
left: 10px;
right: 10px;
bottom: 0px;
background: #fbf5d4;
border-radius: 50%;
}
 
/*目------------------------*/
/*左目-----------------*/
.eye-left{
position: absolute;
top: 60px;
left: 50px;
right: 0;
bottom: 0;
width: 50px;
height: 50px;
background: #000;
border-radius: 50%;
transition: 0.3s;
}
 
/*左目玉-----------------*/
.eyeball-left{
position: absolute;
top: 15px;
left: 15px;
right: 0;
bottom: 0;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
transition: 0.3s;
}
 
/*右目-----------------*/
.eye-right{
position: absolute;
top: 60px;
left: auto;
right: 50px;
bottom: 0;
width: 50px;
height: 50px;
background: #000;
border-radius: 50%;
transition: 0.3s;
}
 
/*右目玉-----------------*/
.eyeball-right{
position: absolute;
top: 15px;
left: auto;
right: 15px;
bottom: 0;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
transition: 0.3s;
}
 
/*目の動き-------------------*/
.circle:hover > .face > .eye-left,
.circle:hover > .face > .eye-right{
top: 40px;
}
 
/*目玉の動き-------------------*/
.circle:hover > .face > .eye-left > .eyeball-left,
.circle:hover > .face > .eye-right > .eyeball-right{
top: 3px;
}
 
/*口------------------------*/
.mouse{
position: absolute;
top: 45%;
left: 80px;
right: 80px;
bottom: 35%;
background: #f49e74;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
transition: 0.3s;
}
 
.circle:hover > .face > .mouse{
top: 37%;
bottom: 40%;
left: 70px;
right: 70px;
}

キャラ全体枠

キャラ全体枠のコーディングになります。
全体枠「.circle」はマウスオーバーをする対象となります。

HTMLソース部分

1
2
3
<div class="circle">
　～
</div>

CSSソース

1
2
3
4
5
6
7
8
9
.circle{
　position: relative;
　width: 300px;
　height: 450px;
}
 
.circle:hover{
　cursor: pointer;
}

position: relative;

顔のパーツは全て「absolute」を設定するので、全体枠になる「.circle」にはarelativeを設定します。

帽子

被っている帽子部分のCSSになります。
マウスオーバーすると帽子が光るようにshadowも設定しています。

HTMLソース部分

1
<div class="hat"></div>

CSSソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.hat{
　position: absolute;
　top: 0%;
　left: 10px;
　right: 10px;
　bottom: 44%;
　background: #38bdda;
　border-top-left-radius: 150px;
　border-top-right-radius: 150px;
　transition: 0.3s;
}
 
.hat::before{
　content: "";
　position: absolute;
　bottom: -100px;
　width: 100%;
　height: 200px;
　background: #26a6c2;
　border-radius: 50%;
}
 
.circle:hover > .hat{
　filter: drop-shadow(0 0 30px #38bdda);
}

帽子を被っている部分

positionの位置設定で帽子の長さが調整できます。
帽子の角丸部分は左右の「radius」を設定します。

1
2
3
4
5
6
7
8
9
10
11
.hat{
　position: absolute;
　top: 0%;
　left: 10px;
　right: 10px;
　bottom: 44%;
　background: #38bdda;
　border-top-left-radius: 150px;
　border-top-right-radius: 150px;
　transition: 0.3s;
}

帽子の溝部分

帽子の溝部分は「::before」に設定します。

1
2
3
4
5
6
7
8
9
.hat::before{
　content: "";
　position: absolute;
　bottom: -100px;
　width: 100%;
　height: 200px;
　background: #26a6c2;
　border-radius: 50%;
}

マウスオーバー時のアニメーション

1
.hat{

これだけにhoverを当ててしまうと、帽子にマウスオーバーしないと動かないので、

1
2
3
.circle:hover > .hat{
　ここに帽子の動き設定をする
}

この様に記述し、マウスオーバー対象全体になる「.circle」にhoverを設定。
マウスオーバー時の動きはその後の「hat」に設定する。

目の動き（左目・右目）

目の動きのコーディングになります。
左目のソース一式になりますが、右目も設定は同じです。
※右目の場合はleftとrightの位置が違います。

HTMLソース部分

1
2
3
4
5
6
7
8
<!-- 左目 -->
<div class="eye-left">
　<div class="eyeball-left"></div>
</div>
<!-- 右目  -->
<div class="eye-right">
　<div class="eyeball-right"></div>
</div>

CSSソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.eye-left{
　position: absolute;
　top: 60px;
　left: 50px;
　right: 0;
　bottom: 0;
　width: 50px;
　height: 50px;
　background: #000;
　border-radius: 50%;
　transition: 0.3s;
}
.circle:hover > .face > .eye-left{
　top: 40px;
}

目の位置はposition設定

positionのtop,left,right,bottomは上、左、右、下の位置になります。

1
2
3
4
5
position: absolute;
top: 60px;
left: 50px;
right: 0;
bottom: 0;

目の大きさは50px

目の大きさは縦横ともに50pxにしました。

1
2
width: 50px;
height: 50px;

丸い目はborder-radius

border-radiusは角丸を表現したい時に使用しますが、50%にする事で対象が丸くなります。

マウスオーバー時のアニメーション

.eye-left{

これだけにhoverを当ててしまうと、目にマウスオーバーしないと動かないので、

1
2
3
.circle:hover > .face > .eye-left{
　ここに目の動き設定をする
}

この様に記述し、マウスオーバー対象全体になる「.circle」にhoverを設定。
マウスオーバー時の動きはその後の「eye-left」に設定する。

目玉の動き（左目玉・右目玉）

目玉の動きのコーディングになります。
左目玉のソース一式になりますが、右目玉も設定は同じです。
※右目玉の場合は　の位置が違います。

HTMLソース部分

1
<div class="eyeball-left"></div>

CSSソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.eyeball-left{
　position: absolute;
　top: 15px;
　left: 15px;
　right: 0;
　bottom: 0;
　width: 20px;
　height: 20px;
　background: #fff;
　border-radius: 50%;
　transition: 0.3s;
}
.circle:hover > .face > .eye-left > .eyeball-left{
　top: 3px;
}

目玉の位置はposition設定

positionのtop,left,right,bottomは上、左、右、下の位置になります。

1
2
3
4
5
position: absolute;
top: 15px;
left: 15px;
right: 0;
bottom: 0;

目玉の大きさは20px

目玉の大きさは縦横ともに20pxにしました。

丸い目玉はborder-radius

border-radiusは角丸を表現したい時に使用しますが、50%にする事で対象が丸くなります。

マウスオーバー時のアニメーション

1
.eyeball-left{

これだけにhoverを当ててしまうと、目にマウスオーバーしないと動かないので、

1
2
3
.circle:hover > .face > .eye-left > .eyeball-left{
　ここに目玉の動き設定をする
}

この様に記述し、マウスオーバー対象全体になる「.circle」にhoverを設定。
マウスオーバー時の動きはその後の「eyeball-left」に設定する。

口の動き

口の部分のコーディングのまとめになります。

HTMLソース部分

1
<div class="mouse"></div>

CSSソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.mouse{
　position: absolute;
　top: 45%;
　left: 80px;
　right: 80px;
　bottom: 35%;
　background: #f49e74;
　border-bottom-left-radius: 100px;
　border-bottom-right-radius: 100px;
　transition: 0.3s;
}
.circle:hover > .face > .mouse{
　top: 37%;
　bottom: 40%;
　left: 70px;
　right: 70px;
}

口の位置はposition設定

positionのtop,left,right,bottomは上、左、右、下の位置になります。

1
2
3
4
5
position: absolute;
top: 45%;
left: 80px;
right: 80px;
bottom: 35%;

口の形は角丸を使う

口の形は角丸の「radius」を使って左下角と右下角を丸くする。

マウスオーバー時のアニメーション

1
.mouse{

これだけにhoverを当ててしまうと、口にマウスオーバーしないと動かないので、

1
2
3
.circle:hover > .face > .mouse{
　ここに口の動き設定をする
}

この様に記述し、マウスオーバー対象全体になる「.circle」にhoverを設定。
マウスオーバー時の動きはその後の「mouse」に設定する。

まとめ

顔はなかなか作る機会はないですが、ボタンアクションなどでちょっとしたアニメーションがあると面白いかもしれないですね。

CSSコーディングのオススメ本

CSS辞典 第5版 [CSS2/3/4対応]

本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

予測しやすい、保守しやすい、最利用しやすい、拡張しやすい―コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!

1冊ですべて身につくHTML＆CSSとWebデザイン入門講座

知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!

初心者からちゃんとしたプロになる HTML+CSS標準入門

HTML＆CSSの使い方が全部わかる。プロを目指すなら、最初に選ぶ本!

シェア！

RECOMMENDこちらの記事も人気です。