急求这个网站花瓣飘落的css???

2023-03-04 07:21:01html-css017

急求这个网站花瓣飘落的css???,第1张

把这段加到你网页里面就可以了，不是CSS，是Javascript

花瓣变叉叉是因为下面语句中的图片地址失效或者你的电脑没有连接上网络

STAR[0] = "http://blog.com.cn/skin/lixia/236605054.gif"

.....

<!-- Begin

//

//

// Script arranged by Hisa (http://www.suisen.sakura.ne.jp/~ikitai/js/)

var no = 13// STAR number?@?P¡ë?¨C¨º?¨¦?o?¨¦¡ë?¡®??¨¬¨C??¡±

var speed = 10// smaller number moves the STAR faster

STAR = new Array()

STAR[0] = "http://blog.com.cn/skin/lixia/236605054.gif"

STAR[1] = "http://blog.com.cn/skin/lixia/236596767.gif"

STAR[2] = "http://blog.com.cn/skin/lixia/236597338.gif"

STAR[3] = "http://blog.com.cn/skin/lixia/236598420.gif"

STAR[4] = "http://blog.com.cn/skin/lixia/236599138.gif"

STAR[5] = "http://blog.com.cn/skin/lixia/236600240.gif"

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 = 1500, doc_height = 1800

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()

j = 0

for (i = 0i <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=\"15\" top=\"15\" visibility=\"show\"><img src=\"" + STAR[j] + "\" border=\"0\"></layer>")

} else {

document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\"" + STAR[j] + "\" border=\"0\"></layer>")

}

} else if (ie4up) {

if (i == 0) {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absoluteZ-INDEX: "+ i +" VISIBILITY: visibleTOP: 15pxLEFT: 15pxwidth:1\"><img src=\"" + STAR[j] + "\" border=\"0\"></div>")

} else {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absoluteZ-INDEX: "+ i +" VISIBILITY: visibleTOP: 15pxLEFT: 15pxwidth:1\"><img src=\"" + STAR[j] + "\" border=\"0\"></div>")

}

if (j == (STAR.length-1)) { j = 0} else { j += 1}

}

function STAR_NS() { // Netscape main animation function

for (i = 0i <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("STAR_NS()", speed)

}

function STAR_IE() { // IE main animation function

for (i = 0i <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("STAR_IE()", speed)

}

if (ns4up) {

STAR_NS()

} else if (ie4up) {

STAR_IE()

}

// End -->

</SCRIPT>

CSS选择器共有三种：标签选择器、ID选择器、类选择器。

【标签选择器】

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式，(在大环境中你可能出于不同的位置，但是不管怎么样，你总是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里都是这身衣服)比如，在style.css文件中对p标签样式的声明如下：

font-size:12px

background:#900

color:090

}

则页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色) ，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改

background属性就可以了，就这么容易！

【ID选择器】

ID选择器在某一个HTML页面中只能使用一次(当然也可以用好几次，不过就不符合 W3C标准了，那页面也就不是标准页面喽~，咱们的目的不就是为了做标准的页面么，所以建议大家不要在同一个html页面中多个标签拥有共同的ID)，就像在你所处的环境中，你只有一个ID(身份证)，不可能重复！相信大家也能看出来，ID选择器更具有针对性，如：先给某个HTML页面中的某个p标签起个ID，代码如下：

<p id="one">此处为p标签内的文字</p>

在CSS中定义ID为one的p标签的属性，就需要用到#，代码如下：

#one{

font-size:12px

background:#900

color:090

}

【类选择器】

这种选择器更容易理解了，就是使页面中的某些标签(可以是不同的标签)具有相同的样式，就像国庆中某个方阵中，肯定都是不同的人，却均穿红色衣服，手中高举花环，样式都是一样的，如果想让这一类人都有共同的样式，该怎么做呢~呵呵，和ID选择器的用法类似，只不过把id换做class，如下：

<p class="one">此处为p标签内的文字</p>

如果我还想让div标签也有相同的样式，怎么办呢？加上同样的class就可以了，如下

<div class="one">此处为p标签内的文字</div>

这样页面中凡是加上class="one"的标签，样式都是一样的喽~

CSS定义的时候和ID选择器差不多，只不过把#换成.，如下

.one{

font-size:12px

background:#900

color:090

}

补充:一个标签可以有多个类选择器的值，不同的值用空格分开，如：

<div class="one yellow leftStyle">此处为p标签内的文字</div>

这样我们可以将多个样式用到同一个标签中，当然也可以，ID和class一块用

<div id="div1" class="one yellow leftStyle">此处为p标签内的文字

</div>

背景颜色自己选[推荐][共1步]

====1、以下是这个效果的全部代码。[最好从一个空页面开始]

<html>

<head>

</head>

<body>

<!--

done = 0

step = 4

function anim(yp,yk)

{

if(document.layers) document.layers["napis"].top=yp

else document.all["napis"].style.top=yp

if(yp>yk) step = -4

if(yp<60) step = 4

setTimeout('anim('+(yp+step)+','+yk+')', 35)

}

function start()

{

if(done) return

done = 1

if(navigator.appName=="Netscape") {

document.napis.left=innerWidth/2 - 145

anim(60,innerHeight - 60)

}

else {

napis.style.left=11

anim(60,document.body.offsetHeight - 60)

}

//-->

</script>

<div id="napis"

style="position: absolutetop: -50

color: #000000font-family:宋体font-size:9pt">

</div><script language="JavaScript">

<!--

setTimeout('start()',10)

//-->

</script>

<!-- Begin

function initArray() {

for (var i = 0i <initArray.arguments.lengthi++) {

this[i] = initArray.arguments[i]

}

this.length = initArray.arguments.length

}

var colors = new initArray(

"#000000","#0000FF","#80FFFF","#80FF80","#FFFF00","#FF8000","#FF00FF","#FF0000"

)

delay = 100

link = 0

vlink = 0

function linkDance() {

link = (link+1)%colors.length

vlink = (vlink+1)%colors.length

document.linkColor = colors[link]

document.vlinkColor = colors[vlink]

setTimeout("linkDance()",delay)

}

linkDance()

// End -->

</script>

function colors(c1){

this.c1 = c1

}

a00 = new colors("FFFBD0")

a01 = new colors("FF0000")

a02 = new colors("FF8080")

a03 = new colors("FF8000")

a04 = new colors("FFFF00")

a05 = new colors("000080")

a06 = new colors("0000FF")

a07 = new colors("008000")

a08 = new colors("00FF00")

a09 = new colors("804000")

a10 = new colors("808000")

a11 = new colors("000000")

a12 = new colors("FFFFFF")

a13 = new colors("C0C0C0")

a14 = new colors("408080")

a15 = new colors("808080")

a16 = new colors("D2BF51")

a17 = new colors("44BBE8")

a18 = new colors("C97AB9")

a19 = new colors("A2C97A")

a20 = new colors("804000")

a21 = new colors("6AE6C4")

a22 = new colors("33A3D1")

a23 = new colors("6C9AEE")

function changebg(type){

scheme = type

document.bgColor = scheme.c1

timerID=setTimeout('document.bgColor = scheme.c2', document.selector.value * 10)

}

</script>

<p><input TYPE="button" onClick="changebg(a00)" style="background-color: rgb(255,251,208)"><input

TYPE="button" onClick="changebg(a01)" style="background-color: rgb(255,0,0)"><input

TYPE="button" onClick="changebg(a02)" style="background-color: rgb(255,128,128)"><input

TYPE="button" onClick="changebg(a03)" style="background-color: rgb(255,128,0)"><input

TYPE="button" onClick="changebg(a04)" style="background-color: rgb(255,255,0)"><input

TYPE="button" onClick="changebg(a05)" style="background-color: rgb(0,0,128)"><input

TYPE="button" onClick="changebg(a06)" style="background-color: rgb(0,0,255)"><input

TYPE="button" onClick="changebg(a07)" style="background-color: rgb(0,128,0)"><input

TYPE="button" onClick="changebg(a08)" style="background-color: rgb(0,255,0)"><input

TYPE="button" onClick="changebg(a09)" style="background-color: rgb(128,0,0)"><input

TYPE="button" onClick="changebg(a10)" style="background-color: rgb(128,128,0)"><input

TYPE="button" onClick="changebg(a11)" style="background-color: rgb(0,0,0)"><input

TYPE="button" onClick="changebg(a12)" style="background-color: rgb(255,255,255)"><input

TYPE="button" onClick="changebg(a13)" style="background-color: rgb(192,192,192)"><input

TYPE="button" onClick="changebg(a14)" style="background-color: rgb(64,128,128)"><input

TYPE="button" onClick="changebg(a15)" style="background-color: rgb(128,128,128)"><input

TYPE="button" onClick="changebg(a16)" style="background-color: rgb(210,191,81)"><input

TYPE="button" onClick="changebg(a17)" style="background-color: rgb(68,187,232)"><input

TYPE="button" onClick="changebg(a18)" style="background-color: rgb(201,122,185)"><input

TYPE="button" onClick="changebg(a19)" style="background-color: rgb(162,201,122)"><input

TYPE="button" onClick="changebg(a20)" style="background-color: rgb(106,230,196)"><input

TYPE="button" onClick="changebg(a21)" style="background-color: rgb(194,219,185)"><input

TYPE="button" onClick="changebg(a22)" style="background-color: rgb(51,163,209)"><input

TYPE="button" onClick="changebg(a23)" style="background-color: rgb(108,154,238)"></p>

</form>

</body>

</html>

不停变换的背景颜色[共1步]

====1、将以下代码加入HTML的<body></body>之间：

<!-- Hide from JavaScript-Impaired Browsers

var pos = 10

function initArray() {

this.length = initArray.arguments.length

for (var i = 0i <this.lengthi++) {

this[i] = initArray.arguments[i]

}

var col=new initArray("4b","5b","8b","8b")

col[0] = "yellow"

col[1] = "coral"

col[2] = "orange"

col[3] = "red"

col[4] = "greenyellow"

col[5] = "lime"

col[6] = "turquoise"

col[7] = "coral"

col[8] = "blueviolet"

col[9] = "violet"

function chgCol() {

pos++

if (pos<0||pos>9) {

pos = 0

}

document.bgColor = col[pos]

setTimeout("chgCol()",5000)

/* Change above set to every 10 seconds (1000 = 1 sec) If

you wish to speed it up, lower the number. To slow it

down, raise the number. */

}

var yourwords = "不断变化背景色彩"var buffer1=" "var buffer2=" "var message1=buffer1+yourwords+buffer2var dir = "left"var speed =150function pingpong(){if (dir == "left") { message2=message1.substring(2,message1.length)+" "window.status=message2setTimeout("pingpong()",speed)message1=message2if (message1.substring(0,1) == "*") dir="right"}else { message2=" "+message1.substring(0,message1.length-2)window.status=message2setTimeout("pingpong()",speed)message1=message2if (message1.substring(message1.length-1,message1.length) == "*") dir="left"}}// --></script>

检测浏览器类型并调用不同的背景音乐[修改MIDI文件名][共1步]

====1、将以下代码加入HTML的<body></body>之间：

<!-- Begin

var MSIE=navigator.userAgent.indexOf("MSIE")

var NETS=navigator.userAgent.indexOf("Netscape")

var OPER=navigator.userAgent.indexOf("Opera")

if((MSIE>-1) || (OPER>-1)) {

document.write("<BGSOUND SRC=sound.mid LOOP=INFINITE>")

} else {

document.write("<EMBED SRC=sound2.mid AUTOSTART=TRUE ")

document.write("HIDDEN=true VOLUME=100 LOOP=TRUE>")

}

// End -->

</SCRIPT>

滚动背景[特别推荐][共1步][IE专用]<先在页面中设置好背景图片然后再进行下一步>

====1、将以下代码加入HEML的<body></body>之间：

dim c,numgc

c=-100000

numgc=document.body.sourceIndex

sub SF

c=c+1

Document.all(numgc).style.BackgroundPosition= "0 " &c

id=SetTimeOut("SF",16,"VBScript")

end sub

</script>

永远居中的背景图片[推荐][共1步][修改图片名称]

====1、将以下代码加入HEML的<body></body>之间：

<!--

BODY {background-image: URL(图片名称.gif)

background-position: center

background-repeat: no-repeat

background-attachment: fixed}

-->

</STYLE>

随机显示的背景图片[想别人每次看你页面时背景都不一样吗？][共1步]

====1、将以下代码加入HTML的<head></head>之间：

bg = new Array(2)//设定图片数量，如果图片数为3，这个参数就设为2，依次类推

bg[0] = 'bg1.gif' //显示的图片路径，可用http://

bg[1] = 'bg2.gif'

bg[2] = 'bg3.gif'

index = Math.floor(Math.random() * bg.length)

document.write("<BODY BACKGROUND="+bg[index]+">")

</script>

跟随屏幕移动的图像[推荐]修改图片名称和文字即可][共2步]

====1、将以下代码加入到HEML的<head></head>之间：

#floater {

position: absolute

left: 500

top: 146

width: 125

visibility: visible

z-index: 10

}</style>

====2、将以下代码加入到HEML的<body></body>之间

<font color="#FF8040">图片下面的文字</font></p>

</div><script LANGUAGE="JavaScript">

self.onError=null

currentX = currentY = 0

whichIt = null

lastScrollX = 0lastScrollY = 0

NS = (document.layers) ? 1 : 0

IE = (document.all) ? 1: 0

function heartBeat() {

if(IE) { diffY = document.body.scrollTopdiffX = document.body.scrollLeft}

if(NS) { diffY = self.pageYOffsetdiffX = self.pageXOffset}

if(diffY != lastScrollY) {

percent = .1 * (diffY - lastScrollY)

if(percent >0) percent = Math.ceil(percent)

else percent = Math.floor(percent)

if(IE) document.all.floater.style.pixelTop += percent

if(NS) document.floater.top += percent

lastScrollY = lastScrollY + percent

}

if(diffX != lastScrollX) {

percent = .1 * (diffX - lastScrollX)

if(percent >0) percent = Math.ceil(percent)

else percent = Math.floor(percent)

if(IE) document.all.floater.style.pixelLeft += percent

if(NS) document.floater.left += percent

lastScrollX = lastScrollX + percent

}

function checkFocus(x,y) {

stalkerx = document.floater.pageX

stalkery = document.floater.pageY

stalkerwidth = document.floater.clip.width

stalkerheight = document.floater.clip.height

if( (x >stalkerx &&x <(stalkerx+stalkerwidth)) &&(y >stalkery &&y <(stalkery+stalkerheight))) return true

else return false

}

function grabIt(e) {

if(IE) {

whichIt = event.srcElement

while (whichIt.id.indexOf("floater") == -1) {

whichIt = whichIt.parentElement

if (whichIt == null) { return true}

}

whichIt.style.pixelLeft = whichIt.offsetLeft

whichIt.style.pixelTop = whichIt.offsetTop

currentX = (event.clientX + document.body.scrollLeft)

currentY = (event.clientY + document.body.scrollTop)

} else {

window.captureEvents(Event.MOUSEMOVE)

if(checkFocus (e.pageX,e.pageY)) {

whichIt = document.floater

StalkerTouchedX = e.pageX-document.floater.pageX

StalkerTouchedY = e.pageY-document.floater.pageY

}

return true

}

function moveIt(e) {

if (whichIt == null) { return false}

if(IE) {

newX = (event.clientX + document.body.scrollLeft)

newY = (event.clientY + document.body.scrollTop)

distanceX = (newX - currentX)distanceY = (newY - currentY)

currentX = newXcurrentY = newY

whichIt.style.pixelLeft += distanceX

whichIt.style.pixelTop += distanceY

if(whichIt.style.pixelTop <document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop

if(whichIt.style.pixelLeft <document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft

if(whichIt.style.pixelLeft >document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20

if(whichIt.style.pixelTop >document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5

event.returnValue = false

} else {

whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY)

if(whichIt.left <0+self.pageXOffset) whichIt.left = 0+self.pageXOffset

if(whichIt.top <0+self.pageYOffset) whichIt.top = 0+self.pageYOffset

if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17

if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17

return false

}

return false

}

function dropIt() {

whichIt = null

if(NS) window.releaseEvents (Event.MOUSEMOVE)

return true

}

if(NS) {

window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN)