你們要的順滑過渡動畫，很多人覺得動畫過渡的很生硬，這里我修改了一下動畫部分，也替換了圖片資源解決了資源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%;
? ? ? ? ? ? }
? ? ? ? ? ? /*設(shè)置背景圖片全屏顯示，并且居中*/
? ? ? ? ? ? img.bg {
? ? ? ? ? ? ? ? min-height: 100%;
? ? ? ? ? ? ? ? min-width: 1024px;
? ? ? ? ? ? ? ? width: 100%;
? ? ? ? ? ? ? ? height: auto !important;
? ? ? ? ? ? ? ? height: 100%;
? ? ? ? ? ? ? ? position: fixed;
? ? ? ? ? ? ? ? top: 0;
? ? ? ? ? ? ? ? left: 50%;
? ? ? ? ? ? ? ? z-index:1;
? ? ? ? ? ? ? ? -webkit-transform: translateX(-50%);
? ? ? ? ? ? ? ? -moz-transform: translateX(-50%);
? ? ? ? ? ? ? ? -o-transform: translateX(-50%);
? ? ? ? ? ? ? ? -ms-transform: translateX(-50%);
? ? ? ? ? ? }
? ? ? ? ? ? /*設(shè)置背景圖片從左向右移入顯示的動畫效果*/
? ? ? ? ? ? /* Slide Left */
? ? ? ? ? ??
? ? ? ? ? ? @-webkit-keyframes 'slideLeft' {
? ? ? ? ? ? ?0% { left: -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%; }
? ? ? ? ? ? }
? ? ? ? ? ? /*設(shè)置背景圖像從底部向頂部移入的動畫效果*/
? ? ? ? ? ? ?/* Slide Bottom */
? ? ? ? ? ??
? ? ? ? ? ? @-webkit-keyframes 'slideBottom' {
? ? ? ? ? ? ?0% { top: 350px; }
? ? ? ? ? ? ?100% { top: 0; }
? ? ? ? ? ? }
? ? ? ? ? ? @-moz-keyframes 'slideBottom' {
? ? ? ? ? ? ?0% { top: 350px; }
? ? ? ? ? ? ?100% { top: 0; }
? ? ? ? ? ? }
? ? ? ? ? ? @-ms-keyframes 'slideBottom' {
? ? ? ? ? ? ?0% { top: 350px; }
? ? ? ? ? ? ?100% { top: 0; }
? ? ? ? ? ? }
? ? ? ? ? ? @-o-keyframes 'slideBottom' {
? ? ? ? ? ? ?0% { top: 350px; }
? ? ? ? ? ? ?100% { top: 0; }
? ? ? ? ? ? }
? ? ? ? ? ? @keyframes 'slideBottom' {
? ? ? ? ? ? ?0% { top: 350px; }
? ? ? ? ? ? ?100% { top: 0; }
? ? ? ? ? ? }
? ? ? ? ? ? /*設(shè)置背景圖片由小到大放大動畫效果*/
? ? ? ? ? ? /* Zoom In */
? ? ? ? ? ??
? ? ? ? ? ? @-webkit-keyframes 'zoomIn' {
? ? ? ? ? ? ?0% { -webkit-transform: scale(0.1); }
? ? ? ? ? ? ?100% { -webkit-transform: 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%); }
? ? ? ? ? ? }
? ? ? ? ? ? /*設(shè)置背景圖像由大到小縮小動畫效果*/
? ? ? ? ? ? /* 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%); }
? ? ? ? ? ? }
? ? ? ? ? ? /*背景圖像旋轉(zhuǎn)出現(xiàn)動畫效果*/
? ? ? ? ? ? /* 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; }
? ? ? ? ? ? }
? ? ? ? ? ? /*設(shè)置背景圖像不顯示動畫效果*/
? ? ? ? ? ? @-webkit-keyframes 'notTarget' {
? ? ? ? ? ? ?0% { z-index: 75; }
? ? ? ? ? ? ?100% { z-index: 75; }
? ? ? ? ? ? }
? ? ? ? ? ? @-moz-keyframes 'notTarget' {
? ? ? ? ? ? ?0% { z-index: 75; }
? ? ? ? ? ? ?100% { z-index: 75; }
? ? ? ? ? ? }
? ? ? ? ? ? @-ms-keyframes 'notTarget' {
? ? ? ? ? ? ?0% { z-index: 75; }
? ? ? ? ? ? ?100% { z-index: 75; }
? ? ? ? ? ? }
? ? ? ? ? ? @-o-keyframes 'notTarget' {
? ? ? ? ? ? ?0% { z-index: 75; }
? ? ? ? ? ? ?100% { z-index: 75; }
? ? ? ? ? ? }
? ? ? ? ? ? @keyframes 'notTarget' {
? ? ? ? ? ? ?0% { z-index: 75; }
? ? ? ? ? ? ?100% { z-index: 75; }
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ? ? .slider {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? z-index: 9999;
? ? ? ? ? ? bottom: 100px;
? ? ? ? ? ? }
? ? ? ? ? ? .slider li {
? ? ? ? ? ? display: inline-block;
? ? ? ? ? ??
? ? ? ? ? ? width: 170px;
? ? ? ? ? ? height: 130px;
? ? ? ? ? ? margin-right: 15px;
? ? ? ? ? ? }
? ? ? ? ? ? .slider a {
? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? width: 170px;
? ? ? ? ? ? padding-top: 70px;
? ? ? ? ? ? padding-bottom: 20px;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? border: 2px solid #fff;
? ? ? ? ? ? border-radius: 5px;
? ? ? ? ? ? vertical-align: top;
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? text-decoration: none;
? ? ? ? ? ? font-size: 22px;
? ? ? ? ? ? font-family: 'Yesteryear', cursive;
? ? ? ? ? ? text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);
? ? ? ? ? ? }
? ? ? ? ? ? /*任務(wù)一、設(shè)置不同列表的背景色*/
? ? ? ? ? ? .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;
? ? ? ? ? ? }
? ? ? ? ? ? /*任務(wù)二、設(shè)置縮略圖形狀*/
? ? ? ? ? ? .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;
? ? ? ? ? ? }
? ? ? ? ? ? /*任務(wù)三、設(shè)置縮略圖背景圖像*/
? ? ? ? ? ? .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;
? ? ? ? ? ?}
? ? ? ? ? ? /*任務(wù)四、給縮略圖添加蒙板效果*/
? ? ? ? ? ? .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);
? ? ? ? ? ? }
? ? ? ? ? ? /*任務(wù)五、鼠標(biāo)懸浮時，修改縮略圖蒙板透明度*/
? ? ? ? ? ? .slider 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è)置不顯示的背景圖層級*/
? ? ? ? ? ? /* 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>
2019-09-05
<!DOCTYPE?HTML> <!--?好看的格式，我可能有強(qiáng)迫癥吧【手動滑稽】--> <htmllang="en-US">???? <head>???????? ????<meta?charset="UTF-8">????? ????<title>CSS3?Full?Background?Slider?</title>???????? ????<style?type="text/css">???????????? ????????@importurl("http://www.w3cplus.com/demo/css3/base.css");???????????? ????????@importurl("http://fonts.googleapis.com/css?family=Yesteryear");???????????? ????????html,body?{???????????? ????????????height:?100%;???????????? ????????}???????????? ????????/*設(shè)置背景圖片全屏顯示，并且居中*/???????????? ????????img.bg?{???????????????? ????????????min-height:?100%;???????????????? ????????????min-width:?1024px;???????????????? ????????????width:?100%;???????????????? ????????????height:?auto?!important;???????????????? ????????????height:?100%;???????????????? ????????????position:?fixed;???????????????? ????????????top:?0;???????????????? ????????????left:?50%;???????????????? ????????????z-index:1;???????????????? ????????????-webkit-transform:?translateX(-50%);???????????????? ????????????-moz-transform:?translateX(-50%);???????????????? ????????????-o-transform:?translateX(-50%);???????????????? ????????????-ms-transform:?translateX(-50%);???????????? ????????}???????????? ????????/*設(shè)置背景圖片從左向右移入顯示的動畫效果*/???????????? ????????/*?Slide?Left?*/???????????????????????? ????????@-webkit-keyframes?'slideLeft'?{????????????? ????????????0%?{?left:?-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%;?}???????????? ????????}???????????? ????????/*設(shè)置背景圖像從底部向頂部移入的動畫效果*/????????????? ????????/*?Slide?Bottom?*/???????????????????????? ????????@-webkit-keyframes?'slideBottom'?{????????????? ????????????0%?{?top:?350px;?}????????????? ????????????100%?{?top:?0;?}???????????? ????????}???????????? ????????@-moz-keyframes?'slideBottom'?{????????????? ????????????0%?{?top:?350px;?}????????????? ????????????100%?{?top:?0;?}???????????? ????????}???????????? ????????@-ms-keyframes?'slideBottom'?{????????????? ????????????0%?{?top:?350px;?}????????????? ????????????100%?{?top:?0;?}???????????? ????????}???????????? ????????@-o-keyframes?'slideBottom'?{????????????? ????????????0%?{?top:?350px;?}????????????? ????????????100%?{?top:?0;?}???????????? ????????}???????????? ????????@keyframes?'slideBottom'?{????????????? ????????????0%?{?top:?350px;?}????????????? ????????????100%?{?top:?0;?}???????????? ????????}???????????? ????????/*設(shè)置背景圖片由小到大放大動畫效果*/???????????? ????????/*?Zoom?In?*/???????????????????????? ????????@-webkit-keyframes?'zoomIn'?{????????????? ????????????0%?{?-webkit-transform:?scale(0.1);?}????????????? ????????????100%?{?-webkit-transform:?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%);?}???????????? ????????}???????????? ????????/*設(shè)置背景圖像由大到小縮小動畫效果*/???????????? ????????/*?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%);?}???????????? ????????}???????????? ????????/*背景圖像旋轉(zhuǎn)出現(xiàn)動畫效果*/???????????? ????????/*?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;?}???????????? ????????}???????????? ????????/*設(shè)置背景圖像不顯示動畫效果*/???????????? ????????@-webkit-keyframes?'notTarget'?{????????????? ????????????0%?{?z-index:?75;?}????????????? ????????????100%?{?z-index:?75;?}???????????? ????????}???????????? ????????@-moz-keyframes?'notTarget'?{????????????? ????????????0%?{?z-index:?75;?}????????????? ????????????100%?{?z-index:?75;?}???????????? ????????}???????????? ????????@-ms-keyframes?'notTarget'?{????????????? ????????????0%?{?z-index:?75;?}????????????? ????????????100%?{?z-index:?75;?}???????????? ????????}???????????? ????????@-o-keyframes?'notTarget'?{????????????? ????????????0%?{?z-index:?75;?}????????????? ????????????100%?{?z-index:?75;?}???????????? ????????}???????????? ????????@keyframes?'notTarget'?{????????????? ????????????0%?{?z-index:?75;?}????????????? ????????????100%?{?z-index:?75;?}???????????? ????????}???????????????????????????????????????????????? ????????.slider?{???????????? ????????????position:?absolute;???????????? ????????????width:?100%;???????????? ????????????text-align:?center;???????????? ????????????z-index:?9999;???????????? ????????????bottom:?100px;???????????? ????????}???????????? ????????.slider?li?{???????????? ????????????display:?inline-block;???????????????????????? ????????????width:?170px;???????????? ????????????height:?130px;???????????? ????????????margin-right:?15px;???????????? ????????}???????????? ????????.slider?a?{???????????? ????????????display:?inline-block;???????????? ????????????width:?170px;???????????? ????????????padding-top:?70px;???????????? ????????????padding-bottom:?20px;???????????? ????????????position:?relative;???????????? ????????????cursor:?pointer;???????????? ????????????border:?2px?solid?#fff;???????????? ????????????border-radius:?5px;???????????? ????????????vertical-align:?top;???????????? ????????????color:?#fff;???????????? ????????????text-decoration:?none;???????????? ????????????font-size:?22px;???????????? ????????????font-family:?'Yesteryear',?cursive;???????????? ????????????text-shadow:?-1px?-1px?1px?rgba(0,?0,?0,?0.8),-2px?-2px?1px?rgba(0,?0,?0,?0.3),-3px?-3px?1px?rgba(0,?0,?0,?0.3);???????????? ????????}???????????? ????????/*任務(wù)一、設(shè)置不同列表的背景色*/???????????? ????????.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;???????????? ????????}???????????? ????????/*任務(wù)二、設(shè)置縮略圖形狀*/???????????? ????????.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;???????????? ????????}???????????? ????????/*任務(wù)三、設(shè)置縮略圖背景圖像*/???????????? ????????.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;??????????? ????????}???????????? ????????/*任務(wù)四、給縮略圖添加蒙板效果*/???????????? ????????.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);???????????? ????????}???????????? ????????/*任務(wù)五、鼠標(biāo)懸浮時，修改縮略圖蒙板透明度*/???????????? ????????.slider?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è)置不顯示的背景圖層級*/???????????? ????????/*?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>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%;????????????}????????????/*設(shè)置背景圖片全屏顯示，并且居中*/????????????img.bg?{????????????????min-height:?100%;????????????????min-width:?1024px;????????????????width:?100%;????????????????height:?auto?!important;????????????????height:?100%;????????????????position:?fixed;????????????????top:?0;????????????????left:?50%;????????????????z-index:1;????????????????-webkit-transform:?translateX(-50%);????????????????-moz-transform:?translateX(-50%);????????????????-o-transform:?translateX(-50%);????????????????-ms-transform:?translateX(-50%);????????????}????????????/*設(shè)置背景圖片從左向右移入顯示的動畫效果*/????????????/*?Slide?Left?*/????????????????????????@-webkit-keyframes?'slideLeft'?{?????????????0%?{?left:?-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%;?}????????????}????????????/*設(shè)置背景圖像從底部向頂部移入的動畫效果*/?????????????/*?Slide?Bottom?*/????????????????????????@-webkit-keyframes?'slideBottom'?{?????????????0%?{?top:?350px;?}?????????????100%?{?top:?0;?}????????????}????????????@-moz-keyframes?'slideBottom'?{?????????????0%?{?top:?350px;?}?????????????100%?{?top:?0;?}????????????}????????????@-ms-keyframes?'slideBottom'?{?????????????0%?{?top:?350px;?}?????????????100%?{?top:?0;?}????????????}????????????@-o-keyframes?'slideBottom'?{?????????????0%?{?top:?350px;?}?????????????100%?{?top:?0;?}????????????}????????????@keyframes?'slideBottom'?{?????????????0%?{?top:?350px;?}?????????????100%?{?top:?0;?}????????????}????????????/*設(shè)置背景圖片由小到大放大動畫效果*/????????????/*?Zoom?In?*/????????????????????????@-webkit-keyframes?'zoomIn'?{?????????????0%?{?-webkit-transform:?scale(0.1);?}?????????????100%?{?-webkit-transform:?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%);?}????????????}????????????/*設(shè)置背景圖像由大到小縮小動畫效果*/????????????/*?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%);?}????????????}????????????/*背景圖像旋轉(zhuǎn)出現(xiàn)動畫效果*/????????????/*?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;?}????????????}????????????/*設(shè)置背景圖像不顯示動畫效果*/????????????@-webkit-keyframes?'notTarget'?{?????????????0%?{?z-index:?75;?}?????????????100%?{?z-index:?75;?}????????????}????????????@-moz-keyframes?'notTarget'?{?????????????0%?{?z-index:?75;?}?????????????100%?{?z-index:?75;?}????????????}????????????@-ms-keyframes?'notTarget'?{?????????????0%?{?z-index:?75;?}?????????????100%?{?z-index:?75;?}????????????}????????????@-o-keyframes?'notTarget'?{?????????????0%?{?z-index:?75;?}?????????????100%?{?z-index:?75;?}????????????}????????????@keyframes?'notTarget'?{?????????????0%?{?z-index:?75;?}?????????????100%?{?z-index:?75;?}????????????}????????????????????????????????????????????????.slider?{????????????position:?absolute;????????????width:?100%;????????????text-align:?center;????????????z-index:?9999;????????????bottom:?100px;????????????}????????????.slider?li?{????????????display:?inline-block;????????????????????????width:?170px;????????????height:?130px;????????????margin-right:?15px;????????????}????????????.slider?a?{????????????display:?inline-block;????????????width:?170px;????????????padding-top:?70px;????????????padding-bottom:?20px;????????????position:?relative;????????????cursor:?pointer;????????????border:?2px?solid?#fff;????????????border-radius:?5px;????????????vertical-align:?top;????????????color:?#fff;????????????text-decoration:?none;????????????font-size:?22px;????????????font-family:?'Yesteryear',?cursive;????????????text-shadow:?-1px?-1px?1px?rgba(0,?0,?0,?0.8),-2px?-2px?1px?rgba(0,?0,?0,?0.3),-3px?-3px?1px?rgba(0,?0,?0,?0.3);????????????}????????????/*任務(wù)一、設(shè)置不同列表的背景色*/????????????.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;????????????}????????????/*任務(wù)二、設(shè)置縮略圖形狀*/????????????.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;????????????}????????????/*任務(wù)三、設(shè)置縮略圖背景圖像*/????????????.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;???????????}????????????/*任務(wù)四、給縮略圖添加蒙板效果*/????????????.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);????????????}????????????/*任務(wù)五、鼠標(biāo)懸浮時，修改縮略圖蒙板透明度*/????????????.slider?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è)置不顯示的背景圖層級*/????????????/*?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>