bug問題。火狐瀏覽器運行有兩個圖片不出現(xiàn)，搜狗瀏覽器就正常。另外背景色不全，只有一部分，還有邊框 未填滿？求助大神~~~
<!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%;
? ? ? ? ? ? }
? ? ? ? ? ? /*設置背景圖片全屏顯示，并且居中*/
? ? ? ? ? ? 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%);
? ? ? ? ? ? }
? ? ? ? ? ? /*設置背景圖片從左向右移入顯示的動畫效果*/
? ? ? ? ? ? /* 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; }
? ? ? ? ? ? }
? ? ? ? ? ? /*設置背景圖像從底部向頂部移入的動畫效果*/
? ? ? ? ? ? ?/* 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; }
? ? ? ? ? ? }
? ? ? ? ? ? /*設置背景圖片由小到大放大動畫效果*/
? ? ? ? ? ? /* 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; }
? ? ? ? ? ? }
? ? ? ? ? ? /*設置背景圖像由大到小縮小動畫效果*/
? ? ? ? ? ? /* 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; }
? ? ? ? ? ? }
? ? ? ? ? ? /*設置背景圖像不顯示動畫效果*/
? ? ? ? ? ? @-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);
? ? ? ? ? ? }
? ? ? ? ? ? /*任務一、設置不同列表的背景色*/
? ? ? ? ? ? .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;
? ? ? ? ? ? }
? ? ? ? ? ? /*任務二、設置縮略圖形狀*/
? ? ? ? ? ? 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;
? ? ? ? ? ? }
? ? ? ? ? ? /*任務三、設置縮略圖背景圖像*/
? ? ? ? ? ? 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;
? ? ? ? ? ? }
? ? ? ? ? ? /*任務四、給縮略圖添加蒙板效果*/
? ? ? ? ? ? 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);
? ? ? ? ? ? }
? ? ? ? ? ? /*任務五、鼠標懸浮時，修改縮略圖蒙板透明度*/
? ? ? ? ? ? ul>li>a:hover:before{
? ? ? ? ? ? opacity:0;
? ? ? ? ? ? }
? ? ? ? ? ? /*任務六、點擊綜略圖，切換背景圖*/
? ? ? ? ? ? /*背景圖從左向右出現(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;
? ? ? ? ? ? }
? ? ? ? ? ? /*任務七、設置不顯示的背景圖層級*/
? ? ? ? ? ? /* 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 & 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://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>
2019-01-15
圖片地址自己換下本地的
2019-03-06
<!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%;????????????}????????????/*設置背景圖片全屏顯示，并且居中*/????????????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%);????????????}????????????/*設置背景圖片從左向右移入顯示的動畫效果*/????????????/*?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;?}????????????}????????????/*設置背景圖像從底部向頂部移入的動畫效果*/?????????????/*?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;?}????????????}????????????/*設置背景圖片由小到大放大動畫效果*/????????????/*?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;?}????????????}????????????/*設置背景圖像由大到小縮小動畫效果*/????????????/*?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;?}????????????}????????????/*設置背景圖像不顯示動畫效果*/????????????@-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);????????????}????????????/*任務一、設置不同列表的背景色*/????????????.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;????????????}????????????/*任務二、設置縮略圖形狀*/????????????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;????????????}????????????/*任務三、設置縮略圖背景圖像*/????????????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;????????????}????????????/*任務四、給縮略圖添加蒙板效果*/????????????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);????????????}????????????/*任務五、鼠標懸浮時，修改縮略圖蒙板透明度*/????????????ul>li>a:hover:before{????????????opacity:0;????????????}????????????/*任務六、點擊綜略圖，切換背景圖*/????????????/*背景圖從左向右出現(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;????????????}????????????/*任務七、設置不顯示的背景圖層級*/????????????/*?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?&?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://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>2019-01-15
<!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?&?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="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>2019-01-15
網(wǎng)絡問題么？還是圖片地址錯誤。要有問題就都不顯示了。