pug+scss实现炫酷龙卷风飓风动画效果代码-html代码-BFW代码库

pug+scss实现炫酷龙卷风飓风动画效果代码

代码语言：html

所属分类：动画

代码描述：pug+scss实现炫酷龙卷风飓风动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
    
      
<style type = 'text/scss'>
// Custom param *** START
html {
        box-sizing: border-box;
        overflow: hidden;
}

*,
*::before,
*::after {
        box-sizing: inherit;
}

body {
        display: grid;
        place-content: center;
        height: 100vh;
}

main {
        position: relative;
        height: 80vmin;
        aspect-ratio: 67/78;
        animation: move 1.5s ease-in-out infinite;
        transform-origin: bottom center;

        span {
                --dur: 0.2s;
                --s: 7%;
                position: absolute;
                left: 68%;
                bottom: 0;
                width: var(--s);
                aspect-ratio: 1;
                background-color: #6db33f;
                border-top-left-radius: 100%;
                border-bottom-right-radius: 100%;
                translate: -200% -200%;
                opacity: 0;
                animation: floor var(--dur) infinite reverse,
                        opacity calc(var(--dur) / 2) infinite alternate;
                animation-delay: calc(var(--dur) / -0.5);

                &:nth-of-type(6n + 2) {
                        --dur: 0.3s;
                        translate: 200% -300%;
                }

                &:nth-of-type(6n + 3) {
                        --dur: 0.4s;
                        translate: 400% -300%;
                }

                &:nth-of-type(6n + 4) {
                        --dur: 0.5s;
                        translate: -400% -300%;
                }

                &:nth-of-type(6n + 5) {
                        --dur: 0.6s;
                        translate: 0 -300%;
                }

                &:nth-of-type(6n + 6) {
                        --dur: 0.7s;
                        translate: -500% -500%;
                }

                &:nth-of-type(n + 7) {
                        width: calc(var(--s) / 2.5);
                        border-radius: 50%;
                        background-color: #70543e;
                }
        }
}

i {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 67/20;
        border-radius: 50% 50% 30% 30% / 33% 33% 66% 66%;
        background: linear-gradient(
                        to right in oklab,
                        transparent,
                        rgba(white, 0.8) 40%,
                        transparent
                ),
                radial-gradient(in oklab, #cfdae3, #9aa5b1, #cfdae3);
        rotate: calc(var(--r) * -1);
        mix-blend-mode: darken;
        background-size: 100% 100%;
        animation: size 0.3s infinite alter.........完整代码请登录后点击上方下载按钮下载查看