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.........完整代码请登录后点击上方下载按钮下载查看