最新消息: USBMI致力于为网友们分享Windows、安卓、IOS等主流手机系统相关的资讯以及评测、同时提供相关教程、应用、软件下载等服务。

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

互联网 admin 3浏览 0评论

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,今天就分享到这里了。

发布评论

评论列表 (0)

  1. 暂无评论