2019年-11月-15日
0
CSS3多种新增样式的综合应用（笑脸）
直接放出源代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
<style>
*{margin:0; padding:0;}
.box{
width:500px;
height:500px;
border-radius:50%;
margin:80px auto;
position:relative;
}
/*制作眼睛 开始*/
/*给.box里面的两个div元素制作背景色为黑色的圆形*/
.box>.left{
width:50px;
height:50px;
border-radius:50%;
background:#000;
position:absolute;
left:100px;
top:150px;
}
.box>.right{
width:50px;
height:50px;
border-radius:50%;
background:#000;
position:absolute;
right:100px;
top:150px;
}
/*给.box里面的两个div元素制作背景为白色的比较大的圆形，档住自身黑色的圆形，并将白色的圆形向下移动，露出一部分黑色圆形，形成眼睛*/
.box>.left::before,.box>.right::before{
content:"";
background:#fff;
position:absolute;
width:80px;
height:80px;
border-radius:50%;
left:-15px;
top:15px;
}
/*制作眼睛 结束*/
/*制作嘴巴 开始*/
/*给.box里面的p元素依照前面制作眼睛的方法来制作嘴巴*/
.box>p{
width:150px;
height:150px;
border-radius:50%;
background:#000;
margin-left:50%;
position:absolute;
left:-75px;
bottom:50px;
}
.box>p::before{
content:"";
background:#fff;
position:absolute;
width:170px;
height:170px;
border-radius:50%;
left:-10px;
top:15px;
}
/*制作嘴巴 结束*/
.box,.box div{/*监听.box的所有css样式与.box里面div的所有css样式的变化，并使这些css样式变化在1秒钟的时间段内完成（此为动画效果）*/
transition:all 1s;
}
.box:hover{/*鼠标移到.box的范围上时，显示彩虹边框*/
border:none;
box-shadow:
0 0 10px 10px red,
0 0 10px 20px orange,
0 0 10px 30px yellow,
0 0 10px 40px green,
0 0 10px 50px cyan,
0 0 10px 60px blue,
0 0 10px 70px purple;
}
/*鼠标移到.box的范围上时，嘴巴由哭变笑*/
.box:hover>p{
transform:rotate(180deg);
bottom:100px;
}
.box:hover>p::before{
width:230px;
height:230px;
left:-40px;
top:30px;
}
/*鼠标移到.box的范围上时，眼睛放大1.5倍*/
.box:hover>.left,.box:hover>.right{
transform:scale(1.5);
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<p></p>
</div>
</body>
</html>
最终效果图：
