第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

bug問(wèn)題。火狐瀏覽器運(yùn)行有兩個(gè)圖片不出現(xiàn)，搜狗瀏覽器就正常。另外背景色不全，只有一部分，還有邊框 未填滿？求助大神~~~

https://img1.sycdn.imooc.com//5c249023000114c210870417.jpg

<!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è)置背景圖片從左向右移入顯示的動(dòng)畫(huà)效果*/

? ? ? ? ? ? /* 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è)置背景圖像從底部向頂部移入的動(dòng)畫(huà)效果*/

? ? ? ? ? ? ?/* 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è)置背景圖片由小到大放大動(dòng)畫(huà)效果*/

? ? ? ? ? ? /* 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è)置背景圖像由大到小縮小動(dòng)畫(huà)效果*/

? ? ? ? ? ? /* 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)動(dòng)畫(huà)效果*/

? ? ? ? ? ? /* 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è)置背景圖像不顯示動(dòng)畫(huà)效果*/

? ? ? ? ? ? @-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è)置不同列表的背景色*/

? ? ? ? ? ? .clearfix li:nth-of-type(1){

? ? ? ? ? ? background-color: #02646e;

? ? ? ? ? ? }

? ? ? ? ? ? ul>li:nth-of-type(2){

? ? ? ? ? ? background-color: #eb0837;

? ? ? ? ? ? }

? ? ? ? ? ? ?ul>li:nth-of-type(3){

? ? ? ? ? ? background-color: #67b374;

? ? ? ? ? ? } ? ?

? ? ? ? ? ? ul>li:nth-of-type(4){

? ? ? ? ? ? background-color: #e6674a;

? ? ? ? ? ? } ? ?

? ? ? ? ? ? ul>li:nth-of-type(5){

? ? ? ? ? ? background-color: #e61061;

? ? ? ? ? ? }

? ? ? ? ? ? /*任務(wù)二、設(shè)置縮略圖形狀*/

? ? ? ? ? ? ul>li>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;

? ? ? ? ? ? }

? ? ? ? ? ? /*任務(wù)三、設(shè)置縮略圖背景圖像*/

? ? ? ? ? ? ul>li:nth-of-type(1) a::after{

? ? ? ? ? ? background: url(http://img.juimg.com/tuku/yulantu/110301/2195-11030123061450.jpg) no-repeat center;

? ? ? ? ? ? }

? ? ? ? ? ? ? ul>li:nth-of-type(2) a::after{

? ? ? ? ? ? background: url(http://b-ssl.duitang.com/uploads/item/201507/09/20150709171624_HrQLN.jpeg) no-repeat center;

? ? ? ? ? ? }

? ? ? ? ? ?ul>li:nth-of-type(3) a::after{

? ? ? ? ? ? background: url(http://img3.imgtn.bdimg.com/it/u=3002218312,2161851247&fm=27&gp=0.jpg) no-repeat center;

? ? ? ? ? ? }

? ? ? ? ? ? ?ul>li:nth-of-type(4) a::after{

? ? ? ? ? ? background: url(http://img2.imgtn.bdimg.com/it/u=606529233,2499150264&fm=27&gp=0.jpg) no-repeat center;

? ? ? ? ? ? }

? ? ? ? ? ? ?ul>li:nth-of-type(5) a::after{

? ? ? ? ? ? background: url(http://pic40.photophoto.cn/20160731/1155115676092331_b.jpg) no-repeat center;

? ? ? ? ? ? }

? ? ? ? ? ? /*任務(wù)四、給縮略圖添加蒙板效果*/

? ? ? ? ? ? ul>li>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);

? ? ? ? ? ? }

? ? ? ? ? ? /*任務(wù)五、鼠標(biāo)懸浮時(shí)，修改縮略圖蒙板透明度*/

? ? ? ? ? ? ul>li>a:hover:before{

? ? ? ? ? ? opacity:0;

? ? ? ? ? ? }

? ? ? ? ? ? /*任務(wù)六、點(diǎn)擊綜略圖，切換背景圖*/

? ? ? ? ? ? /*背景圖從左向右出現(xiàn)*/

? ? ? ? ? ? ?#bg1: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;

? ? ? ? ? ? }

? ? ? ? ? ? /*背景圖從下向上出現(xiàn)*/

? ? ? ? ? ? #bg2: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;

? ? ? ? ? ? }

? ? ? ? ? ? /*背景圖由小到大出現(xiàn)*/

? ? ? ? ? ? #bg3: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;

? ? ? ? ? ? }

? ? ? ? ? ??

? ? ? ? ? ? /*背景圖由大到小出現(xiàn)*/

? ? ? ? ? ? #bg4: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;

? ? ? ? ? ? }

? ? ? ? ? ??

? ? ? ? ? ? /*背景圖旋轉(zhuǎn)出現(xiàn)*/

? ? ? ? ? ? #bg5: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;

? ? ? ? ? ? }

? ? ? ? ? ? /*任務(wù)七、設(shè)置不顯示的背景圖層級(jí)*/

? ? ? ? ? ? /* Not Target */

? ? ? ? ? ??

? ? ? ? ? ? img: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 &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://img.juimg.com/tuku/yulantu/110301/2195-11030123061450.jpg" alt="" class="bg slideLeft" id="bg1" />

? ? ? ? <img src="http://b-ssl.duitang.com/uploads/item/201507/09/20150709171624_HrQLN.jpeg" alt="" class="bg slideBottom" id="bg2" />

? ? ? ? <img src="http://img3.imgtn.bdimg.com/it/u=3002218312,2161851247&fm=27&gp=0.jpg" alt="" class="bg zoomIn" id="bg3" />

? ? ? ? <img src="http://img2.imgtn.bdimg.com/it/u=606529233,2499150264&fm=27&gp=0.jpg" alt="" class="bg zoomOut" id="bg4" />

? ? ? ? <img src="http://pic40.photophoto.cn/20160731/1155115676092331_b.jpg" alt="" class="bg rotate" id="bg5" />

? ? </body>

</html>


正在回答

4 回答

圖片地址自己換下本地的

0 回復(fù) 有任何疑惑可以回復(fù)我~
#1

新手村上路 提問(wèn)者

謝謝，我去試試
2019-01-19 回復(fù) 有任何疑惑可以回復(fù)我~ 
<!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è)置背景圖片從左向右移入顯示的動(dòng)畫(huà)效果*/????????????/*?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è)置背景圖像從底部向頂部移入的動(dòng)畫(huà)效果*/?????????????/*?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è)置背景圖片由小到大放大動(dòng)畫(huà)效果*/????????????/*?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è)置背景圖像由大到小縮小動(dòng)畫(huà)效果*/????????????/*?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)動(dòng)畫(huà)效果*/????????????/*?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è)置背景圖像不顯示動(dòng)畫(huà)效果*/????????????@-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è)置不同列表的背景色*/????????????.clearfix?li:nth-of-type(1){????????????background-color:?#02646e;????????????}????????????ul>li:nth-of-type(2){????????????background-color:?#eb0837;????????????}?????????????ul>li:nth-of-type(3){????????????background-color:?#67b374;????????????}????????????????ul>li:nth-of-type(4){????????????background-color:?#e6674a;????????????}????????????????ul>li:nth-of-type(5){????????????background-color:?#e61061;????????????}????????????/*任務(wù)二、設(shè)置縮略圖形狀*/????????????ul>li>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;????????????}????????????/*任務(wù)三、設(shè)置縮略圖背景圖像*/????????????ul>li:nth-of-type(1)?a::after{????????????background:?url(http://img.juimg.com/tuku/yulantu/110301/2195-11030123061450.jpg)?no-repeat?center;????????????}??????????????ul>li:nth-of-type(2)?a::after{????????????background:?url(http://b-ssl.duitang.com/uploads/item/201507/09/20150709171624_HrQLN.jpeg)?no-repeat?center;????????????}???????????ul>li:nth-of-type(3)?a::after{????????????background:?url(http://img3.imgtn.bdimg.com/it/u=3002218312,2161851247&fm=27&gp=0.jpg)?no-repeat?center;????????????}?????????????ul>li:nth-of-type(4)?a::after{????????????background:?url(http://img2.imgtn.bdimg.com/it/u=606529233,2499150264&fm=27&gp=0.jpg)?no-repeat?center;????????????}?????????????ul>li:nth-of-type(5)?a::after{????????????background:?url(http://pic40.photophoto.cn/20160731/1155115676092331_b.jpg)?no-repeat?center;????????????}????????????/*任務(wù)四、給縮略圖添加蒙板效果*/????????????ul>li>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);????????????}????????????/*任務(wù)五、鼠標(biāo)懸浮時(shí)，修改縮略圖蒙板透明度*/????????????ul>li>a:hover:before{????????????opacity:0;????????????}????????????/*任務(wù)六、點(diǎn)擊綜略圖，切換背景圖*/????????????/*背景圖從左向右出現(xiàn)*/?????????????#bg1: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;????????????}????????????/*背景圖從下向上出現(xiàn)*/????????????#bg2: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;????????????}????????????/*背景圖由小到大出現(xiàn)*/????????????#bg3: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;????????????}????????????????????????/*背景圖由大到小出現(xiàn)*/????????????#bg4: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;????????????}????????????????????????/*背景圖旋轉(zhuǎn)出現(xiàn)*/????????????#bg5: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;????????????}????????????/*任務(wù)七、設(shè)置不顯示的背景圖層級(jí)*/????????????/*?Not?Target?*/????????????????????????img: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?&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://img.juimg.com/tuku/yulantu/110301/2195-11030123061450.jpg"?alt=""?class="bg?slideLeft"?id="bg1"?/>????????<img?src="http://b-ssl.duitang.com/uploads/item/201507/09/20150709171624_HrQLN.jpeg"?alt=""?class="bg?slideBottom"?id="bg2"?/>????????<img?src="http://img3.imgtn.bdimg.com/it/u=3002218312,2161851247&fm=27&gp=0.jpg"?alt=""?class="bg?zoomIn"?id="bg3"?/>????????<img?src="http://img2.imgtn.bdimg.com/it/u=606529233,2499150264&fm=27&gp=0.jpg"?alt=""?class="bg?zoomOut"?id="bg4"?/>????????<img?src="http://pic40.photophoto.cn/20160731/1155115676092331_b.jpg"?alt=""?class="bg?rotate"?id="bg5"?/>????</body></html>


0 回復(fù) 有任何疑惑可以回復(fù)我~ 
<!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:?50%;??z-index:1;??-webkit-transform:?translateX(-50%);??-moz-transform:?translateX(-50%);??-o-transform:?translateX(-50%);??-ms-transform:?translateX(-50%);}.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:?75;?}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?class="slider"><ul?class="clearfix"><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="bgslideLeft"?id="bg1"?/><img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg2.jpg"?alt=""?class="bgslideBottom"?id="bg2"?/><img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg3.jpg"?alt=""?class="bgzoomIn"?id="bg3"?/><img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg4.jpg"?alt=""?class="bgzoomOut"?id="bg4"?/><img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg5.jpg"?alt=""?class="bg?rotate"?id="bg5"?/></body></html>


0 回復(fù) 有任何疑惑可以回復(fù)我~

網(wǎng)絡(luò)問(wèn)題么？還是圖片地址錯(cuò)誤。要有問(wèn)題就都不顯示了。

0 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150
提交
取消

bug問(wèn)題?；鸷鼮g覽器運(yùn)行有兩個(gè)圖片不出現(xiàn)，搜狗瀏覽器就正常。另外背景色不全，只有一部分，還有邊框 未填滿？求助大神~~~

我要回答 關(guān)注問(wèn)題
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)