百度黑洞效果

百度黑洞没自己动手敲的时候，觉得这个效果很难，但当自己做出来的时候你会发现他也就那么一回事，所以当你在看到某一个效果的时候不要觉得自己做不出来，只有你动手去解决，去百度。去思考，这才是一名真正的程序员。好了，废话就到这，回归主题，先上效果图：

这里由于我没有安装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";
			}

一个方法代表一个步骤。个别效果完成的不尽人意，请见谅。