动画效果实战

最新推荐文章于 2021-11-28 20:33:31 发布

LiM .YOon A

最新推荐文章于 2021-11-28 20:33:31 发布

阅读量77

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45716607/article/details/116237585

版权

前端专栏收录该内容

69 篇文章 0 订阅

订阅专栏

本文展示了如何使用HTML5和CSS3创建动态的灯泡和火箭动画效果。通过设置关键帧动画，实现了灯泡灯光闪烁以及火箭尾焰轨迹的视觉特效。这些特效利用了CSS的position属性、动画属性以及transform来实现位置变化和透明度调整。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画效果实战课</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        
        /*灯泡特效  */
        .dengpao{
            position: absolute;
            top: 300px;
            left: 300px;
        }

        .guang{
            position: absolute;
            top: 235px;
            left: 222px;
            animation: ss 1s ease 0s infinite alternate;
        }

        @keyframes ss {
            from{
                opacity: 1;
            }
            to
            {
                opacity: 0;
            }
        } 



        /* 火箭特效 */
        .huojian{
            position: absolute;
            top: 300px;
            left: 800px;
            animation: zd 1s linear .8s infinite alternate;
        }


        @keyframes zd{
            from{
                transform: translateX(-50px) translateY(-50px);
            }
            to{
                transform: translateX(50px) translateY(50px);
            }
        }

        .line1{
            position: absolute;
            width: 2px;
            height: 166px;
            background-color: orange;
            top: 300px;
            left: 800px;
            opacity: 0;
            transform: rotate(45deg);
            animation: yd 1s ease .1s infinite alternate;
        }

        .line2{
            position: absolute;
            width: 2px;
            height: 166px;
            background-color: orange;
            top: 350px;
            left: 850px;
            opacity: 0;
            transform: rotate(45deg);
            animation: yd 1s ease .4s infinite alternate;
        }

        .line3{
            position: absolute;
            width: 2px;
            height: 166px;
            background-color: orange;
            top: 390px;
            left: 890px;
            opacity: 0;
            transform: rotate(45deg);
            animation: yd 1s ease.68s infinite alternate;
        }

        .line4{
            position: absolute;
            width: 2px;
            height: 166px;
            background-color: orange;
            top: 430px;
            left: 940px;
            opacity: 0;
            transform: rotate(45deg);
            animation: yd 1s ease .98s infinite alternate;
        }

        @keyframes yd {
            0%{
                transform: rotate(45deg) translateY(-200px);
                opacity: 0;
            }
            50%{
                opacity: 1;
            }
            100%{
                transform: rotate(45deg) translateY(200px);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <img class="dengpao" src="images/dengpao.png" alt="">
    <img class="guang" src="images/guang.png" alt="">

    <img class="huojian" src="images/huojian.png" alt="">
    <div class="line1"></div>
    <div class="line2"> </div>
    <div class="line3"></div>
    <div class="line4"> </div>
</body>
</html>