Implementierungsmethode zur Simulation des Herzschlags mithilfe von HTML und CSS3-CSS-Tutorial-php.cn

Implementierungsmethode zur Simulation des Herzschlags mithilfe von HTML und CSS3

不言

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

Original

1799 Leute haben es durchsucht

Dieser Artikel stellt Ihnen die Implementierungsmethode von HTML+CSS3 vor, um den Herzschlag durch Code zu simulieren. Er ist sehr gut und hat Referenzwert.

Nicht mehr Unsinn, gib es dir einfach direkt. Der spezifische Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels Ich hoffe, es wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Über die Methode zum Zeichnen von Dreieckssymbolen in HTML und CSS

Basierend auf HTML5 Der von WebGL

implementierte 3D-Computerraum basiert auf HTML5 Dynamisches 3D-Diagramm, implementiert von Canvas

Das obige ist der detaillierte Inhalt vonImplementierungsmethode zur Simulation des Herzschlags mithilfe von HTML und CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!