html5 心跳效果,css3实现心脏跳动

源码如下:

Title

*{

margin: 0;

padding: 0;

}

body{

width: 100vw;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background: #34495e;

}

.heart{

width: 200px;

height: 200px;

background: red;

transform: rotate(45deg) scale(.5);

animation-name: hd;

animation-duration: 2s;

animation-iteration-count: infinite;

}

.heart::before{

content: "";

width: 200px;

height: 200px;

border-radius: 50%;

position: absolute;

background: red;

transform: translateX(-100px);

}

.heart::after{

content: "";

width: 200px;

height: 200px;

border-radius: 50%;

position: absolute;

background: red;

transform: translateY(-100px);

}

@keyframes hd {

25%{

transform: rotate(45deg) scale(1);

}

50%{

transform: rotate(45deg) scale(.5);

}

75%{

transform: rotate(45deg) scale(1);

}

to{

transform: rotate(45deg) scale(.5);

}

}

标签：css3,scale,心脏,45deg,transform,width,跳动,rotate,200px

来源： https://www.cnblogs.com/y-y-y-y/p/12205445.html