snowfall+simpleParallax实现窗外鼠标交互的下雪动画代码

代码语言:html

所属分类:动画

代码描述:snowfall+simpleParallax实现窗外鼠标交互的下雪动画代码

代码标签: snowfall simpleParallax 窗外 鼠标 交互 下雪 动画

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


<!DOCTYPE html>
<html lang="en" >

<head>

 
<meta charset="UTF-8">

 
 
 
 
<style>
@import url('https://fonts.googleapis.com/css2?family=Flavors&display=swap');

:root {
        --vheight:140px;
}



body {
        background-color: #99ccff;
        margin:0;
        padding:0;
}

@keyframes letItSnow_ani {
        to {
                opacity:0;
        }
}

.letItSnow {
        position: absolute;
        text-align:center;
        pointer-events: none;
        z-index:3;
        font-family: 'Flavors', cursive;
        color: #cc0000;
        font-size:120px;
        left:0;
        right:0;
        top:0;
        bottom:0;
        line-height:100vh;
        text-shadow: 3px 3px black, -3px -3px black, 3px -3px black, -3px 3px black,
                                 5px 5px 1px white, -5px -5px 1px white, 5px -5px 1px white, -5px 4px 1px  white,
                           6px 6px 9px #e60000, -7px -7px 9px #ff3333, 6px -6px 9px #ff3333, -6px 6px 9px #ff3333;
        opacity:.8;
        animation-fill-mode:both;
        animation-name: letItSnow_ani;
  animation-duration: 3s;
        animation-delay: 5s;
}

.room {
        position: absolute;
        z-index:10000;
        isolation: isolate;
        margin:0;
        padding:0;
        top:0;
        left:0;
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0