Implementation method of simulating heartbeat using HTML and CSS3-CSS Tutorial-php.cn

Implementation method of simulating heartbeat using HTML and CSS3

不言

Release： 2018-06-20 11:01:46

Original

1847 people have browsed it

This article introduces you to 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, I will post it directly to you. The code, 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>

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone's study. Please pay attention to more related content. PHP Chinese website!

Related recommendations:

About the method of drawing triangle icons in Html and CSS

Based on HTML5 The 3D computer room implemented by WebGL

is based on HTML5 3D dynamic Chart chart implemented by Canvas

The above is the detailed content of Implementation method of simulating heartbeat using HTML and CSS3. For more information, please follow other related articles on the PHP Chinese website!