html： 用CSS画一个会动的爱心
2020-08-18 本文已影响0人
生信云笔记
前言
今天分享一个HTML动画的小技巧，完全用CSS来画一个会动的爱心。动画效用的就是CSS的animation属性，但是爱心图案并不是图片，而是用CSS拼出来的，这个小技巧还是有令人眼前一亮的感觉。
废话不多说，直接来看看如何实现吧。
先来看一下最终的动态效果图是怎么样的：
接下来就是重点了，直接给出实现的代码，实现代码：
<!DOCTYPE html>
<html>
<head>
<title>animation</title>
<style type="text/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;
}
}
</style>
</head>
<body>
<div id="ht">
<p>I O U</p>
</div>
</body>
</html>
上面的代码可以实现一个动态的爱心，不过动态效果并不是无限次重复动的，当打开网页后，爱心大小会收缩和放大，如此变化三次爱心静止后‘I O U’三个字母就是旋转着出现。是不是有点‘心动’了，感兴趣的可以试一试。
最后
周末没事学习了一下CSS的animation，觉得挺好玩的就发出来分享了。emm，今天就分享到这里了。
