<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>css3改变背景图片图</title>
</head>
<style type="text/css">
@importurl("http://www.w3cplus.com/demo/css3/base.css");
@importurl("http://fonts.googleapis.com/css?family=Yesteryear");
*{padding: 0;margin: 0;}
.bgm{width: 1200px;height: 100%;margin:0 auto;position: fixed;z-index: -1;}
.al{width: 1200px;height: 100%;margin: 20px auto;overflow: hidden;}
.warp{position: absolute;width: 1200px;top:50px;height: 600px;z-index: 100;}
.warp ul li{list-style-type: none;width: 200px;height: 130px;float: left;margin: 200px 20px 100px;}
.warp ul li a{text-decoration: none;display: inline-block;width: 196px;height: 126px;border-radius: 5px;border:2px solid #fff;text-align: center;font-size: 18px;color: #fff;font-weight: bold;padding-top: 70px;position: relative;z-index: 100;}
.warp ul li a::after{
content: "";
display: inline-block;
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
z-index: 100;
border:5px solid #fff;
left:40px;
top:-60px;
}
.warp ul li:nth-of-type(1) a::after{
background: url(image/1.png) no-repeat center;
}
.warp ul li:nth-of-type(2) a::after{
background: url(image/2.jpg)center no-repeat;
}
.warp ul li:nth-of-type(3) a::after{
background: url(image/3.jpg)center no-repeat;
}
.warp ul li:nth-of-type(4) a::after{
background: url(image/4.jpg)center no-repeat;
}
.warp ul li:nth-of-type(5) a::after{
background: url(image/5.jpg)center no-repeat;
}
.warp ul li a::before{
content: "";
display: inline-block;
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
z-index: 101;
left:40px;
top:-60px;
border: 5px solid #fff;
background: rgba(0,0,0,0.3);
}
.warp ul li a:hover:before{
opacity: 0;
}
.warp ul li:nth-of-type(1) a{background: blue;}
.warp ul li:nth-of-type(2) a{background: orange;}
.warp ul li:nth-of-type(3) a{background: green;}
.warp ul li:nth-of-type(4) a{background: red;}
.warp ul li:nth-of-type(5) a{background: gray;}
@-webkit-keyframes 'scale'{
0%{-webkit-transform:scale(0.1);}
100%{-webkit-transform:none;}
}
@-webkit-keyframes 'bscale'{
0%{-webkit-transform:scale(2);}
100%{-webkit-transform:none;}
}
@-webkit-keyframes 'top'{
0%{top:-500px;}
100%{top:20px;}
}
@-webkit-keyframes 'bottom'{
0%{bottom: -500px;}
100%{bottom: 0;}
}
@-webkit-keyframes 'rotate'{
0%{-webkit-transform:rotate(-360deg) scale(0.1);}
100%{-webkit-transform:none;}
}
.bgm1:target{
z-index: 10;
-webkit-animation-name: scale;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
.bgm2:target{
z-index: 10;
-webkit-animation-name: bscale;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
.bgm3:target{
z-index: 10;
-webkit-animation-name: top;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
.bgm4:target{
z-index: 10;
-webkit-animation-name: bottom;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
.bgm5:target{
z-index: 10;
-webkit-animation-name: rotate;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
@-webkit-keyframes 'notTarget' {
0% { z-index: 7; }
100% { z-index: 7; }
}
.bgm:not(:target){
-webkit-animation-name: notTarget;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-name: notTarget;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-ms-animation-name: notTarget;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;
-o-animation-name: notTarget;
-o-animation-duration: 1s;
-o-animation-iteration-count: 1;
animation-name: notTarget;
animation-duration: 1s;
animation-iteration-count: 1;
}
</style>
<body>
<div class="al">
<div class="warp">
<ul class="wp">
<li><a href="#bg1" >Hipster Fashion Haircut</a></li>
<li><a href="#bg2" >Cloud Computing Services & Consulting</a></li>
<li><a href="#bg3" >My haire is sooo fantastic!</a></li>
<li><a href="#bg4" >Eat healthy & excersice!</a></li>
<li><a href="#bg5" >Lips so kissable I could die ...</a></li>
</ul>
</div>
<div class="foot">
<img src="image/bg1.jpg" alt="" class="bgm bgm1" id="bg1" />
<img src="image/bg2.jpg" alt="" class="bgm bgm2" id="bg2" />
<img src="image/bg3.jpg" alt="" class="bgm bgm3" id="bg3" />
<img src="image/bg4.jpg" alt="" class="bgm bgm4" id="bg4" />
<img src="image/bg5.jpg" alt="" class="bgm bgm5" id="bg5" />
</div>
</div>
</body>
</html>
