html动态心,html: 用CSS画一个会动的爱心
前言
今天分享一个HTML动画的小技巧,完全用CSS来画一个会动的爱心。动画效用的就是CSS的animation属性,但是爱心图案并不是图片,而是用CSS拼出来的,这个小技巧还是有令人眼前一亮的感觉。
废话不多说,直接来看看如何实现吧。
先来看一下最终的动态效果图是怎么样的:
接下来就是重点了,直接给出实现的代码,实现代码:
animation*{
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,今天就分享到这里了。
html动态心,html: 用CSS画一个会动的爱心
前言
今天分享一个HTML动画的小技巧,完全用CSS来画一个会动的爱心。动画效用的就是CSS的animation属性,但是爱心图案并不是图片,而是用CSS拼出来的,这个小技巧还是有令人眼前一亮的感觉。
废话不多说,直接来看看如何实现吧。
先来看一下最终的动态效果图是怎么样的:
接下来就是重点了,直接给出实现的代码,实现代码:
animation*{
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,今天就分享到这里了。