Simulieren Sie den Effekt eines Herzschlags im Sekundentakt-CSS-Tutorial-php.cn

Simulieren Sie den Effekt eines Herzschlags im Sekundentakt

php中世界最好的语言

Freigeben： 2018-03-21 13:24:39

Original

2856 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen den Effekt der Simulation eines Herzschlags in einer Sekunde. Was sind die Vorsichtsmaßnahmen , um den Effekt eines Herzschlags in einer Sekunde zu simulieren? sehen.

Ohne weitere Umschweife werde ich den Code direkt für Sie veröffentlichen. 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

Glauben Sie es. Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von Zeigerereignissen in CSS3

Verwenden Sie vollständig CSS, um Elemente zu zentrieren

Ausführliche Erklärung der Verwendung von „Focus-within“

Das obige ist der detaillierte Inhalt vonSimulieren Sie den Effekt eines Herzschlags im Sekundentakt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!