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