百度黑洞没自己动手敲的时候,觉得这个效果很难,但当自己做出来的时候你会发现他也就那么一回事,所以当你在看到某一个效果的时候不要觉得自己做不出来,只有你动手去解决,去百度。去思考,这才是一名真正的程序员。好了,废话就到这,回归主题,先上效果图:
这里由于我没有安装PS 黑洞图拿不下来,所以先随便找了张图凑合下。
CSS:
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html,
body {
width: 100%;
height: 100%;
}
body {
overflow: hidden;
}
#box {
width: 100%;
height: 100%;
}
#black {
position: fixed;
width: 0px;
height: 0px;
left: 951px;
top: 408px;
position: relative;
animation: rotates 15s linear infinite;
}
@keyframes rotates {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#box ul li {
position: absolute;
z-index: 2;
list-style: none;
transition: all .28s ease-in .10s;
}
#box ul li:nth-child(1) {
left: 30px;
top: 500px;
width: 120px;
height: 90px;
}
#box ul li:nth-child(2) {
left: 30px;
top: 650px;
width: 120px;
height: 90px;
}
#box ul li:nth-child(3) {
left: 230px;
top: 650px;
width: 150px;
height: 90px;
}
#box ul li:nth-child(4) {
left: 30px;
top: 780px;
width: 120px;
height: 90px;
}
#box ul li:nth-child(5) {
left: 850px;
top: 165px;
width: 90px;
height: 90px;
}
#box ul li:nth-child(6) {
left: 960px;
top: 165px;
width: 90px;
height: 90px;
}
#box ul li:nth-child(7) {
left: 1070px;
top: 165px;
width: 90px;
height: 90px;
}
#box ul li:nth-child(8) {
left: 1180px;
top: 165px;
width: 90px;
height: 90px;
}
#box ul li img {
width: 100%;
height: 100%;
}
</style>
CSS中有一部分是用到C3,如果看不懂可以自己去搜索,百度。
HTML:
<div id="box">
<img src="img/black.jpg" id="black" />
<ul id="content">
<li>
<a href="#">
<img src="img/1.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="img/2.jpg" />
</a>
<li>
<a href="#">
<img src="img/3.jpg" />
</a>
<li>
<a href="#">
<img src="img/4.jpg" />
</a>
<li>
<a href="#">
<img src="img/5.jpg" />
</a>
<li>
<a href="#">
<img src="img/6.jpg" />
</a>
<li>
<a href="#">
<img src="img/7.jpg" />
</a>
<li>
<a href="#">
<img src="img/8.jpg" />
</a>
</li>
</ul>
</div>
JS:
var oBlack = document.getElementById("black")
var oUl=document.getElementById("content")
var oLi=oUl.getElementsByTagName("li")
console.log(oLi)
var cX = document.documentElement.clientWidth / 2;
var cY = document.documentElement.clientHeight / 2;
var j = cX
var k = cY
var timer
console.log(k)
var i = 0;
timer = setInterval(function() {
i += 4;
j-=2;
k-=2;
if(i == 500) {
clearInterval(timer)
enlarge(i, j, k)
inhalation(j,k)
}
move(i, j, k)
}, 6)
//旋转放大
function enlarge(i,j,k) {
setTimeout(function() {
timer = setInterval(function() {
i += 4;
j-=2;
k-=2;
if(i == 2000) {
clearInterval(timer)
sharik(i,j,k)
}
move(i, j, k)
}, 5)
}, 150)
}
//旋转收缩
function sharik(i,j,k){
timer = setInterval(function() {
i -= 8;
j+=4;
k+=4;
if(i == 2000) {
clearInterval(timer)
}
move(i, j, k)
}, 1)
}
//吸入效果
function inhalation(j,k){
console.log(j)
for (var i=0;i<oLi.length;i++) {
oLi[i].style.width = 0 + "px";
oLi[i].style.height = 0 + "px";
oLi[i].style.left=589+"px";
oLi[i].style.top=460+"px"
}
}
//inhalation()
//公共动画
function move(i, j, k) {
oBlack.style.width = i + "px";
oBlack.style.height = i + "px";
oBlack.style.left = j + "px";
oBlack.style.top = k + "px";
}
一个方法代表一个步骤。个别效果完成的不尽人意,请见谅。