課程
/前端開發
/HTML/CSS
/十天精通CSS3
這個資料下載里面的源碼有問題，根本沒有效果
2015-05-10
源自：十天精通CSS3 7-8
正在回答
????????????/*續*/ ????????????/*任務六、點擊綜略圖，切換背景圖*/ ????????????/*背景圖從左向右出現*/ ????????????.slideLeft:target{ ?????????????z-index:?100; ?????????????-webkit-animation-name:?slideLeft; ?????????????-webkit-animation-duration:?1s; ?????????????-webkit-animation-iteration-count:?1; ?????????????-moz-animation-name:?slideLeft; ?????????????-moz-animation-duration:?1s; ?????????????-moz-animation-iteration-count:?1; ?????????????-ms-animation-name:?slideLeft; ?????????????-ms-animation-duration:?1s; ?????????????-ms-animation-iteration-count:?1; ?????????????-o-animation-name:?slideLeft; ?????????????-o-animation-duration:?1s; ?????????????-o-animation-iteration-count:?1; ?????????????animation-name:?slideLeft; ?????????????animation-duration:?1s; ?????????????animation-iteration-count:?1; ????????????} ????????????/*背景圖從下向上出現*/ ????????????.slideBottom:target{ ?????????????z-index:?100; ???????????? ?????????????-webkit-animation-name:?slideBottom; ?????????????-webkit-animation-duration:?1s; ?????????????-webkit-animation-iteration-count:?1; ?????????????-moz-animation-name:?slideBottom; ?????????????-moz-animation-duration:?1s; ?????????????-moz-animation-iteration-count:?1; ?????????????-ms-animation-name:?slideBottom; ?????????????-ms-animation-duration:?1s; ?????????????-ms-animation-iteration-count:?1; ?????????????-o-animation-name:?slideBottom; ?????????????-o-animation-duration:?1s; ?????????????-o-animation-iteration-count:?1; ????????????animation-name:?slideBottom; ?????????????animation-duration:?1s; ?????????????animation-iteration-count:?1; ????????????} ????????????/*背景圖由小到大出現*/ ????????????.zoomIn:target?{ ?????????????z-index:?100; ?????????????-webkit-animation-name:?zoomIn; ?????????????-webkit-animation-duration:?1s; ?????????????-webkit-animation-iteration-count:?1; ?????????????-moz-animation-name:?zoomIn; ?????????????-moz-animation-duration:?1s; ?????????????-moz-animation-iteration-count:?1; ?????????????-ms-animation-name:?zoomIn; ?????????????-ms-animation-duration:?1s; ?????????????-ms-animation-iteration-count:?1; ?????????????-o-animation-name:?zoomIn; ?????????????-o-animation-duration:?1s; ?????????????-o-animation-iteration-count:?1; ?????????????animation-name:?zoomIn; ?????????????animation-duration:?1s; ?????????????animation-iteration-count:?1; ????????????} ???????????? ????????????/*背景圖由大到小出現*/ ????????????.zoomOut:target{ ?????????????z-index:?100; ?????????????-webkit-animation-name:?zoomOut; ?????????????-webkit-animation-duration:?1s; ?????????????-webkit-animation-iteration-count:?1; ?????????????-moz-animation-name:?zoomOut; ?????????????-moz-animation-duration:?1s; ?????????????-moz-animation-iteration-count:?1; ?????????????-ms-animation-name:?zoomOut; ?????????????-ms-animation-duration:?1s; ?????????????-ms-animation-iteration-count:?1; ?????????????-o-animation-name:?zoomOut; ?????????????-o-animation-duration:?1s; ?????????????-o-animation-iteration-count:?1; ?????????????animation-name:?zoomOut; ?????????????animation-duration:?1s; ?????????????animation-iteration-count:?1; ????????????} ???????????? ????????????/*背景圖旋轉出現*/ ????????????.rotate: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?*/ ???????????? ????????????.bg:not(:target){ ?????????????-webkit-animation-name:?notTarget; ?????????????-webkit-animation-duration:?1s; ?????????????-webkit-animation-iteration-count:?1; ?????????????-moz-animation-name:?notTarget; ?????????????-moz-animation-duration:?1s; ?????????????-moz-animation-iteration-count:?1; ?????????????-ms-animation-name:?notTarget; ?????????????-ms-animation-duration:?1s; ?????????????-ms-animation-iteration-count:?1; ?????????????-o-animation-name:?notTarget; ?????????????-o-animation-duration:?1s; ?????????????-o-animation-iteration-count:?1; ?????????????animation-name:?notTarget; ?????????????animation-duration:?1s; ?????????????animation-iteration-count:?1; ????????????} ????????</style> ????</head> ????<body> ????????<div> ????????????<ul> ?????????????<li><a?href="#bg1">Hipster?Fashion?Haircut?</a></li> ?????????<li><a?href="#bg2">Cloud?Computing?Services?&?Consulting</a></li> ?????????<li><a?href="#bg3">My?haire?is?sooo?fantastic!</a></li> ?????????<li><a?href="#bg4">Eat?healthy?&?excersice!</a></li> ?????????<li><a?href="#bg5">Lips?so?kissable?I?could?die?...</a></li> ?????????</ul> ????????</div> ????????<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg1.jpg"?alt=""?class="bg?slideLeft"?id="bg1"?/> ????????<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg2.jpg"?alt=""?class="bg?slideBottom"?id="bg2"?/> ????????<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg3.jpg"?alt=""?class="bg?zoomIn"?id="bg3"?/> ????????<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg4.jpg"?alt=""?class="bg?zoomOut"?id="bg4"?/> ????????<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg5.jpg"?alt=""?class="bg?rotate"?id="bg5"?/> ????</body> </html>
試試下面的吧
<!DOCTYPE HTML>
<htmllang="en-US">
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ?<title>CSS3 Full Background Slider </title>
? ? ? ? <style type="text/css">
? ? ? ? ? ? @importurl("http://www.w3cplus.com/demo/css3/base.css");
? ? ? ? ? ? @importurl("http://fonts.googleapis.com/css?family=Yesteryear");
? ? ? ? ? ? html,body {
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? }
? ? ? ? ? ? /*設置背景圖片全屏顯示，并且居中*/
? ? ? ? ? ? img.bg {
? ? ? ? ? ? min-height: 100%;
? ? ? ? ? ? min-width: 1024px;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: auto !important;
? ? ? ? ? ? position: fixed;
? ? ? ? ? ? top: 0;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? z-index:1;
? ? ? ? ? ? ? -webkit-transform: translateX(-50%);
? ? ? ? ? ? ? -moz-transform: translateX(-50%);
? ? ? ? ? ? ? -o-transform: translateX(-50%);
? ? ? ? ? ? ? -ms-transform: translateX(-50%);
? ? ? ? ? ? /*設置背景圖片從左向右移入顯示的動畫效果*/
? ? ? ? ? ? /* Slide Left */
? ? ? ? ? ??
? ? ? ? ? ? @-webkit-keyframes 'slideLeft' {
? ? ? ? ? ? ?0% { left: -500px; }
? ? ? ? ? ? ?100% { left: 0; }
? ? ? ? ? ? @-moz-keyframes 'slideLeft' {
? ? ? ? ? ? @-o-keyframes 'slideLeft' {
? ? ? ? ? ? @-ms-keyframes 'slideLeft' {
? ? ? ? ? ? @keyframes 'slideLeft' {
? ? ? ? ? ? /*設置背景圖像從底部向頂部移入的動畫效果*/
? ? ? ? ? ? ?/* Slide Bottom */
? ? ? ? ? ? @-webkit-keyframes 'slideBottom' {
? ? ? ? ? ? ?0% { top: 350px; }
? ? ? ? ? ? ?100% { top: 0; }
? ? ? ? ? ? @-moz-keyframes 'slideBottom' {
? ? ? ? ? ? @-ms-keyframes 'slideBottom' {
? ? ? ? ? ? @-o-keyframes 'slideBottom' {
? ? ? ? ? ? @keyframes 'slideBottom' {
? ? ? ? ? ? /*設置背景圖片由小到大放大動畫效果*/
? ? ? ? ? ? /* Zoom In */
? ? ? ? ? ? @-webkit-keyframes 'zoomIn' {
? ? ? ? ? ? ?0% { -webkit-transform: scale(0.1); }
? ? ? ? ? ? ?100% { -webkit-transform: none; }
? ? ? ? ? ? @-moz-keyframes 'zoomIn' {
? ? ? ? ? ? ?0% { -moz-transform: scale(0.1); }
? ? ? ? ? ? ?100% { -moz-transform: none; }
? ? ? ? ? ? @-ms-keyframes 'zoomIn' {
? ? ? ? ? ? ?0% { -ms-transform: scale(0.1); }
? ? ? ? ? ? ?100% { -ms-transform: none; }
? ? ? ? ? ? @-o-keyframes 'zoomIn' {
? ? ? ? ? ? ?0% { -o-transform: scale(0.1); }
? ? ? ? ? ? ?100% { -o-transform: none; }
? ? ? ? ? ? @keyframes 'zoomIn' {
? ? ? ? ? ? ?0% { transform: scale(0.1); }
? ? ? ? ? ? ?100% { transform: none; }
? ? ? ? ? ? /*設置背景圖像由大到小縮小動畫效果*/
? ? ? ? ? ? /* Zoom Out */
? ? ? ? ? ? @-webkit-keyframes 'zoomOut' {
? ? ? ? ? ? ?0% { -webkit-transform: scale(2); }
? ? ? ? ? ? @-moz-keyframes 'zoomOut' {
? ? ? ? ? ? ?0% { -moz-transform: scale(2); }
? ? ? ? ? ? @-ms-keyframes 'zoomOut' {
? ? ? ? ? ? ?0% { -ms-transform: scale(2); }
? ? ? ? ? ? @-o-keyframes 'zoomOut' {
? ? ? ? ? ? ?0% { -o-transform: scale(2); }
? ? ? ? ? ? @keyframes 'zoomOut' {
? ? ? ? ? ? ?0% { transform: scale(2); }
? ? ? ? ? ? /*背景圖像旋轉出現動畫效果*/
? ? ? ? ? ? /* Rotate */
? ? ? ? ? ? @-webkit-keyframes 'rotate' {
? ? ? ? ? ? ?0% { -webkit-transform: rotate(-360deg) scale(0.1); }
? ? ? ? ? ? @-moz-keyframes 'rotate' {
? ? ? ? ? ? ?0% { -moz-transform: rotate(-360deg) scale(0.1); }
? ? ? ? ? ? @-ms-keyframes 'rotate' {
? ? ? ? ? ? ?0% { -ms-transform: rotate(-360deg) scale(0.1); }
? ? ? ? ? ? @-o-keyframes 'rotate' {
? ? ? ? ? ? ?0% { -o-transform: rotate(-360deg) scale(0.1); }
? ? ? ? ? ? @keyframes 'rotate' {
? ? ? ? ? ? ?0% { transform: rotate(-360deg) scale(0.1); }
? ? ? ? ? ? /*設置背景圖像不顯示動畫效果*/
? ? ? ? ? ? @-webkit-keyframes 'notTarget' {
? ? ? ? ? ? ?0% { z-index: 75; }
? ? ? ? ? ? ?100% { z-index: 75; }
? ? ? ? ? ? @-moz-keyframes 'notTarget' {
? ? ? ? ? ? @-ms-keyframes 'notTarget' {
? ? ? ? ? ? @-o-keyframes 'notTarget' {
? ? ? ? ? ? @keyframes 'notTarget' {
? ? ? ? ? ? .slider {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? z-index: 9999;
? ? ? ? ? ? bottom: 100px;
? ? ? ? ? ? .slider li {
? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? width: 170px;
? ? ? ? ? ? height: 130px;
? ? ? ? ? ? margin-right: 15px;
? ? ? ? ? ? .slider a {
? ? ? ? ? ? padding-top: 70px;
? ? ? ? ? ? padding-bottom: 20px;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? border: 2px solid #fff;
? ? ? ? ? ? border-radius: 5px;
? ? ? ? ? ? vertical-align: top;
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? text-decoration: none;
? ? ? ? ? ? font-size: 22px;
? ? ? ? ? ? font-family: 'Yesteryear', cursive;
? ? ? ? ? ? text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);
? ? ? ? ? ? /*任務一、設置不同列表的背景色*/
? ? ? ? ? ? .clearfix li:first-of-type a{
? ? ? ? ? ? background-color: #02646e;
? ? ? ? ? ? .clearfix li:nth-of-type(2) a{
? ? ? ? ? ? background-color: #eb0837;
? ? ? ? ? ? .clearfix li:nth-of-type(3) a{
? ? ? ? ? ? background-color: #67b374;
? ? ? ? ? ? } ? ?
? ? ? ? ? ? .clearfix li:nth-of-type(4) a{
? ? ? ? ? ? background-color: #e6674a;
? ? ? ? ? ? .clearfix li:last-of-type a{
? ? ? ? ? ? background-color: #e61061;
? ? ? ? ? ? /*任務二、設置縮略圖形狀*/
? ? ? ? ? ? .clearfix a::after{
? ? ? ? ? ? content:"";
? ? ? ? ? ? display: block;
? ? ? ? ? ? height: 120px;
? ? ? ? ? ? width: 120px;
? ? ? ? ? ? border: 5px solid #fff;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? margin-left: -60px;
? ? ? ? ? ? top: -80px;
? ? ? ? ? ? /*任務三、設置縮略圖背景圖像*/
? ? ? ? ? ? .clearfix li:first-of-type a::after{
? ? ? ? ? ? background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg) no-repeat center;
? ? ? ? ? ? .clearfix li:nth-of-type(2) a::after{
? ? ? ? ? ? background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg) no-repeat center;
? ? ? ? ? ? .clearfix li:nth-of-type(3) a::after{
? ? ? ? ? ? background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg) no-repeat center;
? ? ? ? ? ? .clearfix li:nth-of-type(4) a::after{
? ? ? ? ? ? background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg) no-repeat center;
? ? ? ? ? ? .clearfix li:last-of-type a::after{
? ? ? ? ? ? background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.jpg) no-repeat center;
? ? ? ? ? ? /*任務四、給縮略圖添加蒙板效果*/
? ? ? ? ? ? .clearfix a::before{
? ? ? ? ? ? z-index: 99999;
? ? ? ? ? ? background: rgba(0,0,0,0.3);
? ? ? ? ? ? /*任務五、鼠標懸浮時，修改縮略圖蒙板透明度*/
? ? ? ? ? ? .clearfix a:hover::before{
? ? ? ? ? ? opacity:0;
舉報
本課程為CSS3入門教程，深刻詳解CSS3知識讓網頁穿上絢麗裝備
1 回答設置背景圖片切換
1 回答為什么點擊縮略圖可以切換背景？
1 回答任務三：設置縮略圖背景圖像
4 回答針對練習題，“切換背景圖像綜合練習題”,為什么第二種寫法不對?
1 回答背景圖像不顯示動畫結果
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-01-10
????????????/*續*/ ????????????/*任務六、點擊綜略圖，切換背景圖*/ ????????????/*背景圖從左向右出現*/ ????????????.slideLeft:target{ ?????????????z-index:?100; ?????????????-webkit-animation-name:?slideLeft; ?????????????-webkit-animation-duration:?1s; ?????????????-webkit-animation-iteration-count:?1; ?????????????-moz-animation-name:?slideLeft; ?????????????-moz-animation-duration:?1s; ?????????????-moz-animation-iteration-count:?1; ?????????????-ms-animation-name:?slideLeft; ?????????????-ms-animation-duration:?1s; ?????????????-ms-animation-iteration-count:?1; ?????????????-o-animation-name:?slideLeft; ?????????????-o-animation-duration:?1s; ?????????????-o-animation-iteration-count:?1; ?????????????animation-name:?slideLeft; ?????????????animation-duration:?1s; ?????????????animation-iteration-count:?1; ????????????} ????????????/*背景圖從下向上出現*/ ????????????.slideBottom:target{ ?????????????z-index:?100; ???????????? ?????????????-webkit-animation-name:?slideBottom; ?????????????-webkit-animation-duration:?1s; ?????????????-webkit-animation-iteration-count:?1; ?????????????-moz-animation-name:?slideBottom; ?????????????-moz-animation-duration:?1s; ?????????????-moz-animation-iteration-count:?1; ?????????????-ms-animation-name:?slideBottom; ?????????????-ms-animation-duration:?1s; ?????????????-ms-animation-iteration-count:?1; ?????????????-o-animation-name:?slideBottom; ?????????????-o-animation-duration:?1s; ?????????????-o-animation-iteration-count:?1; ????????????animation-name:?slideBottom; ?????????????animation-duration:?1s; ?????????????animation-iteration-count:?1; ????????????} ????????????/*背景圖由小到大出現*/ ????????????.zoomIn:target?{ ?????????????z-index:?100; ?????????????-webkit-animation-name:?zoomIn; ?????????????-webkit-animation-duration:?1s; ?????????????-webkit-animation-iteration-count:?1; ?????????????-moz-animation-name:?zoomIn; ?????????????-moz-animation-duration:?1s; ?????????????-moz-animation-iteration-count:?1; ?????????????-ms-animation-name:?zoomIn; ?????????????-ms-animation-duration:?1s; ?????????????-ms-animation-iteration-count:?1; ?????????????-o-animation-name:?zoomIn; ?????????????-o-animation-duration:?1s; ?????????????-o-animation-iteration-count:?1; ?????????????animation-name:?zoomIn; ?????????????animation-duration:?1s; ?????????????animation-iteration-count:?1; ????????????} ???????????? ????????????/*背景圖由大到小出現*/ ????????????.zoomOut:target{ ?????????????z-index:?100; ?????????????-webkit-animation-name:?zoomOut; ?????????????-webkit-animation-duration:?1s; ?????????????-webkit-animation-iteration-count:?1; ?????????????-moz-animation-name:?zoomOut; ?????????????-moz-animation-duration:?1s; ?????????????-moz-animation-iteration-count:?1; ?????????????-ms-animation-name:?zoomOut; ?????????????-ms-animation-duration:?1s; ?????????????-ms-animation-iteration-count:?1; ?????????????-o-animation-name:?zoomOut; ?????????????-o-animation-duration:?1s; ?????????????-o-animation-iteration-count:?1; ?????????????animation-name:?zoomOut; ?????????????animation-duration:?1s; ?????????????animation-iteration-count:?1; ????????????} ???????????? ????????????/*背景圖旋轉出現*/ ????????????.rotate: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?*/ ???????????? ????????????.bg:not(:target){ ?????????????-webkit-animation-name:?notTarget; ?????????????-webkit-animation-duration:?1s; ?????????????-webkit-animation-iteration-count:?1; ?????????????-moz-animation-name:?notTarget; ?????????????-moz-animation-duration:?1s; ?????????????-moz-animation-iteration-count:?1; ?????????????-ms-animation-name:?notTarget; ?????????????-ms-animation-duration:?1s; ?????????????-ms-animation-iteration-count:?1; ?????????????-o-animation-name:?notTarget; ?????????????-o-animation-duration:?1s; ?????????????-o-animation-iteration-count:?1; ?????????????animation-name:?notTarget; ?????????????animation-duration:?1s; ?????????????animation-iteration-count:?1; ????????????} ????????</style> ????</head> ????<body> ????????<div> ????????????<ul> ?????????????<li><a?href="#bg1">Hipster?Fashion?Haircut?</a></li> ?????????<li><a?href="#bg2">Cloud?Computing?Services?&?Consulting</a></li> ?????????<li><a?href="#bg3">My?haire?is?sooo?fantastic!</a></li> ?????????<li><a?href="#bg4">Eat?healthy?&?excersice!</a></li> ?????????<li><a?href="#bg5">Lips?so?kissable?I?could?die?...</a></li> ?????????</ul> ????????</div> ????????<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg1.jpg"?alt=""?class="bg?slideLeft"?id="bg1"?/> ????????<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg2.jpg"?alt=""?class="bg?slideBottom"?id="bg2"?/> ????????<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg3.jpg"?alt=""?class="bg?zoomIn"?id="bg3"?/> ????????<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg4.jpg"?alt=""?class="bg?zoomOut"?id="bg4"?/> ????????<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg5.jpg"?alt=""?class="bg?rotate"?id="bg5"?/> ????</body> </html>2016-01-10
試試下面的吧
<!DOCTYPE HTML>
<htmllang="en-US">
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ?<title>CSS3 Full Background Slider </title>
? ? ? ? <style type="text/css">
? ? ? ? ? ? @importurl("http://www.w3cplus.com/demo/css3/base.css");
? ? ? ? ? ? @importurl("http://fonts.googleapis.com/css?family=Yesteryear");
? ? ? ? ? ? html,body {
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? }
? ? ? ? ? ? /*設置背景圖片全屏顯示，并且居中*/
? ? ? ? ? ? img.bg {
? ? ? ? ? ? min-height: 100%;
? ? ? ? ? ? min-width: 1024px;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: auto !important;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? position: fixed;
? ? ? ? ? ? top: 0;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? z-index:1;
? ? ? ? ? ? ? -webkit-transform: translateX(-50%);
? ? ? ? ? ? ? -moz-transform: translateX(-50%);
? ? ? ? ? ? ? -o-transform: translateX(-50%);
? ? ? ? ? ? ? -ms-transform: translateX(-50%);
? ? ? ? ? ? }
? ? ? ? ? ? /*設置背景圖片從左向右移入顯示的動畫效果*/
? ? ? ? ? ? /* Slide Left */
? ? ? ? ? ??
? ? ? ? ? ? @-webkit-keyframes 'slideLeft' {
? ? ? ? ? ? ?0% { left: -500px; }
? ? ? ? ? ? ?100% { left: 0; }
? ? ? ? ? ? }
? ? ? ? ? ? @-moz-keyframes 'slideLeft' {
? ? ? ? ? ? ?0% { left: -500px; }
? ? ? ? ? ? ?100% { left: 0; }
? ? ? ? ? ? }
? ? ? ? ? ? @-o-keyframes 'slideLeft' {
? ? ? ? ? ? ?0% { left: -500px; }
? ? ? ? ? ? ?100% { left: 0; }
? ? ? ? ? ? }
? ? ? ? ? ? @-ms-keyframes 'slideLeft' {
? ? ? ? ? ? ?0% { left: -500px; }
? ? ? ? ? ? ?100% { left: 0; }
? ? ? ? ? ? }
? ? ? ? ? ? @keyframes 'slideLeft' {
? ? ? ? ? ? ?0% { left: -500px; }
? ? ? ? ? ? ?100% { left: 0; }
? ? ? ? ? ? }
? ? ? ? ? ? /*設置背景圖像從底部向頂部移入的動畫效果*/
? ? ? ? ? ? ?/* Slide Bottom */
? ? ? ? ? ??
? ? ? ? ? ? @-webkit-keyframes 'slideBottom' {
? ? ? ? ? ? ?0% { top: 350px; }
? ? ? ? ? ? ?100% { top: 0; }
? ? ? ? ? ? }
? ? ? ? ? ? @-moz-keyframes 'slideBottom' {
? ? ? ? ? ? ?0% { top: 350px; }
? ? ? ? ? ? ?100% { top: 0; }
? ? ? ? ? ? }
? ? ? ? ? ? @-ms-keyframes 'slideBottom' {
? ? ? ? ? ? ?0% { top: 350px; }
? ? ? ? ? ? ?100% { top: 0; }
? ? ? ? ? ? }
? ? ? ? ? ? @-o-keyframes 'slideBottom' {
? ? ? ? ? ? ?0% { top: 350px; }
? ? ? ? ? ? ?100% { top: 0; }
? ? ? ? ? ? }
? ? ? ? ? ? @keyframes 'slideBottom' {
? ? ? ? ? ? ?0% { top: 350px; }
? ? ? ? ? ? ?100% { top: 0; }
? ? ? ? ? ? }
? ? ? ? ? ? /*設置背景圖片由小到大放大動畫效果*/
? ? ? ? ? ? /* Zoom In */
? ? ? ? ? ??
? ? ? ? ? ? @-webkit-keyframes 'zoomIn' {
? ? ? ? ? ? ?0% { -webkit-transform: scale(0.1); }
? ? ? ? ? ? ?100% { -webkit-transform: none; }
? ? ? ? ? ? }
? ? ? ? ? ? @-moz-keyframes 'zoomIn' {
? ? ? ? ? ? ?0% { -moz-transform: scale(0.1); }
? ? ? ? ? ? ?100% { -moz-transform: none; }
? ? ? ? ? ? }
? ? ? ? ? ? @-ms-keyframes 'zoomIn' {
? ? ? ? ? ? ?0% { -ms-transform: scale(0.1); }
? ? ? ? ? ? ?100% { -ms-transform: none; }
? ? ? ? ? ? }
? ? ? ? ? ? @-o-keyframes 'zoomIn' {
? ? ? ? ? ? ?0% { -o-transform: scale(0.1); }
? ? ? ? ? ? ?100% { -o-transform: none; }
? ? ? ? ? ? }
? ? ? ? ? ? @keyframes 'zoomIn' {
? ? ? ? ? ? ?0% { transform: scale(0.1); }
? ? ? ? ? ? ?100% { transform: none; }
? ? ? ? ? ? }
? ? ? ? ? ? /*設置背景圖像由大到小縮小動畫效果*/
? ? ? ? ? ? /* Zoom Out */
? ? ? ? ? ??
? ? ? ? ? ? @-webkit-keyframes 'zoomOut' {
? ? ? ? ? ? ?0% { -webkit-transform: scale(2); }
? ? ? ? ? ? ?100% { -webkit-transform: none; }
? ? ? ? ? ? }
? ? ? ? ? ? @-moz-keyframes 'zoomOut' {
? ? ? ? ? ? ?0% { -moz-transform: scale(2); }
? ? ? ? ? ? ?100% { -moz-transform: none; }
? ? ? ? ? ? }
? ? ? ? ? ? @-ms-keyframes 'zoomOut' {
? ? ? ? ? ? ?0% { -ms-transform: scale(2); }
? ? ? ? ? ? ?100% { -ms-transform: none; }
? ? ? ? ? ? }
? ? ? ? ? ? @-o-keyframes 'zoomOut' {
? ? ? ? ? ? ?0% { -o-transform: scale(2); }
? ? ? ? ? ? ?100% { -o-transform: none; }
? ? ? ? ? ? }
? ? ? ? ? ? @keyframes 'zoomOut' {
? ? ? ? ? ? ?0% { transform: scale(2); }
? ? ? ? ? ? ?100% { transform: none; }
? ? ? ? ? ? }
? ? ? ? ? ? /*背景圖像旋轉出現動畫效果*/
? ? ? ? ? ? /* Rotate */
? ? ? ? ? ??
? ? ? ? ? ? @-webkit-keyframes 'rotate' {
? ? ? ? ? ? ?0% { -webkit-transform: rotate(-360deg) scale(0.1); }
? ? ? ? ? ? ?100% { -webkit-transform: none; }
? ? ? ? ? ? }
? ? ? ? ? ? @-moz-keyframes 'rotate' {
? ? ? ? ? ? ?0% { -moz-transform: rotate(-360deg) scale(0.1); }
? ? ? ? ? ? ?100% { -moz-transform: none; }
? ? ? ? ? ? }
? ? ? ? ? ? @-ms-keyframes 'rotate' {
? ? ? ? ? ? ?0% { -ms-transform: rotate(-360deg) scale(0.1); }
? ? ? ? ? ? ?100% { -ms-transform: none; }
? ? ? ? ? ? }
? ? ? ? ? ? @-o-keyframes 'rotate' {
? ? ? ? ? ? ?0% { -o-transform: rotate(-360deg) scale(0.1); }
? ? ? ? ? ? ?100% { -o-transform: none; }
? ? ? ? ? ? }
? ? ? ? ? ? @keyframes 'rotate' {
? ? ? ? ? ? ?0% { transform: rotate(-360deg) scale(0.1); }
? ? ? ? ? ? ?100% { transform: none; }
? ? ? ? ? ? }
? ? ? ? ? ? /*設置背景圖像不顯示動畫效果*/
? ? ? ? ? ? @-webkit-keyframes 'notTarget' {
? ? ? ? ? ? ?0% { z-index: 75; }
? ? ? ? ? ? ?100% { z-index: 75; }
? ? ? ? ? ? }
? ? ? ? ? ? @-moz-keyframes 'notTarget' {
? ? ? ? ? ? ?0% { z-index: 75; }
? ? ? ? ? ? ?100% { z-index: 75; }
? ? ? ? ? ? }
? ? ? ? ? ? @-ms-keyframes 'notTarget' {
? ? ? ? ? ? ?0% { z-index: 75; }
? ? ? ? ? ? ?100% { z-index: 75; }
? ? ? ? ? ? }
? ? ? ? ? ? @-o-keyframes 'notTarget' {
? ? ? ? ? ? ?0% { z-index: 75; }
? ? ? ? ? ? ?100% { z-index: 75; }
? ? ? ? ? ? }
? ? ? ? ? ? @keyframes 'notTarget' {
? ? ? ? ? ? ?0% { z-index: 75; }
? ? ? ? ? ? ?100% { z-index: 75; }
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ? ? .slider {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? z-index: 9999;
? ? ? ? ? ? bottom: 100px;
? ? ? ? ? ? }
? ? ? ? ? ? .slider li {
? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? width: 170px;
? ? ? ? ? ? height: 130px;
? ? ? ? ? ? margin-right: 15px;
? ? ? ? ? ? }
? ? ? ? ? ? .slider a {
? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? width: 170px;
? ? ? ? ? ? padding-top: 70px;
? ? ? ? ? ? padding-bottom: 20px;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? border: 2px solid #fff;
? ? ? ? ? ? border-radius: 5px;
? ? ? ? ? ? vertical-align: top;
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? text-decoration: none;
? ? ? ? ? ? font-size: 22px;
? ? ? ? ? ? font-family: 'Yesteryear', cursive;
? ? ? ? ? ? text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);
? ? ? ? ? ? }
? ? ? ? ? ? /*任務一、設置不同列表的背景色*/
? ? ? ? ? ? .clearfix li:first-of-type a{
? ? ? ? ? ? background-color: #02646e;
? ? ? ? ? ? }
? ? ? ? ? ? .clearfix li:nth-of-type(2) a{
? ? ? ? ? ? background-color: #eb0837;
? ? ? ? ? ? }
? ? ? ? ? ? .clearfix li:nth-of-type(3) a{
? ? ? ? ? ? background-color: #67b374;
? ? ? ? ? ? } ? ?
? ? ? ? ? ? .clearfix li:nth-of-type(4) a{
? ? ? ? ? ? background-color: #e6674a;
? ? ? ? ? ? } ? ?
? ? ? ? ? ? .clearfix li:last-of-type a{
? ? ? ? ? ? background-color: #e61061;
? ? ? ? ? ? }
? ? ? ? ? ? /*任務二、設置縮略圖形狀*/
? ? ? ? ? ? .clearfix 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;
? ? ? ? ? ? }
? ? ? ? ? ? /*任務三、設置縮略圖背景圖像*/
? ? ? ? ? ? .clearfix li:first-of-type a::after{
? ? ? ? ? ? background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg) no-repeat center;
? ? ? ? ? ? }
? ? ? ? ? ? .clearfix li:nth-of-type(2) a::after{
? ? ? ? ? ? background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg) no-repeat center;
? ? ? ? ? ? }
? ? ? ? ? ? .clearfix li:nth-of-type(3) a::after{
? ? ? ? ? ? background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg) no-repeat center;
? ? ? ? ? ? }
? ? ? ? ? ? .clearfix li:nth-of-type(4) a::after{
? ? ? ? ? ? background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg) no-repeat center;
? ? ? ? ? ? }
? ? ? ? ? ? .clearfix li:last-of-type a::after{
? ? ? ? ? ? background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.jpg) no-repeat center;
? ? ? ? ? ? }
? ? ? ? ? ? /*任務四、給縮略圖添加蒙板效果*/
? ? ? ? ? ? .clearfix 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);
? ? ? ? ? ? }
? ? ? ? ? ? /*任務五、鼠標懸浮時，修改縮略圖蒙板透明度*/
? ? ? ? ? ? .clearfix a:hover::before{
? ? ? ? ? ? opacity:0;
? ? ? ? ? ? }