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