Home > Article > Web Front-end > Implementation method of simulating heartbeat using HTML and CSS3

Implementation method of simulating heartbeat using HTML and CSS3

不言Original: 2018-06-20 11:01:461789browse

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>

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!

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

Previous article：About the adaptive method of realizing fixed width on the right and width on the left in cssNext article：About the adaptive method of realizing fixed width on the right and width on the left in css

See more

Implementation method of simulating heartbeat using HTML and CSS3

Related articles