亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

終于出來效果了，快來圍觀

<!DOCTYPE?HTML>
<html>
<head>
<meta?charset="UTF-8">
<title>CSS3?Full?Background?Slider?</title>
<style?type="text/css">
@import?url("http://www.w3cplus.com/demo/css3/base.css");
@import?url("http://fonts.googleapis.com/css?family=Yesteryear");
html,body?{
?height:?100%;
?
}
img.bg?{
?min-height:?100%;
?min-width:?1024px;
?width:?100%;
?height:?auto?!important;
?height:?100%;
?position:?fixed;
?top:?0;
?left:?0;
?z-index:1;
?
}
.slider?{
?position:?absolute;
?width:?100%;
?text-align:?center;
?z-index:?9999;
?bottom:?100px;
}
.slider?li?{
?display:?inline-block;
?width:?170px;
?height:?130px;
?margin-right:?15px;
}
.slider?a?{
?display:?inline-block;
?width:?170px;
?padding-top:?70px;
?padding-bottom:?20px;
?position:?relative;
?cursor:?pointer;
?border:?2px?solid?#fff;
?border-radius:?5px;
?vertical-align:?top;
?color:?#fff;
?text-decoration:?none;
?font-size:?22px;
?font-family:?'Yesteryear',?cursive;
?text-shadow:?-1px?-1px?1px?rgba(0,?0,?0,?0.8),-2px?-2px?1px?rgba(0,?0,?0,?0.3),-3px?-3px?1px?rgba(0,?0,?0,?0.3);
}
.slider?li:nth-of-type(1)?a?{
?background-color:?#02646e;
}
.slider?li:nth-of-type(2)?a?{
?background-color:?#eb0837;
}
.slider?li:nth-of-type(3)?a?{
?background-color:?#67b374;
}????
.slider?li:nth-of-type(4)?a?{
?background-color:?#e6674a;
}????
.slider?li:nth-of-type(5)?a?{
?background-color:?#e61061;
}
.slider?a::after?{
?content:"";
?display:?block;
?height:?120px;
?width:?120px;
?border:?5px?solid?#fff;
?border-radius:?50%;
?position:?absolute;
?left:?50%;
?margin-left:?-60px;
?z-index:?9999;
?top:?-80px;
}
.slider?li:nth-of-type(1)?a::after?{
?background:?url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg)?no-repeat?center;
}
.slider?li:nth-of-type(2)?a::after?{
?background:?url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg)?no-repeat?center;
}
.slider?li:nth-of-type(3)?a::after?{
?background:?url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg)?no-repeat?center;
}
.slider?li:nth-of-type(4)?a::after?{
?background:?url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg)?no-repeat?center;
}
.slider?li:nth-of-type(5)?a::after?{
?background:?url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.jpg)?no-repeat?center;
}
.slider?a::before?{
?content:"";
?display:?block;
?height:?120px;
?width:?120px;
?border:?5px?solid?#fff;
?border-radius:?50%;
?position:?absolute;
?left:?50%;
?margin-left:?-60px;
?z-index:?99999;
?top:?-80px;
?background:?rgba(0,0,0,0.3);
}
.slider?a:hover::before?{
?opacity:0;
}
/*?Slide?Left?*/
?
@-webkit-keyframes?slideLeft?{
0%?{?left:?-500px;?}
100%?{?left:?0;?}
}
@-moz-keyframes?slideLeft?{
0%?{?left:?-500px;?}
100%?{?left:?0;?}
}
@-o-keyframes?slideLeft?{
0%?{?left:?-500px;?}
100%?{?left:?0;?}
}
@-ms-keyframes?slideLeft?{
0%?{?left:?-500px;?}
100%?{?left:?0;?}
}
@keyframes?slideLeft?{
0%?{?left:?-500px;?}
100%?{?left:?0;?}
}
?
.slideLeft:target?{
z-index:?100;
-webkit-animation-name:?slideLeft;
-webkit-animation-duration:?1s;
-webkit-animation-iteration-count:?1;
-moz-animation-name:?slideLeft;
-moz-animation-duration:?1s;
-moz-animation-iteration-count:?1;
-ms-animation-name:?slideLeft;
-ms-animation-duration:?1s;
-ms-animation-iteration-count:?1;
-o-animation-name:?slideLeft;
-o-animation-duration:?1s;
-o-animation-iteration-count:?1;
animation-name:?slideLeft;
animation-duration:?1s;
animation-iteration-count:?1;
}
?
?
/*?Slide?Bottom?*/
?
@-webkit-keyframes?slideBottom?{
0%?{?top:?350px;?}
100%?{?top:?0;?}
}
@-moz-keyframes?slideBottom?{
0%?{?top:?350px;?}
100%?{?top:?0;?}
}
@-ms-keyframes?slideBottom?{
0%?{?top:?350px;?}
100%?{?top:?0;?}
}
@-o-keyframes?slideBottom?{
0%?{?top:?350px;?}
100%?{?top:?0;?}
}
@keyframes?slideBottom?{
0%?{?top:?350px;?}
100%?{?top:?0;?}
}
?
.slideBottom:target?{
z-index:?100;
?
-webkit-animation-name:?slideBottom;
-webkit-animation-duration:?1s;
-webkit-animation-iteration-count:?1;
-moz-animation-name:?slideBottom;
-moz-animation-duration:?1s;
-moz-animation-iteration-count:?1;
-ms-animation-name:?slideBottom;
-ms-animation-duration:?1s;
-ms-animation-iteration-count:?1;
-o-animation-name:?slideBottom;
-o-animation-duration:?1s;
-o-animation-iteration-count:?1;
?animation-name:?slideBottom;
animation-duration:?1s;
animation-iteration-count:?1;
}
?
/*?Zoom?In?*/
?
@-webkit-keyframes?zoomIn?{
0%?{?-webkit-transform:?scale(0.1);?}
100%?{?-webkit-transform:?none;?}
}
@-moz-keyframes?zoomIn?{
0%?{?-moz-transform:?scale(0.1);?}
100%?{?-moz-transform:?none;?}
}
@-ms-keyframes?zoomIn?{
0%?{?-ms-transform:?scale(0.1);?}
100%?{?-ms-transform:?none;?}
}
@-o-keyframes?zoomIn?{
0%?{?-o-transform:?scale(0.1);?}
100%?{?-o-transform:?none;?}
}
@keyframes?zoomIn?{
0%?{?transform:?scale(0.1);?}
100%?{?transform:?none;?}
}
.zoomIn:target?{
z-index:?100;
-webkit-animation-name:?zoomIn;
-webkit-animation-duration:?1s;
-webkit-animation-iteration-count:?1;
-moz-animation-name:?zoomIn;
-moz-animation-duration:?1s;
-moz-animation-iteration-count:?1;
-ms-animation-name:?zoomIn;
-ms-animation-duration:?1s;
-ms-animation-iteration-count:?1;
-o-animation-name:?zoomIn;
-o-animation-duration:?1s;
-o-animation-iteration-count:?1;
animation-name:?zoomIn;
animation-duration:?1s;
animation-iteration-count:?1;
}
?
/*?Zoom?Out?*/
?
@-webkit-keyframes?zoomOut?{
0%?{?-webkit-transform:?scale(2);?}
100%?{?-webkit-transform:?none;?}
}
@-moz-keyframes?zoomOut?{
0%?{?-moz-transform:?scale(2);?}
100%?{?-moz-transform:?none;?}
}
@-ms-keyframes?zoomOut?{
0%?{?-ms-transform:?scale(2);?}
100%?{?-ms-transform:?none;?}
}
@-o-keyframes?zoomOut?{
0%?{?-o-transform:?scale(2);?}
100%?{?-o-transform:?none;?}
}
@keyframes?zoomOut?{
0%?{?transform:?scale(2);?}
100%?{?transform:?none;?}
}
?
.zoomOut:target?{
z-index:?100;
-webkit-animation-name:?zoomOut;
-webkit-animation-duration:?1s;
-webkit-animation-iteration-count:?1;
-moz-animation-name:?zoomOut;
-moz-animation-duration:?1s;
-moz-animation-iteration-count:?1;
-ms-animation-name:?zoomOut;
-ms-animation-duration:?1s;
-ms-animation-iteration-count:?1;
-o-animation-name:?zoomOut;
-o-animation-duration:?1s;
-o-animation-iteration-count:?1;
animation-name:?zoomOut;
animation-duration:?1s;
animation-iteration-count:?1;
}
?
/*?Rotate?*/
?
@-webkit-keyframes?rotate?{
0%?{?-webkit-transform:?rotate(-360deg)?scale(0.1);?}
100%?{?-webkit-transform:?none;?}
}
@-moz-keyframes?rotate?{
0%?{?-moz-transform:?rotate(-360deg)?scale(0.1);?}
100%?{?-moz-transform:?none;?}
}
@-ms-keyframes?rotate?{
0%?{?-ms-transform:?rotate(-360deg)?scale(0.1);?}
100%?{?-ms-transform:?none;?}
}
@-o-keyframes?rotate?{
0%?{?-o-transform:?rotate(-360deg)?scale(0.1);?}
100%?{?-o-transform:?none;?}
}
@keyframes?rotate?{
0%?{?transform:?rotate(-360deg)?scale(0.1);?}
100%?{?transform:?none;?}
}
?
.rotate:target?{
z-index:?100;
-webkit-animation-name:?rotate;
-webkit-animation-duration:?1s;
-webkit-animation-iteration-count:?1;
-moz-animation-name:?rotate;
-moz-animation-duration:?1s;
-moz-animation-iteration-count:?1;
-ms-animation-name:?rotate;
-ms-animation-duration:?1s;
-ms-animation-iteration-count:?1;
-o-animation-name:?rotate;
-o-animation-duration:?1s;
-o-animation-iteration-count:?1;
animation-name:?rotate;
animation-duration:?1s;
animation-iteration-count:?1;
}
?
/*?Not?Target?*/
?
@-webkit-keyframes?notTarget?{
0%?{?z-index:?75;?}
100%?{?z-index:?75;?}
}
@-moz-keyframes?notTarget?{
0%?{?z-index:?75;?}
100%?{?z-index:?75;?}
}
@-ms-keyframes?notTarget?{
0%?{?z-index:?75;?}
100%?{?z-index:?75;?}
}
@-o-keyframes?notTarget?{
0%?{?z-index:?75;?}
100%?{?z-index:?75;?}
}
@keyframes?notTarget?{
0%?{?z-index:?100;?}
100%?{?z-index:?75;?}
}
?
.bg: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>
</head>
<body>
<div>
<ul>
<li><a?href="#bg1">Hipster?Fashion?Haircut?</a></li>
<li><a?href="#bg2">Cloud?Computing?Services?&amp;?Consulting</a></li>
<li><a?href="#bg3">My?haire?is?sooo?fantastic!</a></li>
<li><a?href="#bg4">Eat?healthy?&amp;?excersice!</a></li>
<li><a?href="#bg5">Lips?so?kissable?I?could?die?...</a></li>
</ul>
</div>
<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg1.jpg"?alt=""?class="bg?slideLeft"?id="bg1"?/>
<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg2.jpg"?alt=""?class="bg?slideBottom"?id="bg2"?/>
<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg3.jpg"?alt=""?class="bg?zoomIn"?id="bg3"?/>
<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg4.jpg"?alt=""?class="bg?zoomOut"?id="bg4"?/>
<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg5.jpg"?alt=""?class="bg?rotate"?id="bg5"?/>
</body>
</html>


正在回答

2 回答

小圖片都沒有類名，怎么實現的效果

0 回復 有任何疑惑可以回復我~

為你點個贊！

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
十天精通CSS3
  • 參與學習       243057    人
  • 解答問題       2677    個

本課程為CSS3入門教程，深刻詳解CSS3知識讓網頁穿上絢麗裝備

進入課程

終于出來效果了，快來圍觀

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號