您现在的位置: 首页 > 微信营销 > 微信动态文章 > 如何用html或者js制作天降很多的滑稽还有代码雨的特效(html开发数字雨特效代码)

如何用html或者js制作天降很多的滑稽还有代码雨的特效(html开发数字雨特效代码)

作者:pc668   来源:  热度:581  时间:2022-02-24
如何用html或者js制作天降很多的滑稽还有代码雨的特效<style> * { margin:0; padding:0; } body { background:black; overflow:hidden; } .container { width:20px; height:60px; position:absolute; } .nav { height:20px; width:20px; display:block; m

如何用html或者js制作天降很多的滑稽还有代码雨的特效

<style>

* {

margin:0;

padding:0;

}

body {

background:black;

overflow:hidden;

}

.container {

width:20px;

height:60px;

position:absolute;

}

.nav {

height:20px;

width:20px;

display:block;

margin-top:12px;

border-radius:10px;

background:#33ccff;

opacity:0.8;

background: url(1.jpg) no-repeat center;

background-size: auto 100%;

}

</style>

<script>

$(function() {

var w = window.screen.width;

var h = window.screen.height;

var count = 0;

var drop = function() {

this.v = Math.random() * 1 0.5;

this.left = Math.random() * w;

}

drop.prototype = {

constructor: drop,

create: function() {

count ;

var $drop = $('<div class="container"><span class="nav"></span></div>');

$drop.appendTo('body');

},

addCss: function() {

$('.container:last').css({

left: this.left 'px'

})

},

dropEvent: function() {

var time = Math.floor(h / this.v);//下降速度

$('.container:last').animate({

top: h 'px',

opacity: '1'

}, time)

}

}

function updata() {

if(count > 200) {

for(var i = 0; i < 100; i ) {

$('div:first').remove();

}

count = 0;

}

}

setInterval(function() {

var Drop = new drop();

Drop.create();

Drop.addCss();

Drop.dropEvent();

updata();

}, 50)

})

</script>

登录

使用微信帐号或QQ直接登录,无需注册