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

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;
	right:0;
	bottom:0;
}


.wall {
	position:absolute;
	background-color:#ffecb3;
	padding:0;
	margin:0;
  background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);
  background-size: 60.1px 50px;
}
.hwall {
	left:0;
	right:0;
}

#leftWall {
	left:0;
}

#rightWall {
	right:0;
}

.vwall {
	/* top: var(--vheight);
	bottom: var(--vheight); */
}

#upperWall {
	top:0;
}

#lowerWall {
	bottom:0;
}

#windowFrame {
	position:absolute;
	box-sizing: border-box;
	border:solid #527a7a 20px;
	border-radius:4px;
	z-index:2;
	box-shadow: 6px 6px 9px black, 6px -6px 9px black;
	margin:0;
	padding:0;
}
</style>


</head>

<body>

<div class="room">
	<div class="wall hwall" id="upperWall">
	</div>

	<div class="wall vwall" id="leftWall">
	</div>

	<div class="wall vwall" id="rightWall">
	</div>


	<div class="wall hwall" id="lowerWall">
	</div>

	<svg id="windowFrame" width="50%" height="100">


	</svg>
	<div class="letItSnow">Let it Snow!</div>
</div><!-- room -->

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simpleParallax.js"></script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/snowfall.js"></script>


  
      <script  >
const snowfall = new Snowfall()
const windowFrameNd = document.getElementById("windowFrame")
const upperWallNd = document.getElementById("upperWall")
const lowerWallNd = document.getElementById("lowerWall")
const leftWallNd = document.getElementById("leftWall")
const rightWallNd = document.getElementById("rightWall")

const SIDE_WALL_PCT = .25
const UPPER_LOWER_WALL_PCT = .18

let bResizing = false
let nCurrentStrokeThickness = 10
let sCurrentStrokeColor = "#527a7a"
let nWindowFrameWidth,nWindowFrameHeight
let nPanesAcross = 10
let nPanesDown = 4
let nWinWidth,nWinHeight

function buildWindowFrameDesign() {
	const s=[]
	const innerOffset = 6
	nWindowFrameWidth = windowFra.........完整代码请登录后点击上方下载按钮下载查看