html动态心,html： 用CSS画一个会动的爱心

画一个会动的爱心"/>

html动态心,html： 用CSS画一个会动的爱心

前言

今天分享一个HTML动画的小技巧，完全用CSS来画一个会动的爱心。动画效用的就是CSS的animation属性，但是爱心图案并不是图片，而是用CSS拼出来的，这个小技巧还是有令人眼前一亮的感觉。

废话不多说，直接来看看如何实现吧。

先来看一下最终的动态效果图是怎么样的：

接下来就是重点了，直接给出实现的代码，实现代码：

*{

margin: 0;

padding: 0

}

body {

width: 100vw;

height: 100vh;

display: flex;

background: grey;

justify-content: center;

align-items: center;

}

#ht {

width: 200px;

height: 200px;

background: red;

transform: rotate(45deg);

animation-duration: 3s;

animation-name: heart;

animation-fill-mode: forwards;

}

#ht:before{

content: "";

width: 200px;

height: 200px;

background: red;

position: absolute;

border-radius: 50%;

transform: translateX(-100px);

}

#ht:after{

content: "";

width: 200px;

height: 200px;

background: red;

position: absolute;

border-radius: 50%;

transform: translateY(-100px);

}

p {

font-size: 2em;

color: blue;

position: absolute;

top: 30px;

left: -6px;

transform: rotate(-45deg);

animation-name: words;

animation-duration: 2s;

animation-delay: 3s;

z-index: 1;

opacity: 0;

animation-fill-mode: forwards;

}

@keyframes heart{

25% {

transform: rotate(45deg) scale(1)

}

50% {

transform: rotate(45deg) scale(0.5)

}

75% {

transform: rotate(45deg) scale(1)

}

85% {

transform: rotate(45deg) scale(0.5)

}

100% {

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

}

}

@keyframes words{

100% {

transform: rotate(315deg);

opacity: 0.8;

}

}

I O U

上面的代码可以实现一个动态的爱心，不过动态效果并不是无限次重复动的，当打开网页后，爱心大小会收缩和放大，如此变化三次爱心静止后‘I O U’三个字母就是旋转着出现。是不是有点‘心动’了，感兴趣的可以试一试。

最后

周末没事学习了一下CSS的animation，觉得挺好玩的就发出来分享了。emm，今天就分享到这里了。