css动画实战---火箭在宇宙穿梭

最新推荐文章于 2024-04-05 09:45:12 发布

一粒程序米

最新推荐文章于 2024-04-05 09:45:12 发布

阅读量276

点赞数

分类专栏：前端CSS

本文链接：https://blog.csdn.net/weixin_43449246/article/details/118699387

版权

前端CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这段代码演示了如何使用CSS动画来创建一个火焰燃烧的效果。主要涉及到的关键元素包括一个类名为'huojian'的图片元素，以及四个不同类名的线条元素，通过变换和动画属性实现火焰的摇曳和光线的闪烁。动画包括火焰的水平垂直移动('zd'关键帧)和光线的旋转及透明度变化('yd'关键帧)。

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

在这里插入图片描述
动画用法

 animation: zd .4s linear 0s infinite alternate;
 @keyframes zd {
            from {
                transform: translateX(-20px) translateY(-20px);
            }
            to {
                transform: translateX(20px) translateY(20px);
            }
        }

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
			background-color: #000000;
        }

        .huojian {
            position: absolute;
            top: 300px;
            left: 800px;
            animation: zd .4s linear 0s infinite alternate;
        }

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

        .line1 {
            width: 2px;
            height: 166px;
            background-color: yellow;
            position: absolute;
            top: 300px;
            left: 800px;
            transform: rotate(45deg);
            animation: yd 1s linear 0s infinite;
            opacity: 0;
        }
        .line2 {
            width: 2px;
            height: 266px;
            background-color: yellow;
            position: absolute;
            top: 340px;
            left: 850px;
            transform: rotate(45deg);
            animation: yd 1s linear .4s infinite;
            opacity: 0;
        }
        .line3 {
            width: 2px;
            height: 266px;
            background-color: yellow;
            position: absolute;
            top: 390px;
            left: 890px;
            transform: rotate(45deg);
            animation: yd 1s linear .68s infinite;
            opacity: 0;
        }
        .line4 {
            width: 2px;
            height: 266px;
            background-color: yellow;
            position: absolute;
            top: 390px;
            left: 920px;
            transform: rotate(45deg);
            animation: yd 1s linear .2s infinite;
            opacity: 0;
        }
        @keyframes yd {
            0% {
                transform: rotate(45deg) translateY(-300px);
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: rotate(45deg) translateY(300px);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <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>

一粒程序米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css动画实战---火箭在宇宙穿梭

动画用法 animation: zd .4s linear 0s infinite alternate; @keyframes zd { from { transform: translateX(-20px) translateY(-20px); } to { transform: translateX(20px) translateY(20px); .
复制链接

扫一扫