Home >Web Front-end >CSS Tutorial >Use html+css3 to create heart beating animation
Use html+css3 to create heart beating animation
- 一个新手Original
- 2017-09-06 14:23:161883browse
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>模拟心的跳动</title></head><style type="text/css">
* {
margin: 0;
padding: 0;}body {
background-color: #D4CECE;}.big {
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
animation: heartAnimation 0.7s linear 0s infinite;}.big #heart {
margin: 5px 0;
width: 100%;
height: 100%;
background-color: #FF0606;
position: absolute;}.left,.right {
border-radius: 100px 100px 0 0; /*左上 右上 右下 左下*/
box-shadow: 0px 0px 20px #FD0707;}.bottom {
box-shadow: 0px 0px 20px #FD0707;}.left {
transform: translate(-50px,150px) rotate(-45deg); /*translate()位移 rotate() 旋转角度*/}.right {
transform: translate(50px,150px) rotate(45deg);}.bottom {
transform: translate(0,214px) rotate(45deg) scale(.9,.9) /*scale:定义 2D 缩放转换。*/}/*动画效果*/@keyframes heartAnimation{
form {
transform: scale(0.9,0.9);
}
to {
transform: scale(1.1,1.1);
}}</style><body>
<p class="big">
<p id="heart" class="left"></p>
<p id="heart" class="right"></p>
<p id="heart" class="bottom"></p>
</p>
</body>
</html>
The above is the detailed content of Use html+css3 to create heart beating animation. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn