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>

最终效果图:

看完该文章有什么感受?

发表评论

电子邮件地址不会被公开。

标签:, ,
顶部