Home > Article > Web Front-end > HTML+CSS3 to achieve heartbeat effect code sharing
HTML+CSS3 to achieve heartbeat effect code sharing
- 巴扎黑Original
- 2017-09-07 09:41:184200browse
This article introduces to you the implementation method of HTML+CSS3 to simulate the beating of the heart through code. It is very good and has reference value. Friends who need it can refer to it
No more nonsense, just give it to you directly The code is posted. The specific code is as follows:
<!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 HTML+CSS3 to achieve heartbeat effect code sharing. 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