你們要的順滑過渡動畫，很多人覺得動畫過渡的很生硬，這里我修改了一下動畫部分，也替換了圖片資源解決了資源not found的問題，請參考使用吧

<!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: -100%; }

? ? ? ? ? ? ?100% { left: 50%; }

? ? ? ? ? ? }

? ? ? ? ? ? @-moz-keyframes 'slideLeft' {

? ? ? ? ? ? ?0% { left: -100%; }

? ? ? ? ? ? ?100% { left: 50%; }

? ? ? ? ? ? }

? ? ? ? ? ? @-o-keyframes 'slideLeft' {

? ? ? ? ? ? ?0% { left: -100%; }

? ? ? ? ? ? ?100% { left: 50%; }

? ? ? ? ? ? }

? ? ? ? ? ? @-ms-keyframes 'slideLeft' {

? ? ? ? ? ? ?0% { left: -100%; }

? ? ? ? ? ? ?100% { left: 50%; }

? ? ? ? ? ? }

? ? ? ? ? ? @keyframes 'slideLeft' {

? ? ? ? ? ? ?0% { left: -100%; }

? ? ? ? ? ? ?100% { left: 50%; }

? ? ? ? ? ? }

? ? ? ? ? ? /*設置背景圖像從底部向頂部移入的動畫效果*/

? ? ? ? ? ? ?/* 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: translateX(-50%); }

? ? ? ? ? ? }

? ? ? ? ? ? @-moz-keyframes 'zoomIn' {

? ? ? ? ? ? ?0% { -moz-transform: scale(0.1); }

? ? ? ? ? ? ?100% { -moz-transform: translateX(-50%); }

? ? ? ? ? ? }

? ? ? ? ? ? @-ms-keyframes 'zoomIn' {

? ? ? ? ? ? ?0% { -ms-transform: scale(0.1); }

? ? ? ? ? ? ?100% { -ms-transform: translateX(-50%); }

? ? ? ? ? ? }

? ? ? ? ? ? @-o-keyframes 'zoomIn' {

? ? ? ? ? ? ?0% { -o-transform: scale(0.1); }

? ? ? ? ? ? ?100% { -o-transform: translateX(-50%); }

? ? ? ? ? ? }

? ? ? ? ? ? @keyframes 'zoomIn' {

? ? ? ? ? ? ?0% { transform: scale(0.1); }

? ? ? ? ? ? ?100% { transform: translateX(-50%); }

? ? ? ? ? ? }

? ? ? ? ? ? /*設置背景圖像由大到小縮小動畫效果*/

? ? ? ? ? ? /* Zoom Out */

? ? ? ? ? ??

? ? ? ? ? ? @-webkit-keyframes 'zoomOut' {

? ? ? ? ? ? ?0% { -webkit-transform: scale(2); }

? ? ? ? ? ? ?100% { -webkit-transform: translateX(-50%); }

? ? ? ? ? ? }

? ? ? ? ? ? @-moz-keyframes 'zoomOut' {

? ? ? ? ? ? ?0% { -moz-transform: scale(2); }

? ? ? ? ? ? ?100% { -moz-transform: translateX(-50%); }

? ? ? ? ? ? }

? ? ? ? ? ? @-ms-keyframes 'zoomOut' {

? ? ? ? ? ? ?0% { -ms-transform: scale(2); }

? ? ? ? ? ? ?100% { -ms-transform: translateX(-50%); }

? ? ? ? ? ? }

? ? ? ? ? ? @-o-keyframes 'zoomOut' {

? ? ? ? ? ? ?0% { -o-transform: scale(2); }

? ? ? ? ? ? ?100% { -o-transform: translateX(-50%); }

? ? ? ? ? ? }

? ? ? ? ? ? @keyframes 'zoomOut' {

? ? ? ? ? ? ?0% { transform: scale(2); }

? ? ? ? ? ? ?100% { transform: translateX(-50%); }

? ? ? ? ? ? }

? ? ? ? ? ? /*背景圖像旋轉出現動畫效果*/

? ? ? ? ? ? /* Rotate */

? ? ? ? ? ??

? ? ? ? ? ? @-webkit-keyframes 'rotate' {

? ? ? ? ? ? ?0% { -webkit-transform: rotate(-360deg) scale(0.1); }

? ? ? ? ? ? ?100% { -webkit-transform: none; left:0; }

? ? ? ? ? ? }

? ? ? ? ? ? @-moz-keyframes 'rotate' {

? ? ? ? ? ? ?0% { -moz-transform: rotate(-360deg) scale(0.1); }

? ? ? ? ? ? ?100% { -moz-transform: none; left:0; }

? ? ? ? ? ? }

? ? ? ? ? ? @-ms-keyframes 'rotate' {

? ? ? ? ? ? ?0% { -ms-transform: rotate(-360deg) scale(0.1); }

? ? ? ? ? ? ?100% { -ms-transform: none; left:0; }

? ? ? ? ? ? }

? ? ? ? ? ? @-o-keyframes 'rotate' {

? ? ? ? ? ? ?0% { -o-transform: rotate(-360deg) scale(0.1); }

? ? ? ? ? ? ?100% { -o-transform: none; left:0; }

? ? ? ? ? ? }

? ? ? ? ? ? @keyframes 'rotate' {

? ? ? ? ? ? ?0% { transform: rotate(-360deg) scale(0.1); }

? ? ? ? ? ? ?100% { transform: none; left:0; }

? ? ? ? ? ? }

? ? ? ? ? ? /*設置背景圖像不顯示動畫效果*/

? ? ? ? ? ? @-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);

? ? ? ? ? ? }

? ? ? ? ? ? /*任務一、設置不同列表的背景色*/

? ? ? ? ? ? .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 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;

? ? ? ? ? ? }

? ? ? ? ? ? /*任務三、設置縮略圖背景圖像*/

? ? ? ? ? ? .slider li:nth-of-type(1) a:after{

? ? ? ? ? ?background: url(https://c-ssl.duitang.com/uploads/item/201603/11/20160311104517_3c4ra.thumb.700_0.jpeg) no-repeat center;

? ? ? ? ? ?}

? ? ? ? ? ?.slider li:nth-of-type(2) a:after{

? ? ? ? ? ?background: url(https://c-ssl.duitang.com/uploads/item/201506/02/20150602171112_MjVQx.thumb.1900_0.jpeg) no-repeat center;

? ? ? ? ? ?}

? ? ? ? ? ?.slider li:nth-of-type(3) a:after{

? ? ? ? ? ?background: url(https://c-ssl.duitang.com/uploads/item/201710/28/20171028163817_KJGH8.jpeg) no-repeat center;

? ? ? ? ? ?}

? ? ? ? ? ?.slider li:nth-of-type(4) a:after{

? ? ? ? ? ?background: url(https://b-ssl.duitang.com/uploads/item/201903/16/20190316104400_ui3SK.jpeg) no-repeat center;

? ? ? ? ? ?}

? ? ? ? ? ?.slider li:nth-of-type(5) a:after{

? ? ? ? ? ?background: url(https://c-ssl.duitang.com/uploads/item/201406/12/20140612202753_u4nG5.thumb.1900_0.jpeg) no-repeat center;

? ? ? ? ? ?}

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

? ? ? ? ? ? .slider 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);

? ? ? ? ? ? }

? ? ? ? ? ? /*任務五、鼠標懸浮時，修改縮略圖蒙板透明度*/

? ? ? ? ? ? .slider li a:hover:before {

? ? ? ? ? ? opacity:0;

? ? ? ? ? ? }

? ? ? ? ? ? /*任務六、點擊縮略圖，切換背景圖*/

? ? ? ? ? ? /*背景圖從左向右出現*/

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

? ? ? ? ? ? }

? ? ? ? ? ? /*背景圖從下向上出現*/

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

? ? ? ? ? ? }

? ? ? ? ? ? /*背景圖由小到大出現*/

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

? ? ? ? ? ? }

? ? ? ? ? ??

? ? ? ? ? ? /*背景圖由大到小出現*/

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

? ? ? ? ? ? }

? ? ? ? ? ??

? ? ? ? ? ? /*背景圖旋轉出現*/

? ? ? ? ? ? #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="https://c-ssl.duitang.com/uploads/item/201603/11/20160311104517_3c4ra.thumb.700_0.jpeg" alt="" class="bg slideLeft" id="bg1" />

? ? ? ? <img src="https://c-ssl.duitang.com/uploads/item/201506/02/20150602171112_MjVQx.thumb.1900_0.jpeg" alt="" class="bg slideBottom" id="bg2" />

? ? ? ? <img src="https://c-ssl.duitang.com/uploads/item/201710/28/20171028163817_KJGH8.jpeg" alt="" class="bg zoomIn" id="bg3" />

? ? ? ? <img src="https://b-ssl.duitang.com/uploads/item/201903/16/20190316104400_ui3SK.jpeg" alt="" class="bg zoomOut" id="bg4" />

? ? ? ? <img src="https://c-ssl.duitang.com/uploads/item/201406/12/20140612202753_u4nG5.thumb.1900_0.jpeg" alt="" class="bg rotate" id="bg5" />

? ? </body>

</html>

慕數據7136769

2019-09-05

源自：十天精通CSS3 7-8

關注問題我要回答

2106

操作

收起

2 回答

慕數據7136769 提問者
2019-09-05

<!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:?-100%;?}?????????????
????????????100%?{?left:?50%;?}????????????
????????}????????????
????????@-moz-keyframes?'slideLeft'?{?????????????
????????????0%?{?left:?-100%;?}?????????????
????????????100%?{?left:?50%;?}????????????
????????}????????????
????????@-o-keyframes?'slideLeft'?{?????????????
????????????0%?{?left:?-100%;?}?????????????
????????????100%?{?left:?50%;?}????????????
????????}????????????
????????@-ms-keyframes?'slideLeft'?{?????????????
????????????0%?{?left:?-100%;?}?????????????
????????????100%?{?left:?50%;?}????????????
????????}????????????
????????@keyframes?'slideLeft'?{?????????????
????????????0%?{?left:?-100%;?}?????????????
????????????100%?{?left:?50%;?}????????????
????????}????????????
????????/*設置背景圖像從底部向頂部移入的動畫效果*/?????????????
????????/*?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:?translateX(-50%);?}????????????
????????}????????????
????????@-moz-keyframes?'zoomIn'?{?????????????
????????????0%?{?-moz-transform:?scale(0.1);?}?????????????
????????????100%?{?-moz-transform:?translateX(-50%);?}????????????
????????}????????????
????????@-ms-keyframes?'zoomIn'?{?????????????
????????????0%?{?-ms-transform:?scale(0.1);?}?????????????
????????????100%?{?-ms-transform:?translateX(-50%);?}????????????
????????}????????????
????????@-o-keyframes?'zoomIn'?{?????????????
????????????0%?{?-o-transform:?scale(0.1);?}?????????????
????????????100%?{?-o-transform:?translateX(-50%);?}????????????
????????}????????????
????????@keyframes?'zoomIn'?{?????????????
????????????0%?{?transform:?scale(0.1);?}?????????????
????????????100%?{?transform:?translateX(-50%);?}????????????
????????}????????????
????????/*設置背景圖像由大到小縮小動畫效果*/????????????
????????/*?Zoom?Out?*/????????????????????????
????????@-webkit-keyframes?'zoomOut'?{?????????????
????????????0%?{?-webkit-transform:?scale(2);?}?????????????
????????????100%?{?-webkit-transform:?translateX(-50%);?}????????????
????????}????????????
????????@-moz-keyframes?'zoomOut'?{?????????????
????????????0%?{?-moz-transform:?scale(2);?}?????????????
????????????100%?{?-moz-transform:?translateX(-50%);?}????????????
????????}????????????
????????@-ms-keyframes?'zoomOut'?{?????????????
????????????0%?{?-ms-transform:?scale(2);?}?????????????
????????????100%?{?-ms-transform:?translateX(-50%);?}????????????
????????}????????????
????????@-o-keyframes?'zoomOut'?{?????????????
????????????0%?{?-o-transform:?scale(2);?}?????????????
????????????100%?{?-o-transform:?translateX(-50%);?}????????????
????????}????????????
????????@keyframes?'zoomOut'?{?????????????
????????????0%?{?transform:?scale(2);?}?????????????
????????????100%?{?transform:?translateX(-50%);?}????????????
????????}????????????
????????/*背景圖像旋轉出現動畫效果*/????????????
????????/*?Rotate?*/????????????????????????
????????@-webkit-keyframes?'rotate'?{?????????????
????????????0%?{?-webkit-transform:?rotate(-360deg)?scale(0.1);?}?????????????
????????????100%?{?-webkit-transform:?none;?left:0;?}????????????
????????}????????????
????????@-moz-keyframes?'rotate'?{?????????????
????????????0%?{?-moz-transform:?rotate(-360deg)?scale(0.1);?}?????????????
????????????100%?{?-moz-transform:?none;?left:0;?}????????????
????????}????????????
????????@-ms-keyframes?'rotate'?{?????????????
????????????0%?{?-ms-transform:?rotate(-360deg)?scale(0.1);?}?????????????
????????????100%?{?-ms-transform:?none;?left:0;?}????????????
????????}????????????
????????@-o-keyframes?'rotate'?{?????????????
????????????0%?{?-o-transform:?rotate(-360deg)?scale(0.1);?}?????????????
????????????100%?{?-o-transform:?none;?left:0;?}????????????
????????}????????????
????????@keyframes?'rotate'?{?????????????
????????????0%?{?transform:?rotate(-360deg)?scale(0.1);?}?????????????
????????????100%?{?transform:?none;?left:0;?}????????????
????????}????????????
????????/*設置背景圖像不顯示動畫效果*/????????????
????????@-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);????????????
????????}????????????
????????/*任務一、設置不同列表的背景色*/????????????
????????.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?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;????????????
????????}????????????
????????/*任務三、設置縮略圖背景圖像*/????????????
????????.slider?li:nth-of-type(1)?a:after{???????????
????????????background:?url(https://c-ssl.duitang.com/uploads/item/201603/11/20160311104517_3c4ra.thumb.700_0.jpeg)?no-repeat?center;???????????
????????}???????????
????????.slider?li:nth-of-type(2)?a:after{???????????
????????????background:?url(https://c-ssl.duitang.com/uploads/item/201506/02/20150602171112_MjVQx.thumb.1900_0.jpeg)?no-repeat?center;???????????
????????}???????????
????????.slider?li:nth-of-type(3)?a:after{???????????
????????????background:?url(https://c-ssl.duitang.com/uploads/item/201710/28/20171028163817_KJGH8.jpeg)?no-repeat?center;???????????
????????}???????????
????????.slider?li:nth-of-type(4)?a:after{???????????
????????????background:?url(https://b-ssl.duitang.com/uploads/item/201903/16/20190316104400_ui3SK.jpeg)?no-repeat?center;???????????
????????}???????????
????????.slider?li:nth-of-type(5)?a:after{???????????
????????????background:?url(https://c-ssl.duitang.com/uploads/item/201406/12/20140612202753_u4nG5.thumb.1900_0.jpeg)?no-repeat?center;???????????
????????}????????????
????????/*任務四、給縮略圖添加蒙板效果*/????????????
????????.slider?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);????????????
????????}????????????
????????/*任務五、鼠標懸浮時，修改縮略圖蒙板透明度*/????????????
????????.slider?li?a:hover:before?{????????????
????????????opacity:0;????????????
????????}????????????
????????/*任務六、點擊縮略圖，切換背景圖*/????????????
????????/*背景圖從左向右出現*/????????????
????????#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;????????????
????????}????????????
????????/*背景圖從下向上出現*/????????????
????????#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;????????????
????????}????????????
????????/*背景圖由小到大出現*/????????????
????????#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;????????????
????????}????????????????????????
????????/*背景圖由大到小出現*/????????????
????????#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;????????????
????????}????????????????????????
????????/*背景圖旋轉出現*/????????????
????????#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?&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="https://c-ssl.duitang.com/uploads/item/201603/11/20160311104517_3c4ra.thumb.700_0.jpeg"?alt=""?class="bg?slideLeft"?id="bg1"?/>????????
????<img?src="https://c-ssl.duitang.com/uploads/item/201506/02/20150602171112_MjVQx.thumb.1900_0.jpeg"?alt=""?class="bg?slideBottom"?id="bg2"?/>????????
????<img?src="https://c-ssl.duitang.com/uploads/item/201710/28/20171028163817_KJGH8.jpeg"?alt=""?class="bg?zoomIn"?id="bg3"?/>????????
????<img?src="https://b-ssl.duitang.com/uploads/item/201903/16/20190316104400_ui3SK.jpeg"?alt=""?class="bg?zoomOut"?id="bg4"?/>????????
????<img?src="https://c-ssl.duitang.com/uploads/item/201406/12/20140612202753_u4nG5.thumb.1900_0.jpeg"?alt=""?class="bg?rotate"?id="bg5"?/>????
</body>
</html>

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

收起回答

慕數據7136769 提問者
2019-09-05

<!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:?-100%;?}?????????????100%?{?left:?50%;?}????????????}????????????@-moz-keyframes?'slideLeft'?{?????????????0%?{?left:?-100%;?}?????????????100%?{?left:?50%;?}????????????}????????????@-o-keyframes?'slideLeft'?{?????????????0%?{?left:?-100%;?}?????????????100%?{?left:?50%;?}????????????}????????????@-ms-keyframes?'slideLeft'?{?????????????0%?{?left:?-100%;?}?????????????100%?{?left:?50%;?}????????????}????????????@keyframes?'slideLeft'?{?????????????0%?{?left:?-100%;?}?????????????100%?{?left:?50%;?}????????????}????????????/*設置背景圖像從底部向頂部移入的動畫效果*/?????????????/*?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:?translateX(-50%);?}????????????}????????????@-moz-keyframes?'zoomIn'?{?????????????0%?{?-moz-transform:?scale(0.1);?}?????????????100%?{?-moz-transform:?translateX(-50%);?}????????????}????????????@-ms-keyframes?'zoomIn'?{?????????????0%?{?-ms-transform:?scale(0.1);?}?????????????100%?{?-ms-transform:?translateX(-50%);?}????????????}????????????@-o-keyframes?'zoomIn'?{?????????????0%?{?-o-transform:?scale(0.1);?}?????????????100%?{?-o-transform:?translateX(-50%);?}????????????}????????????@keyframes?'zoomIn'?{?????????????0%?{?transform:?scale(0.1);?}?????????????100%?{?transform:?translateX(-50%);?}????????????}????????????/*設置背景圖像由大到小縮小動畫效果*/????????????/*?Zoom?Out?*/????????????????????????@-webkit-keyframes?'zoomOut'?{?????????????0%?{?-webkit-transform:?scale(2);?}?????????????100%?{?-webkit-transform:?translateX(-50%);?}????????????}????????????@-moz-keyframes?'zoomOut'?{?????????????0%?{?-moz-transform:?scale(2);?}?????????????100%?{?-moz-transform:?translateX(-50%);?}????????????}????????????@-ms-keyframes?'zoomOut'?{?????????????0%?{?-ms-transform:?scale(2);?}?????????????100%?{?-ms-transform:?translateX(-50%);?}????????????}????????????@-o-keyframes?'zoomOut'?{?????????????0%?{?-o-transform:?scale(2);?}?????????????100%?{?-o-transform:?translateX(-50%);?}????????????}????????????@keyframes?'zoomOut'?{?????????????0%?{?transform:?scale(2);?}?????????????100%?{?transform:?translateX(-50%);?}????????????}????????????/*背景圖像旋轉出現動畫效果*/????????????/*?Rotate?*/????????????????????????@-webkit-keyframes?'rotate'?{?????????????0%?{?-webkit-transform:?rotate(-360deg)?scale(0.1);?}?????????????100%?{?-webkit-transform:?none;?left:0;?}????????????}????????????@-moz-keyframes?'rotate'?{?????????????0%?{?-moz-transform:?rotate(-360deg)?scale(0.1);?}?????????????100%?{?-moz-transform:?none;?left:0;?}????????????}????????????@-ms-keyframes?'rotate'?{?????????????0%?{?-ms-transform:?rotate(-360deg)?scale(0.1);?}?????????????100%?{?-ms-transform:?none;?left:0;?}????????????}????????????@-o-keyframes?'rotate'?{?????????????0%?{?-o-transform:?rotate(-360deg)?scale(0.1);?}?????????????100%?{?-o-transform:?none;?left:0;?}????????????}????????????@keyframes?'rotate'?{?????????????0%?{?transform:?rotate(-360deg)?scale(0.1);?}?????????????100%?{?transform:?none;?left:0;?}????????????}????????????/*設置背景圖像不顯示動畫效果*/????????????@-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);????????????}????????????/*任務一、設置不同列表的背景色*/????????????.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?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;????????????}????????????/*任務三、設置縮略圖背景圖像*/????????????.slider?li:nth-of-type(1)?a:after{???????????background:?url(https://c-ssl.duitang.com/uploads/item/201603/11/20160311104517_3c4ra.thumb.700_0.jpeg)?no-repeat?center;???????????}???????????.slider?li:nth-of-type(2)?a:after{???????????background:?url(https://c-ssl.duitang.com/uploads/item/201506/02/20150602171112_MjVQx.thumb.1900_0.jpeg)?no-repeat?center;???????????}???????????.slider?li:nth-of-type(3)?a:after{???????????background:?url(https://c-ssl.duitang.com/uploads/item/201710/28/20171028163817_KJGH8.jpeg)?no-repeat?center;???????????}???????????.slider?li:nth-of-type(4)?a:after{???????????background:?url(https://b-ssl.duitang.com/uploads/item/201903/16/20190316104400_ui3SK.jpeg)?no-repeat?center;???????????}???????????.slider?li:nth-of-type(5)?a:after{???????????background:?url(https://c-ssl.duitang.com/uploads/item/201406/12/20140612202753_u4nG5.thumb.1900_0.jpeg)?no-repeat?center;???????????}????????????/*任務四、給縮略圖添加蒙板效果*/????????????.slider?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);????????????}????????????/*任務五、鼠標懸浮時，修改縮略圖蒙板透明度*/????????????.slider?li?a:hover:before?{????????????opacity:0;????????????}????????????/*任務六、點擊縮略圖，切換背景圖*/????????????/*背景圖從左向右出現*/????????????#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;????????????}????????????/*背景圖從下向上出現*/????????????#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;????????????}????????????/*背景圖由小到大出現*/????????????#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;????????????}????????????????????????/*背景圖由大到小出現*/????????????#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;????????????}????????????????????????/*背景圖旋轉出現*/????????????#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?&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="https://c-ssl.duitang.com/uploads/item/201603/11/20160311104517_3c4ra.thumb.700_0.jpeg"?alt=""?class="bg?slideLeft"?id="bg1"?/>????????<img?src="https://c-ssl.duitang.com/uploads/item/201506/02/20150602171112_MjVQx.thumb.1900_0.jpeg"?alt=""?class="bg?slideBottom"?id="bg2"?/>????????<img?src="https://c-ssl.duitang.com/uploads/item/201710/28/20171028163817_KJGH8.jpeg"?alt=""?class="bg?zoomIn"?id="bg3"?/>????????<img?src="https://b-ssl.duitang.com/uploads/item/201903/16/20190316104400_ui3SK.jpeg"?alt=""?class="bg?zoomOut"?id="bg4"?/>????????<img?src="https://c-ssl.duitang.com/uploads/item/201406/12/20140612202753_u4nG5.thumb.1900_0.jpeg"?alt=""?class="bg?rotate"?id="bg5"?/>????</body></html>

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

收起回答

舉報

0/150

提交

取消

十天精通CSS3

參與學習 243099 人
解答問題 2677 個

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

進入課程

本課相似問答

1 回答動畫--過渡屬性 transition-property

1 回答CSS3中的動畫--過渡所需時間 transition-duration

1 回答圖片如何對應動畫？

3 回答動畫出現一半的問題

2 回答動畫的形狀

搜索更多本課相關問答

你們要的順滑過渡動畫，很多人覺得動畫過渡的很生硬，這里我修改了一下動畫部分，也替換了圖片資源解決了資源not found的問題，請參考使用吧

我要回答關注問題

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

熱搜

最近搜索清空

你們要的順滑過渡動畫，很多人覺得動畫過渡的很生硬，這里我修改了一下動畫部分，也替換了圖片資源解決了資源not found的問題，請參考使用吧

2 回答

本課相似問答

你們要的順滑過渡動畫，很多人覺得動畫過渡的很生硬，這里我修改了一下動畫部分，也替換了圖片資源解決了資源not found的問題，請參考使用吧

你們要的順滑過渡動畫，很多人覺得動畫過渡的很生硬，這里我修改了一下動畫部分，也替換了圖片資源解決了資源not found的問題，請參考使用吧

你們要的順滑過渡動畫，很多人覺得動畫過渡的很生硬，這里我修改了一下動畫部分，也替換了圖片資源解決了資源not found的問題，請參考使用吧