Heim >Web-Frontend >CSS-Tutorial >Verwenden Sie HTML+CSS3, um eine Herzschlaganimation zu erstellen
Verwenden Sie HTML+CSS3, um eine Herzschlaganimation zu erstellen
- 一个新手Original
- 2017-09-06 14:23:161891Durchsuche
<!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>
Das obige ist der detaillierte Inhalt vonVerwenden Sie HTML+CSS3, um eine Herzschlaganimation zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Tipps zum Lösen der automatischen CSS-Eingabeaufforderung nach der Eingabe eines Semikolons in SublimeNächster Artikel：Tipps zum Lösen der automatischen CSS-Eingabeaufforderung nach der Eingabe eines Semikolons in Sublime