HTML+CSS简单的火箭特效

粥粥ei

于 2024-04-25 10:55:39 发布

阅读量198

点赞数 1

文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/m0_59390027/article/details/138182263

版权

源码如下

html文件：

<!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>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="./vfx.css">
</head>

<body>
    <div class="loader">
        <div class="rocket">
            <!-- 火箭图标 -->
            <i class="fa-solid fa-rocket"></i>
            <!-- 云朵图标 -->
            <i class="fa-solid fa-cloud" style="--i:0;"></i>
            <i class="fa-solid fa-cloud" style="--i:1;"></i>
            <i class="fa-solid fa-cloud" style="--i:2;"></i>
            <i class="fa-solid fa-cloud" style="--i:3;"></i>
        </div>
        <span>
            <i></i>
        </span>
    </div>
</body>

</html>

"--i" 是自定义的 CSS 变量，它的值可以在 CSS 中被引用和修改。0/1/2/3 是给 --i 变量赋的初始值。在这里，--i 变量被用来控制每个云朵图标的位置偏移量，通过设置不同的值来实现每个云朵的位置调整

CSS文件：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* background-color: #eaeef0; */
}

.loader {
    position: relative;
    display: flex;
    overflow: hidden;
}

.loader span {
    position: relative;
    width: 300px;
    height: 300px;
    background: #eaeef0;
    border: 6px solid #eaeef0;
    border-radius: 50%;
    overflow: hidden;
}

.loader span::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5),
        inset -5px -5px 15px rgba(255, 255, 255, 1);
}

.loader span::after {
    content: "";
    position: absolute;
    inset: 40px;
    background-color: #eaeef0;
    border: 3px solid #eaeef0;
    border-radius: 50%;
    box-shadow: -8px -8px 25px rgba(255, 255, 255, 1),
        8px 8px 25px rgba(0, 0, 0, 0.15),
        inset 3px 3px 10px rgba(0, 0, 0, 0.15),
        inset -1px -1px 15px rgba(255, 255, 255, 1);

}

.loader span i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
    animation: animate 1s linear infinite;
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.rocket {
    position: absolute;
    inset: 50px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 50%;
}

.rocket .fa-rocket {
    position: absolute;
    color: #ff518c;
    font-size: 3.5em;
    -webkit-text-stroke: 2px #000;
    animation: animateRocket 0.2s linear infinite;
}

@keyframes animateRocket {
    0% {
        transform: translate(0, 0) rotate(-45deg);
    }

    100% {
        transform: translate(0px, 3px) rotate(-45deg);
    }
}

.fa-cloud {
    position: absolute;
    top: calc(35px*var(--i));
    left: calc(45px*var(--i));
    /*通过自定义变量来控制每个云朵的偏移量 */
    font-size: 2em;
    color: #fff;
    -webkit-text-stroke: 2px #000;
    animation: animateClouds 1s linear infinite;
    animation-delay: calc(-0.5s*var(--i));

    /* animation-delay定义了动画的延迟时间,使用了 calc() 函数来计算延迟时间
    var(--i)为html中的自定义变量， 从而使得每个云朵图标在前
    一个云朵动画开始后的一定时间内开始动，
    可以实现一种错开的效果，
    值是负值是因为让动画在其正常开始之前就开始
    */
}

@keyframes animateClouds {
    0% {
        transform: translateY(calc(-35*5px));
    }

    100% {
        transform: translateY(calc(35*5px));
    }

}