html特效代码下雪（html雪花飘落效果代码）

今天给各位分享html特效代码下雪的知识，其中也会对html雪花飘落效果代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、如何用html或者js制作天降很多的滑稽还有代码雨的特效？
• 2、HTML下雪代码
• 3、如何做网页里那种下雪的效果
• 4、怎样使用html代码做下雪特效
• 5、jquery实现天气预报麻烦吧html和css也带上
• 6、谁能给一个鼠标跟随下雪的效果啊...

如何用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

HTML下雪代码

html

head

/head

BODY bgcolor="#000000"

SCRIPT language=JavaScript1.2

var snowsrc="images/xuehua1.gif"

var no = 10;

var ns4up = (document.layers) ? 1 : 0; // browser sniffer

var ie4up = (document.all) ? 1 : 0;

var dx, xp, yp; // coordinate and position variables

var am, stx, sty; // amplitude and step variables

var i, doc_width = 800, doc_height =600;

if (ns4up) {

doc_width = self.innerWidth;

doc_height = self.innerHeight;

} else if (ie4up) {

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

dx = new Array();

xp = new Array();

yp = new Array();

am = new Array();

stx = new Array();

sty = new Array();

for (i = 0; i no; ++ i) {

dx[i] = 0; // set coordinate variables

xp[i] = Math.random()*(doc_width-50); // set position variables

yp[i] = Math.random()*doc_height;

am[i] = Math.random()*20; // set amplitude variables

stx[i] = 0.02 + Math.random()/10; // set step variables

sty[i] = 0.7 + Math.random(); // set step variables

if (ns4up) { // set layers

if (i == 0) {

document.write("layer name=\"dot"+ i +"\" left=\"50\" top=\"50\" visibility=\"show\"img src='"+snowsrc+"' border=\"0\"/a/layer");

} else {

document.write("layer name=\"dot"+ i +"\" left=\"50\" top=\"50\" visibility=\"show\"img src='"+snowsrc+"' border=\"0\"/layer");

}

} else if (ie4up) {

if (i == 0) {

document.write("div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"img src='"+snowsrc+"' border=\"0\"/a/div");

} else {

document.write("div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"img src='"+snowsrc+"' border=\"0\"/div");

}

}

}

function snowNS() { // Netscape main animation function

for (i = 0; i no; ++ i) { // iterate for every dot

yp[i] += sty[i];

if (yp[i] doc_height-50) {

xp[i] = Math.random()*(doc_width-am[i]-30);

yp[i] = 0;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

doc_width = self.innerWidth;

doc_height = self.innerHeight;

}

dx[i] += stx[i];

document.layers["dot"+i].top = yp[i];

document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);

}

setTimeout("snowNS()", 10);

}

function snowIE() { // IE main animation function

for (i = 0; i no; ++ i) { // iterate for every dot

yp[i] += sty[i];

if (yp[i] doc_height-50) {

xp[i] = Math.random()*(doc_width-am[i]-30);

yp[i] = 0;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

dx[i] += stx[i];

document.all["dot"+i].style.pixelTop = yp[i];

document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);

}

setTimeout("snowIE()", 10);

}

if (ns4up) {

snowNS();

} else if (ie4up) {

snowIE();

}

/SCRIPT

/body

/html

记得给我加分啊

var snowsrc="images/xuehua1.gif"这句是你雪花图片的地址

如何做网页里那种下雪的效果

JAVA代码

body

script language="JavaScript1.2"

var snowsrc="images/snow.gif"

var no = 10;

var ns4up = (document.layers) ? 1 : 0; // browser sniffer

var ie4up = (document.all) ? 1 : 0;

var dx, xp, yp; // coordinate and position variables

var am, stx, sty; // amplitude and step variables

var i, doc_width = 800, doc_height = 600;

if (ns4up) {

doc_width = self.innerWidth;

doc_height = self.innerHeight;

} else if (ie4up) {

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

dx = new Array();

xp = new Array();

yp = new Array();

am = new Array();

stx = new Array();

sty = new Array();

for (i = 0; i no; ++ i) {

dx[i] = 0;

xp[i] = Math.random()*(doc_width-50);

yp[i] = Math.random()*doc_height;

am[i] = Math.random()*20;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

if (ns4up) {

document.write("layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"img src='"+snowsrc+"' border=\"0\"/layer");

} else if (ie4up) {

document.write("div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"img src='"+snowsrc+"' border=\"0\"/div");

}

}

function snowNS() { // Netscape main animation function

for (i = 0; i no; ++ i) { // iterate for every dot

yp[i] += sty[i];

if (yp[i] doc_height-50) {

xp[i] = Math.random()*(doc_width-am[i]-30);

yp[i] = 0;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

doc_width = self.innerWidth;

doc_height = self.innerHeight;

}

dx[i] += stx[i];

document.layers["dot"+i].top = yp[i];

document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);

}

setTimeout("snowNS()", 10);

}

function snowIE() { // IE main animation function

for (i = 0; i no; ++ i) { // iterate for every dot

yp[i] += sty[i];

if (yp[i] doc_height-50) {

xp[i] = Math.random()*(doc_width-am[i]-30);

yp[i] = 0;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

dx[i] += stx[i];

document.all["dot"+i].style.pixelTop = yp[i];

document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);

}

setTimeout("snowIE()", 10);

}

if (ns4up) {

snowNS();

} else if (ie4up) {

snowIE();

}

/script

/body

怎样使用html代码做下雪特效

记事本编写的html 然后IE预览-截屏-图像编辑软件-导出图片-右键设置为桌面。bactxxbactxx 的方法行！一切为了效果！

jquery实现天气预报麻烦吧html和css也带上

这是一款非常有意思的纯CSS3扁平风格天气预报卡片动画特效。该天气预报特效将各种天气制作为卡片形式，包括下雨，闪电，白天，夜间和下雪。卡片使用扁平化风格，并使用CSS3帧动画来制作各种动画效果。

制作方法

HTML结构

该特效的HTML结构采用无序列表的HTML结构，其中每一个li.card元素代表一种卡片。

ul class="card-list"

li class="card"

div class="card-color color-rain"

div class="rain"/div

/div

div class="card-info"

p63 ℉/p

plow of 61 ℉/p

/div

/li

......

/ul

复制代码

CSS样式

首先给卡片一些基本样式。

.card {

谁能给一个鼠标跟随下雪的效果啊...

FLASH 8.0

新建一个影片剪辑(也就是雪花),连接名称(mc)

主时间轴中第一帧输入以下代码:

onMouseMove = function(){

i = _root.getNextHighestDepth();//这是主场景的下一个最大可用深度

attachMovie("mc",i,i); //这里把变量i当成深度值又当成影片的新名称

with(_root[i]{ //指定对象i影片,引用时要这样写_root[i],不然就是引用深度了

_x=_root._xmouse+10-20*Math.random();//相对鼠标当前水平方向-10到10间的随机数

_y=_root._ymouse+10-20*Math.ramdom();//相对鼠标当前垂直方向-10到10间的随机数

_rotation=60*Math.ramdom();//旋转60随机

_xscale=_yscale=_alpha=20+80*Math.random();//缩放,透明在20到100这之间随机

}

_root[i].onEnterFrame = function(){

with(this){

_x+=_xscale/10;

_y+=_yscale/10;//向下移动的速度为缩放除以10

_alpha-=2;

if(_x550||_y400||_alpha0){ //如果雪花跑到舞台外面或看不见

this.removeMovieClip();//就删除影片

}

}

}

updateAfterEvent();//更新舞台,其实不更新也可以的, "追求完美" 让影片看出来比较流畅

}

html特效代码下雪的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html雪花飘落效果代码、html特效代码下雪的信息别忘了在本站进行查找喔。