html编码心形,CSS3心形效果代码

利用css3实现了心形效果，并且还能够跳动。

代码实例如下:

web前端开发学习q群：767273102 技术分享，欢迎基础小伙伴

#myheart {

position: relative;

width: 150px;

height: 220px;

}

#myheart:before,#myheart:after {

position: absolute;

left: 100px;

background: red;

height: 160px;

width: 100px;

content: "";

border-radius: 50px 50px 0 0;

transform: rotate(-45deg);

transform-origin: 0 100%;

}

#myheart:after {

left: 0;

transform: rotate(45deg);

transform-origin: 100% 100%;

}

@keyframes heart {

0% {

-webkit-transform: scale(1);

}

50% {

-webkit-transform: scale(0.8);

}

100% {

-webkit-transform: scale(1);

}

}

.myheart {

position: absolute;

top: 40%;

left: 40%;

animation: heart 1.5s linear infinite;

}

标签：CSS3,scale,心形,代码,transform,myheart,webkit,position,100%

来源： https://blog.csdn/llll789789/article/details/97037583