<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>心的跳动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body {
100%;
background-color: #000;
}
.all {
margin: 100px auto;
200px;
height: 200px;
position: relative;
animation-name: heard;
animation-duration: 0.5s;
animation-iteration-count: infinite;
}
.all div {
100%;
height: 100%;
position: absolute;
background: #f00;
animation-name: shadow;
animation-duration: 0.5s;
animation-iteration-count: infinite;
}
.left,.right {
border-radius: 100px 100px 0 0 ;
}
.left {
transform: translate(-50px,0) rotate(-45deg);
}
.right {
transform: translate(50px,0) rotate(69deg);
}
.below {
transform: translate(0,64px) rotate(45deg) scale(.9,.9); /*scale:定义 2D 缩放转换。*/
}
@keyframes heard {
from {
transform:scale(.9,.9);
}
to {
transform:scale(1.1,1.1);
}
}
@keyframes shadow {
from {
}
to {
box-shadow:0px 0px 50px red; /*阴影*/
}
}
</style>
</head>
<body>
<div class="all">
<div class="left"></div>
<div class="right"></div>
<div class="below"></div>
</div>
</body>
</html>