gsap+splitting实现乌云盖顶电闪雷鸣文字雨落下动画效果代码-html代码-BFW代码库

gsap+splitting实现乌云盖顶电闪雷鸣文字雨落下动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+splitting实现乌云盖顶电闪雷鸣文字雨落下动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting-cells.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Acme&display=swap');
        
        p.raindrops {
        	font-family: 'Acme', sans-serif;
        	font-size: min(200%, 6vw);
        	color: #FFF;
        	text-align: center;
        	line-height: 1.5;
        	letter-spacing: 1px;
        }
        h2 {
        	position: absolute;
        	top: 105%;
        	left: 50%;
        	font-family: 'Acme', sans-serif;
        	font-size: min(200%, 10vw);
        	color: #8d81d9;
        	z-index: -2;
        }
        
        img.cloud {
        	position: absolute;
        	top: 0;
        	left: 50%;
        	max-width: 70%;
        	transform: translate(-50%);
        	filter: brightness(.7);
        	z-index: 10;
        }
        img.lightning {
        	position: absolute;
        	top: 20px;
        	left: 50%;
        	max-width: 20%;
        	opacity: 0;
        	animation: flash 6s both 2s;
        }
        @keyframes flash {
        	0%, 19%, 26%, 44%, 46%, 47%, 55%, 79%, 85%, 100% {opacity: 0;}
        	20%, 45%, 48%, 80% {opacity: 1;}
        }
        
        .wrap {
        	position: absolute;
        	bottom: 1em;
        	left: 50%;
        	transform: translateX(-50%);
        	width: 100%;
        }
        
        /* body styling */
        * {
        	padding: 0;
        	margin: 0;
        	box-sizing: border-box;
        }
        body {
        	min-h.........完整代码请登录后点击上方下载按钮下载查看