1.效果图
话不多说附上源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color: #ffa5a5;
}
.di{
width: 200px;
height: 200px;
background-color: #D5093c;
/*调用指定动画 infinite:一直调用动画*/
animation:1s sxt infinite;
/*右下的偏移(正数) 左下的偏移(正数) 模糊度 阴影的颜色*/
/*指定阴影*/
box-shadow: 0px 0px 70px #D5093C;
}
.top{
/*倒圆角指令*/
border-radius: 100px;
position: absolute;
top: 100px;
left: 200px;
}
.bottom{
border-radius: 100px;
position: absolute;
top: 100px;
left: 374px;
}
.cen{
/*旋转45度*/
transform: rotate(45deg);
position: absolute;
top: 184px;
left: 289px;
}
/*定义跳动的动画*/
@keyframes sxt{
/*scale:放大倍数*/
0%{transform:scale(1)rotate(45deg)};
50%{transform:scale(1.1)rotate(45deg)};
100%{transform:scale(1)rotate(45deg)};
}
</style>
</head>
<body>
<!--给一个div起两个class名称-->
<div class="di top"></div>
<div class="di cen"></div>
<div class="di bottom"></div>
</body>
</html>
