下面是一段html代码，你可以把它在浏览器中显示一下，有点意思。
<!DOCTYPE html>
<html lang="en" encoding="utf-8">
<head>
<meta charset="UTF-8">
<title>Titlexinxing</title>
<style>
body{
background-color:#ffa5a5;
}
.cen{
width: 200px;
height: 200px;
background-color: red;
box-shadow:0px 0px 80px red;
animation:0.6s ad infinite;
}
.left{
border-radius:100px;
position:absolute;
top:200px;
left:200px;
}
.rig{
border-radius: 100px;
position:absolute;
top:200px;
left:341px;
}
.c{
transform: rotate(45deg);
position:absolute;
top: 269px;
left: 271px;
}
@keyframes ad{
0%{transform:scale(1)rotate(45deg);}
50%{transform:scale(1.1)rotate(45deg);}
100%{transform:scale(1)rotate(45deg);}
}
div:hover{
transform:scale(1.3);
transform:translate(0px,-5px);
transform:skew()
}
</style>
</head>
<body>
<div class="cen left"></div>
<div class="cen c"></div>
<div class="cen rig"></div>
</body>
</html>
运行之前，需要调整一下嵌套格式。
