<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../demo1/js/jquery.min.js" ></script>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
*{margin: 0;padding: 0;}
body{font-family: "微軟雅黑";font-size: 14px;background: black;}
#snow{position: relative;width: 100%;height: 100%;}
.snow1{position: fixed;top: -50px;color: white;}
body{ cursor: url(logoNegertive.jpg),auto;}
</style>
</head>
<body>
<div id="snow">
</div>
<script>
$(function(){
var minsize = 5;
var maxsize = 30;
var minspeed = 5000;
var maxspeed = 10000;
var windowheight = $(window).height();
var windowwidth = $(window).width();
setInterval(function(){
var clarity = 0.5+Math.random()*(1-0.5);
var sleft = Math.round(0+Math.random() * (windowwidth-0+1))
var size = Math.round(minsize+Math.random() * (maxsize-minsize+1))
// ❉ 可以更換成直接喜歡的圖標
var snow = '<div class="snow1" style="left:'+sleft+'px;font-size:'+size+'px;opacity:'+clarity+';">❉</div>';
var speed = Math.round(minspeed+Math.random() * (maxspeed-minspeed+1))
console.log(clarity)
var endleft= sleft - 100 + Math.random() * 500;
$(snow).appendTo($("#snow")).animate({
top:windowheight + "px",
left:endleft+ "px"
},speed,function(){
$(this).remove()
})
},600)
})
</script>
</body>
</html>
一個無聊的前端工程師上廁所的時候寫的雪花掉落的特效
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章