一款纯CSS3绘制的符号表情动画特效,每一种符号表情都有一个鼠标悬停的效果,可以通过修改CSS样式来调整表情的显示。
页面的head部分,需引入页面的CSS样式文件,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,用了多个div的嵌套结构和figure标签,代码如下:
<div class="container">
<div class="wrapper">
<div class="emoji grin">
<figure class="face">
<span class="eyes">
<span class="eye"></span>
<span class="eye"></span>
</span>
<span class="mouth teath tounge">
</span>
</figure>
</div>
<div class="emoji sad">
<figure class="face">
<span class="eyes">
<span class="eye"></span>
<span class="eye"></span>
</span>
<span class="mouth tounge">
</span>
</figure>
</div>
<div class="emoji shocked">
<figure class="face">
<span class="eyes">
<span class="eye"></span>
<span class="eye"></span>
</span>
<span class="mouth">
</span>
</figure>
</div>
<div class="emoji laugh">
<figure class="face">
<span class="eyes">
<span class="eye"></span>
<span class="eye"></span>
</span>
<span class="mouth tounge">
</span>
</figure>
</div>
<div class="emoji smile">
<figure class="face">
<span class="eyes">
<span class="eye"></span>
<span class="eye"></span>
</span>
<span class="mouth">
</span>
</figure>
</div>
<div class="emoji speechless">
<figure class="face">
<span class="eyes">
<span class="eye"></span>
<span class="eye"></span>
</span>
<span class="mouth">
</span>
</figure>
</div>
<div class="emoji love">
<figure class="face">
<span class="eyes">
<span class="heart-eye">
<span class="heart"></span>
</span>
<span class="heart-eye">
<span class="heart"></span>
</span>
</span>
<span class="mouth tounge">
</span>
</figure>
</div>
<div class="emoji angry">
<figure class="face">
<span class="eyes">
<span class="eye"></span>
<span class="eye"></span>
</span>
<span class="mouth">
</span>
</figure>
</div>
</div>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791