動畫還是不夠流暢，感覺有所卡頓。
<!DOCTYPE?HTML>
<html?lang="en-US">
<head>
????<meta?charset="UTF-8">
????<title>CSS3?Full?Background?Slider?</title>
????<style?type="text/css">
????????/*?@importurl("http://www.w3cplus.com/demo/css3/base.css");
????????????@importurl("http://fonts.googleapis.com/css?family=Yesteryear");?*/
????????html,
????????body?{
????????????height:?100%;
????????????width:?100%;
????????????overflow-x:?hidden;
????????????overflow-y:?hidden;
????????}
????????/*設(shè)置背景圖片全屏顯示，并且居中*/
????????img.bg?{
????????????min-height:?100%;
????????????min-width:?1024px;
????????????width:?100%;
????????????position:?fixed;
????????????top:?0;
????????????left:?50%;
????????????z-index:?1;
????????????transform:?translateX(-50%);
????????????-webkit-transform:?translateX(-50%);
????????????-moz-transform:?translateX(-50%);
????????????-o-transform:?translateX(-50%);
????????????-ms-transform:?translateX(-50%);
????????}
????????/*設(shè)置背景圖片從左向右移入顯示的動畫效果*/
????????/*?Slide?Left?*/
????????@-webkit-keyframes?slideLeft?{
????????????0%?{
????????????????left:?-500px;
????????????}
????????????100%?{
????????????????right:?0;
????????????}
????????}
????????@-moz-keyframes?slideLeft?{
????????????0%?{
????????????????left:?-500px;
????????????}
????????????100%?{
????????????????right:?0;
????????????}
????????}
????????@-o-keyframes?slideLeft?{
????????????0%?{
????????????????left:?-500px;
????????????}
????????????100%?{
????????????????right:?0;
????????????}
????????}
????????@-ms-keyframes?slideLeft?{
????????????0%?{
????????????????left:?-500px;
????????????}
????????????100%?{
????????????????right:?0;
????????????}
????????}
????????@keyframes?slideLeft?{
????????????0%?{
????????????????left:?-500px;
????????????}
????????????100%?{
????????????????right:?0;
????????????}
????????}
????????/*設(shè)置背景圖像從底部向頂部移入的動畫效果*/
????????/*?Slide?Bottom?*/
????????@-webkit-keyframes?slideBottom?{
????????????0%?{
????????????????top:?90%;
????????????}
????????????100%?{
????????????????top:?0;
????????????}
????????}
????????@-moz-keyframes?slideBottom?{
????????????0%?{
????????????????top:?90%;
????????????}
????????????100%?{
????????????????top:?0;
????????????}
????????}
????????@-ms-keyframes?slideBottom?{
????????????0%?{
????????????????top:?90%;
????????????}
????????????100%?{
????????????????top:?0;
????????????}
????????}
????????@-o-keyframes?slideBottom?{
????????????0%?{
????????????????top:?90%;
????????????}
????????????100%?{
????????????????top:?0;
????????????}
????????}
????????@keyframes?slideBottom?{
????????????0%?{
????????????????top:?90%;
????????????}
????????????100%?{
????????????????top:?0;
????????????}
????????}
????????/*設(shè)置背景圖片由小到大放大動畫效果*/
????????/*?Zoom?In?*/
????????@-webkit-keyframes?zoomIn?{
????????????0%?{
????????????????-webkit-transform:?scale(0.1);
????????????}
????????????100%?{
????????????????left:?0;
????????????????-webkit-transform:?none;
????????????}
????????}
????????@-moz-keyframes?zoomIn?{
????????????0%?{
????????????????-moz-transform:?scale(0.1);
????????????}
????????????100%?{
????????????????left:?0;
????????????????-moz-transform:?none;
????????????}
????????}
????????@-ms-keyframes?zoomIn?{
????????????0%?{
????????????????-ms-transform:?scale(0.1);
????????????}
????????????100%?{
????????????????left:?0;
????????????????-ms-transform:?none;
????????????}
????????}
????????@-o-keyframes?zoomIn?{
????????????0%?{
????????????????-o-transform:?scale(0.1);
????????????}
????????????100%?{
????????????????left:?0;
????????????????-o-transform:?none;
????????????}
????????}
????????@keyframes?zoomIn?{
????????????0%?{
????????????????transform:?scale(0.1);
????????????}
????????????100%?{
????????????????left:?0;
????????????????transform:?none;
????????????}
????????}
????????/*設(shè)置背景圖像由大到小縮小動畫效果*/
????????/*?Zoom?Out?*/
????????@-webkit-keyframes?zoomOut?{
????????????0%?{
????????????????-webkit-transform:?scale(2);
????????????}
????????????100%?{
????????????????left:?0;
????????????????-webkit-transform:?none;
????????????}
????????}
????????@-moz-keyframes?zoomOut?{
????????????0%?{
????????????????-moz-transform:?scale(2);
????????????}
????????????100%?{
????????????????left:?0;
????????????????-moz-transform:?none;
????????????}
????????}
????????@-ms-keyframes?zoomOut?{
????????????0%?{
????????????????-ms-transform:?scale(2);
????????????}
????????????100%?{
????????????????left:?0;
????????????????-ms-transform:?none;
????????????}
????????}
????????@-o-keyframes?zoomOut?{
????????????0%?{
????????????????-o-transform:?scale(2);
????????????}
????????????100%?{
????????????????left:?0;
????????????????-o-transform:?none;
????????????}
????????}
????????@keyframes?zoomOut?{
????????????0%?{
????????????????transform:?scale(2);
????????????}
????????????100%?{
????????????????left:?0;
????????????????transform:?none;
????????????}
????????}
????????/*背景圖像旋轉(zhuǎn)出現(xiàn)動畫效果*/
????????/*?Rotate?*/
????????@-webkit-keyframes?rotate?{
????????????0%?{
????????????????-webkit-transform:?rotate(-360deg)?scale(0.1);
????????????}
????????????100%?{
????????????????left:?0;
????????????????-webkit-transform:?none;
????????????}
????????}
????????@-moz-keyframes?rotate?{
????????????0%?{
????????????????-moz-transform:?rotate(-360deg)?scale(0.1);
????????????}
????????????100%?{
????????????????left:?0;
????????????????-moz-transform:?none;
????????????}
????????}
????????@-ms-keyframes?rotate?{
????????????0%?{
????????????????-ms-transform:?rotate(-360deg)?scale(0.1);
????????????}
????????????100%?{
????????????????left:?0;
????????????????-ms-transform:?none;
????????????}
????????}
????????@-o-keyframes?rotate?{
????????????0%?{
????????????????-o-transform:?rotate(-360deg)?scale(0.1);
????????????}
????????????100%?{
????????????????left:?0;
????????????????-o-transform:?none;
????????????}
????????}
????????@keyframes?rotate?{
????????????0%?{
????????????????transform:?rotate(-360deg)?scale(0.1);
????????????}
????????????100%?{
????????????????left:?0;
????????????????transform:?none;
????????????}
????????}
????????/*設(shè)置背景圖像不顯示動畫效果*/
????????@-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:?75;
????????????}
????????????100%?{
????????????????z-index:?75;
????????????}
????????}
????????.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;
????????????box-sizing:?border-box;
????????????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(n)?::after?{
????????????content:?'';
????????????position:?absolute;
????????????width:?120px;
????????????height:?120px;
????????????border-radius:?50%;
????????????border:?3px?solid?#fff;
????????????left:?50%;
????????????top:?-50%;
????????????transform:?translateX(-50%);
????????}
????????.slider?li:nth-of-type(n)?::before?{
????????????content:?'';
????????????position:?absolute;
????????????width:?120px;
????????????height:?120px;
????????????border-radius:?50%;
????????????border:?3px?solid?#fff;
????????????left:?50%;
????????????top:?-50%;
????????????transform:?translateX(-50%);
????????????background-color:?#999;
????????????opacity:?0.4;
????????????z-index:?999;
????????}
????????.slider?li:nth-of-type(n):hover?::before?{
????????????opacity:?0;
????????}
????????.slider?li:nth-child(1)?::after?{
????????????background:?url(http://pic.netbian.com/uploads/allimg/190410/225841-155490832158f4.jpg)?no-repeat;
????????}
????????.slider?li:nth-child(2)?::after?{
????????????background:?url(http://pic.netbian.com/uploads/allimg/190824/212516-15666531161ade.jpg)?no-repeat;
????????}
????????.slider?li:nth-child(3)?::after?{
????????????background:?url(http://pic.netbian.com/uploads/allimg/210110/003338-161021001858ec.jpg)?no-repeat;
????????}
????????.slider?li:nth-child(4)?::after?{
????????????background:?url(http://pic.netbian.com/uploads/allimg/160628/211537-1467119737deb3.jpg)?no-repeat;
????????}
????????.slider?li:nth-child(5)?::after?{
????????????background:?url(http://pic.netbian.com/uploads/allimg/201228/234048-160917004816a8.jpg)?no-repeat;
????????}
????????.slider?li:nth-child(1)?{
????????????background-color:?aqua;
????????}
????????.slider?li:nth-child(2)?{
????????????background-color:?rgb(61,?141,?78);
????????}
????????.slider?li:nth-child(3)?{
????????????background-color:?rgb(128,?240,?202);
????????}
????????.slider?li:nth-child(4)?{
????????????background-color:?rgb(195,?218,?92);
????????}
????????.slider?li:nth-child(5)?{
????????????background-color:?rgb(141,?101,?179);
????????}
????????img#bg1:target?{
????????????animation:?slideLeft?3s;
????????????z-index:?100;
????????????animation-fill-mode:?forwards;
????????}
????????img#bg2:target?{
????????????animation:?slideBottom?3s;
????????????z-index:?100;
????????????animation-fill-mode:?forwards;
????????}
????????img#bg3:target?{
????????????animation:?zoomIn?3s;
????????????z-index:?100;
????????????animation-fill-mode:?forwards;
????????}
????????img#bg4:target?{
????????????animation:?zoomOut?3s;
????????????z-index:?100;
????????????animation-fill-mode:?forwards;
????????}
????????img#bg5:target?{
????????????animation:?rotate?3s;
????????????z-index:?100;
????????????animation-fill-mode:?forwards;
????????}
????????img:not(:target)?{
????????????animation:?notTarget?3s;
????????????/*?animation-fill-mode:?forwards;?*/
????????}
????</style>
</head>
<body>
????<div?class="slider">
????????<ul?class="clearfix">
????????????<li><a?href="#bg1">Hipster?Fashion?Haircut?</a></li>
????????????<li><a?href="#bg2">Cloud?Computing?Services</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?I?could?die</a></li>
????????</ul>
????</div>
????<img?src="http://pic.netbian.com/uploads/allimg/190410/225841-155490832158f4.jpg"?alt=""?class="bg?slideLeft"
????????id="bg1"?/>
????<img?src="http://pic.netbian.com/uploads/allimg/190824/212516-15666531161ade.jpg"?alt=""?class="bg?slideBottom"
????????id="bg2"?/>
????<img?src="http://pic.netbian.com/uploads/allimg/210110/003338-161021001858ec.jpg"?alt=""?class="bg?zoomIn"
????????id="bg3"?/>
????<img?src="http://pic.netbian.com/uploads/allimg/160628/211537-1467119737deb3.jpg"?alt=""?class="bg?zoomOut"
????????id="bg4"?/>
????<img?src="http://pic.netbian.com/uploads/allimg/201228/234048-160917004816a8.jpg"?alt=""?class="bg?rotate"
????????id="bg5"?/>
</body>
</html>
2021-03-15
???????????????
<!DOCTYPE?HTML><htmllang="en-US">????<head>????????<meta?charset="UTF-8">?????<title>CSS3?Full?Background?Slider?</title>????????<style?type="text/css">????????????@importurl("http://www.w3cplus.com/demo/css3/base.css");????????????@importurl("http://fonts.googleapis.com/css?family=Yesteryear");????????????html,body?{????????????height:?100%;????????????}????????????/*設(shè)置背景圖片全屏顯示，并且居中*/????????????img.bg?{????????????min-height:?100%;????????????min-width:?1024px;????????????width:?100%;????????????height:?auto?!important;????????????height:?100%;????????????position:?fixed;????????????top:?0;????????????left:?50%;????????????z-index:1;??????????????-webkit-transform:?translateX(-50%);??????????????-moz-transform:?translateX(-50%);??????????????-o-transform:?translateX(-50%);??????????????-ms-transform:?translateX(-50%);????????????}????????????/*設(shè)置背景圖片從左向右移入顯示的動畫效果*/????????????/*?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;?}????????????}????????????/*設(shè)置背景圖像從底部向頂部移入的動畫效果*/?????????????/*?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;?}????????????}????????????/*設(shè)置背景圖片由小到大放大動畫效果*/????????????/*?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;?}????????????}????????????/*設(shè)置背景圖像由大到小縮小動畫效果*/????????????/*?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;?}????????????}????????????/*背景圖像旋轉(zhuǎn)出現(xiàn)動畫效果*/????????????/*?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;?}????????????}????????????/*設(shè)置背景圖像不顯示動畫效果*/????????????@-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:?75;?}?????????????100%?{?z-index:?75;?}????????????}????????????????????????????????????????????????.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);????????????}????????????/*任務(wù)一、設(shè)置不同列表的背景色*/????????????寫入正確選擇器{????????????background-color:?#02646e;????????????}????????????寫入正確選擇器{????????????background-color:?#eb0837;????????????}????????????寫入正確選擇器{????????????background-color:?#67b374;????????????}????????????????寫入正確選擇器{????????????background-color:?#e6674a;????????????}????????????????寫入正確選擇器{????????????background-color:?#e61061;????????????}????????????/*任務(wù)二、設(shè)置縮略圖形狀*/????????????寫入正確選擇器{????????????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;????????????}????????????/*任務(wù)三、設(shè)置縮略圖背景圖像*/????????????寫入正確選擇器{????????????background:?url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg)?no-repeat?center;????????????}????????????寫入正確選擇器{????????????background:?url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg)?no-repeat?center;????????????}????????????寫入正確選擇器{????????????background:?url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg)?no-repeat?center;????????????}????????????寫入正確選擇器{????????????background:?url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg)?no-repeat?center;????????????}????????????寫入正確選擇器{????????????background:?url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.jpg)?no-repeat?center;????????????}????????????/*任務(wù)四、給縮略圖添加蒙板效果*/????????????寫入正確選擇器{????????????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);????????????}????????????/*任務(wù)五、鼠標(biāo)懸浮時(shí)，修改縮略圖蒙板透明度*/????????????寫入正確選擇器{????????????opacity:0;????????????}????????????/*任務(wù)六、點(diǎn)擊綜略圖，切換背景圖*/????????????/*背景圖從左向右出現(xiàn)*/????????????寫入正確選擇器{?????????????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;????????????}????????????/*背景圖從下向上出現(xiàn)*/????????????寫入正確選擇器{?????????????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;????????????}????????????/*背景圖由小到大出現(xiàn)*/????????????寫入正確選擇器{?????????????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;????????????}????????????????????????/*背景圖由大到小出現(xiàn)*/????????????寫入正確選擇器{?????????????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;????????????}????????????????????????/*背景圖旋轉(zhuǎn)出現(xiàn)*/????????????寫入正確選擇器{?????????????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;????????????}????????????/*任務(wù)七、設(shè)置不顯示的背景圖層級*/????????????/*?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?class="slider">????????????<ul?class="clearfix">?????????????<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>????????<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><!DOCTYPE?HTML><htmllang="en-US">????<head>????????<meta?charset="UTF-8">?????<title>CSS3?Full?Background?Slider?</title>????????<style?type="text/css">????????????@importurl("http://www.w3cplus.com/demo/css3/base.css");????????????@importurl("http://fonts.googleapis.com/css?family=Yesteryear");????????????html,body?{????????????height:?100%;????????????}????????????/*設(shè)置背景圖片全屏顯示，并且居中*/????????????img.bg?{????????????min-height:?100%;????????????min-width:?1024px;????????????width:?100%;????????????height:?auto?!important;????????????height:?100%;????????????position:?fixed;????????????top:?0;????????????left:?50%;????????????z-index:1;??????????????-webkit-transform:?translateX(-50%);??????????????-moz-transform:?translateX(-50%);??????????????-o-transform:?translateX(-50%);??????????????-ms-transform:?translateX(-50%);????????????}????????????/*設(shè)置背景圖片從左向右移入顯示的動畫效果*/????????????/*?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;?}????????????}????????????/*設(shè)置背景圖像從底部向頂部移入的動畫效果*/?????????????/*?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;?}????????????}????????????/*設(shè)置背景圖片由小到大放大動畫效果*/????????????/*?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;?}????????????}????????????/*設(shè)置背景圖像由大到小縮小動畫效果*/????????????/*?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;?}????????????}????????????/*背景圖像旋轉(zhuǎn)出現(xiàn)動畫效果*/????????????/*?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);?}