1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > css3实现流星划过动画效果

css3实现流星划过动画效果

时间:2022-02-18 03:52:21

相关推荐

css3实现流星划过动画效果

html结构:

<div class="d-shootingStar"><div class="d-stars"></div><div class="d-stars"></div><div class="d-stars"></div><div class="d-stars"></div></div>

Css3:

.d-shootingStar{.pos(a);.whlt(94.1333vw,51.2vw,20vw,9vw);.transform(rotate(-12deg));.d-stars{opacity: 0;.pos(a);left: 50%;top: 50%;.wh(11vw,9vw);-webkit-animation: tail 2s ease-in-out infinite, shooting 2s ease-in-out infinite;animation: tail 2s ease-in-out infinite,shooting 2s ease-in-out infinite;background: url(anverSaryFLiuXings.png) no-repeat;background-size: 100% 100%;&:nth-child(1){top:-7%;left:5%;.wh(10vw,9vw);-webkit-animation-delay: 500ms;animation-delay: 500ms;}&:nth-child(2){.wh(11vw,9vw);top: 44%;left: 6%;.wh(11vw,9vw);-webkit-animation-delay: 0ms;animation-delay: 0ms;}&:nth-child(3){.wh(11vw,9vw);top: 5%;left: 80%;-webkit-transform: scale(0.8);transform: scale(0.8);-webkit-animation-delay: 870ms;animation-delay: 870ms;}&:nth-child(4){.wh(11vw,9vw);top: 35%;left: 90%;-webkit-transform: scale(0.6);transform: scale(0.6);-webkit-animation-delay: 300ms;animation-delay: 300ms;}}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。