使用了particles.js
particles.js可以从github网站下载到最新的源码，网址是 https://github.com/VincentGarreau/particles.js/
使用方法非常简单
第一步，在html中引入脚本文件 particles.min.js，这个文件在下载的压缩包里可以找到
<script src="particles.min.js"></script>第二步，在html中放入一个div容器，设置id为particles-js。这个一般放在所有网页元素的最后面就可以。
<div id="particles-js"></div><style type="text/css">
#particles-js {
position: absolute
top:0
width:100%
}
</style>
第三步，设置窗口样式
<style type="text/css">#particles-js {
z-index: -1
position: absolute
top: 0
width: 100%
background: #aaa
}</style>
第四步，脚本生成粒子效果，可以单独放在一个js文件里，也可以放在<script>标签里。无论如何，这段脚本要出现在div容器之后。
particlesJS("particles-js", { "particles": { "number": { "value": 380, "density": { "enable": true, "value_area": 800}
}, "color": { "value": "#ffffff"
}, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000"
}, "polygon": { "nb_sides": 5
}, "image": { "src": "img/github.svg", "width": 100, "height": 100
}
}, "opacity": { "value": 0.5, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false
}
}, "size": { "value": 3, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false
}
}, "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1
}, "move": { "enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200
}
}
}, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "grab"
}, "onclick": { "enable": true, "mode": "push"
}, "resize": true
}, "modes": { "grab": { "distance": 140, "line_linked": { "opacity": 1
}
}, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3
}, "repulse": { "distance": 200, "duration": 0.4
}, "push": { "particles_nb": 4
}, "remove": { "particles_nb": 2
}
}
}, "retina_detect": true})
这个肯定行！<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>css 菜单</title>
<style>
body{
background-color:#FFFFFF
}
#fbtn{
/*display:none*/
overflow:hidden
position:relative
width:115px
height:30px
border-style:solid
border-width:1px
border-color:#0e0eff
padding:1px
}
#fbtn_txt{
position:absolute
float:right
right:0px
width:250px
height:30px
}
#fbtn_txt div{
width:115px
height:30px
float:right
padding-top:11px
font-size:9px
font-family:small fonts
color:#800080
text-align:center
cursor:pointer
}
</style>
</head>
<body>
<div id=fbtn>
<div id=fbtn_txt>
<div>G1</div>
<div>good morning</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_txt>
<div>G2</div>
<div>good evening</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_txt>
<div>M1</div>
<div>my fhoujun </div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_txt>
<div>M2</div>
<div>mm mm i love u</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_txt>
<div>G1</div>
<div>good morning</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_txt>
<div>G2</div>
<div>good evening</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_txt>
<div>M1</div>
<div>my fhoujun</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_txt>
<div>M2</div>
<div>mm mm i love u</div>
</div>
</div>
<script>
var current=null
var t=null
for(var i=0i<fbtn.lengthi++){
fbtn[i].index=i
fbtn[i].style.display="block"
fbtn[i].onmouseover=function(){
if(!current){
current=this
domove(this.index)
}
else if(current!=this){
domove(current.index)
domove(this.index)
current=this
}
}
fbtn[i].onmouseout=function(){
if(event.toElement==this.parentElement&t==this){
domove(this.index)
current=null
}
}
}
function domove(i){
var o=fbtn[i].firstChild
var x=fbtn[i].firstChild.firstChild.offsetWidth
if(o.style.posRight<(-x)){
o.style.posRight=0
var t=o.removeChild(o.firstChild)
o.appendChild(t)
}
else{
o.style.posRight-=3
setTimeout('domove('+i+')',15)
}
}
</script>
</body>
</html>
网上搜网页漂浮特效，一大堆，实现原理也很简单<div style="width:100pxheight:100pxposition:fixedz-index:99left:0top:50%margin-top:-50px">内容</div>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）