CSS实现,一颗剧烈跳动的心

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=”utf-8”>
<style type=”text/css”>
div{
width:200px;
height:200px;
background-color:red;
margin:150px auto;

/旋转/
transform: rotate(45deg);
filter: drop-shadow(0px 0px 30px red);
opacity: 0.8;
animation: jump .1s linear infinite;
}
@keyframes jump{
0%{
transform: scale(1)rotate(45deg);
}
70%{
transform: scale(0.8)rotate(45deg);

}
90%{
transform: scale(1.2)rotate(45deg);

}
100%{
transform: scale(1)rotate(45deg);
}
}
div:before{
content: "";
display: block;
width: 200px;
height: 200px;
background-color:red;
position: relative;
left: -100px;
border-radius: 50%;

}
div:after{
content: “”;
display:block;
width: 200px;
height: 200px;
background-color: red;
position: relative;
top: -300px;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

//复制到txt文档中,后缀名改为html

Comments