css3实现流星划过动画效果

最新推荐文章于 2024-04-26 13:29:10 发布

木子木木的专栏

最新推荐文章于 2024-04-26 13:29:10 发布

阅读量3.5k

点赞数 3

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_37029814/article/details/89388272

版权

这篇博客介绍了如何利用CSS3的动画效果来实现流星划过屏幕的视觉特效，内容包括HTML的基本结构和CSS3关键帧动画的设置，帮助读者掌握在网页中创建动态流星雨的技巧。

摘要由CSDN通过智能技术生成

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){