会动的表情
挑战介绍
本次挑战会实现一个萌萌的表情包，鼠标放在该表情包上面，它会向右转动。结合之前学习的内容，我们来实现一下吧！
效果展示
知识点
- border-radius
- box-shadow
- transition
- :after
- margin
- :hover
挑战准备
上面给出了本次挑战中熟悉的知识点，这里只带着大家演示一下 :after 的用法。
:after 是用于在被选元素的内容后面插入新的内容。举个例子来看看。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>:after 的用法</title>
<style>
p:after {
content: "--释慧开"; /*添加的内容需要写在 content 属性中*/
color: #96bb7c;
}
</style>
</head>
<body>
<p>若无闲事挂心头，便是人间好时节。</p>
</body>
</html>
显示效果如下：
这里给大家提供参考代码中用到的颜色。
#68B8ED
#FFD47F
#FFB010
#CC8800CSS 的挑战没有固定答案请大家发挥想象自行设计。
挑战要求
- 新建一个 index.html 的文件。
- 使用一对 div 标签作为表情包的整个脸，并带有一个名为 face 的类选择器。
- 表情包的眼睛和嘴巴均用 <span> 来实现。
- 眼睛需要三层 span 标签，第一层需要两个类选择器（eye 和 left-eye 或者 eye 和 right-eye），第二层作为瞳孔，在此定义一个名为 pupil 的类选择器，最内层是瞳孔上的白点，在其定义一个名为 shine 的类选择器。
- 嘴巴单独使用一对 span 标签，并带有一个名为 mouth 的类选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
display:flex;
background-color:rgb(47, 162, 250);
justify-content:center;
}
.face{
width:200px;
height:200px;
border-radius:100%;
background:radial-gradient(rgb(249, 224, 124),rgb(252, 209, 37));
display:flex;
align-items:center;
justify-content:center;
box-shadow: 0px -15px rgb(230, 175, 58);
}
.face:hover{
transition:all 1s;
}
.eye{
position:relative;
width:50px;
height:50px;
background-color:white;
margin:20px;
border-radius:100%;
justify-content:left;
}
.pupil{
position:absolute;
width:35px;
height:35px;
background-color:black;
border-radius:100%;
}
</style>
</head>
<body>
<div class="face">
<span class="eye">
<span class="pupil">
<span class="shine"></span>
<span></span>
</span>
</span>
<span class="eye">
<span class="pupil">
<span class="shine"></span>
<span></span>
</span>
</span>
</div>
</body>
</html>未完待续