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