g
y
7
7
7
7

实训篇-Css-跳动的红心

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			/*类选择器*/
			/*三个div通用的样式*/
			.heart{
				width:200px;
				height: 200px;
				background-color: crimson;
				/*添加光晕效果*/
				/*水平偏移，垂直偏移，模糊度，颜色*/
				box-shadow: 0px 0px 70px crimson;
				/*infin就是一直做动画效果*/
				animation: ani 1s infinite;
			}
			/*左边div的样式*/
			.left{
				/*绝对定位 精确控制元素的位置*/
				position: absolute;
				left: 175px;
				top: 100px;
				/*给矩形定义圆倒角*/
				border-radius: 100px;
			}
			.right{
				/*绝对定位 精确控制元素的位置*/
				position: absolute;
				left: 325px;
				top: 100px;
				/*给矩形定义圆倒角*/
				border-radius: 100px;
			}
			/*下边div的样式*/
			.bottom{			
				/*绝对定位 精确控制元素的位置*/
				position: absolute;
				left: 250px;
				top:175px;
				/*旋转45度*/
				transform: rotate(45deg);
			}
			/*定义动画*/
			@keyframes ani{
				/*初始状态*/
				0%{transform: scale(1) rotate(45deg);}
				/*最大状态*/
				50%{transform: scale(1.1) rotate(45deg);}
				/*初始状态*/
				100%{transform: scale(1) rotate(45deg);}
			}
		</style>
		
	</head>
	<body>
		<div class="heart left" ></div>
		<div  class="heart right"></div>
		<div  class="heart bottom"></div>
		
	</body>
</html>

　　

 

posted @ 2020-01-08 10:18  gy77  阅读(220)  评论(0)    收藏  举报