<!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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
