css3基礎-切換背景影象綜合練習題

阿新 • • 發佈：2019-01-23

這裡寫圖片描述

任務
1，給每個列表定義不同的背景顏色
提示：使用結構偽類選擇器:nth-of-type()

2，設定縮圖外形效果
提示：使用偽元素::after製作圓形效果

3、給每個縮圖設定不同的圖片
提示：使用偽結構選擇器:nth-of-type()，並且配合::after

4、給每個縮圖新增透明度蒙板效果
提示：使用偽類選擇器::before給縮圖新增蒙板效果

5、滑鼠懸浮在縮圖上時，修改縮圖上蒙板的透明度
提示：通過:hover和::before配合修改opacity的值為0

6、點選縮圖，切換背景圖片
提示：通過目標選擇器:target進行背景圖片的切換

7、控制不是被點選圖片的層級大小，讓其不顯示
提示：通過“否定選擇器:not()”和“目標選擇器:target”來控制不是被切換的背景影象不顯示

<!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: 0;
            z-index:1;
              -webkit-transform: translateX(-0);
              -moz-transform: translateX(-0);
              -o-transform: translateX(-0);
              -ms-transform: translateX(-0);
            }
            /*設定背景圖片從左向右移入顯示的動畫效果*/
            /* Slide Left */

            @-webkit-keyframes 'slideLeft' {
                0% { left: -500px; }
                100% { left: 0; }
            }
            @-moz-keyframes 'slideLeft' {
                0% { left: -500px; }
                100% { left: 0; }
            }
            @-o-keyframes 'slideLeft' {
                0% { left: -500px; }
                100% { left: 0; }
            }
            @-ms-keyframes 'slideLeft' {
                0% { left: -500px; }
                100% { left: 0; }
            }
            @keyframes 'slideLeft' {
                0% { left: -500px; }
                100% { left: 0; }
            }
            /*設定背景影象從底部向頂部移入的動畫效果*/
             /* 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);
            }
            /*任務一、設定不同列表的背景色*/
            .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;
            }
            /*任務二、設定縮圖形狀*/
            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;
            }
            /*任務三、設定縮圖背景影象*/
            li:nth-of-type(1) a::after{
            background: url(https://img4.mukewang.com/szimg/59b8a486000107fb05400300.jpg) no-repeat center;
            }
            li:nth-of-type(2) a:after{
            background: url(https://img1.mukewang.com/szimg/5b0cb5df00016e5405400300.jpg) no-repeat center;
            }
            li:nth-of-type(3) a:after{
            background: url(https://img2.mukewang.com/szimg/5b2a29d50001bf4605400300.jpg) no-repeat center;
            }
            li:nth-of-type(4) a:after{
            background: url(https://img1.mukewang.com/szimg/5a9ca4e80001786305400300.jpg) no-repeat center;
            }
            li:nth-of-type(5) a:after{
            background: url(https://img4.mukewang.com/szimg/5ac2dfe100014a9005400300.jpg) no-repeat center;
            }
            /*任務四、給縮圖新增蒙板效果*/
            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);
            }
            /*任務五、滑鼠懸浮時，修改縮圖蒙板透明度*/
            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 */
            .bg:not(:target){

                -webkit-animation-name: notTarget;
                -webkit-animation-duration: 1s;
                -webkit-animation-iteration-count: 1;
                -moz-animation-name: notTarget;
                -moz-animation-duration: 1s;
                -moz-animation-iteration-count: 1;
                -ms-animation-name: notTarget;
                -ms-animation-duration: 1s;
                -ms-animation-iteration-count: 1;
                -o-animation-name: notTarget;
                -o-animation-duration: 1s;
                -o-animation-iteration-count: 1;
                animation-name: notTarget;
                animation-duration: 1s;
                animation-iteration-count: 1;
            }
        </style>
    </head>
    <body>
        <div class="slider">
            <ul class="clearfix">
                <li><a href="#bg1">Hipster Fashion Haircut </a></li>
                <li><a href="#bg2">Cloud Computing Services &amp; Consulting</a></li>
                <li><a href="#bg3">My haire is sooo fantastic!</a></li>
                <li><a href="#bg4">Eat healthy &amp; excersice!</a></li>
                <li><a href="#bg5">Lips so kissable I could die ...</a></li>
            </ul>
        </div>
        <img src="https://img4.mukewang.com/szimg/59b8a486000107fb05400300.jpg" alt="" class="bg slideLeft" id="bg1" />
        <img src="https://img1.mukewang.com/szimg/5b0cb5df00016e5405400300.jpg" alt="" class="bg slideBottom" id="bg2" />
        <img src="https://img2.mukewang.com/szimg/5b2a29d50001bf4605400300.jpg" alt="" class="bg zoomIn" id="bg3" />
        <img src="https://img1.mukewang.com/szimg/5a9ca4e80001786305400300.jpg" alt="" class="bg zoomOut" id="bg4" />
        <img src="https://img4.mukewang.com/szimg/5ac2dfe100014a9005400300.jpg" alt="" class="bg rotate" id="bg5" />
    </body>
</html>

css3基礎-切換背景影象綜合練習題

任務 1，給每個列表定義不同的背景顏色提示：使用結構偽類選擇器:nth-of-type() 2，設定縮圖外形效果提示：使用偽元素::after製作圓形效果 3、給每個縮圖設定不同的

CSS3背景制作導航菜單綜合練習題

left link nav -o wan ctype ati com 技術分享 CSS3背景制作導航菜單綜合練習題小夥伴們，根據所學知識，使用CSS3實現下圖的導航菜單效果任務 1、制作導航圓角提示：使用border-radius實現圓角 2、制作導航

CSS3基礎——邊框，背景，文字，顏色

圓角效果 border-radius 單位:px 和% 陰影 box-shadow box-shadow: h-shadow v-shadow blur spread color inset; 常用四屬性：X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影

(六)Flutter 基礎部件 TextView 和TextStyle Flutter 容器裝飾盒子邊框圓角陰影形狀漸變背景影象

Text 文字與文字的樣式 import 'package:flutter/material.dart'; class BasicDemo extends StatelessWidget { @override Widget build(BuildContext context)

純css3實現點選縮圖切換背景圖

1：html頁面部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>純css3實現背景圖片切換效果&

CSS3中在一個元素中顯示多個背景影象

在CSS3中可以在一個元素中顯示多個背景影象，還可以將多個背景影象進行重疊顯示，從而使得調整背景影象中所使用的素材變得更加容易。如在一個div元素顯示多個背景影象，程式碼如下： div{ b

css3全屏背景圖片切換特效

一般做圖片切換效果，都會使用JS或者jQuery指令碼，今天發現，其實只用CSS也可以實現。試試效果吧。效果圖：程式碼如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"

java基礎3--面向物件（上）（綜合練習題）

程式是寫出來的，學習一門語言主要還是多練多寫，做幾道習題以鞏固學習過的知識。一、 //編寫程式，統計出字串“want you to know one thing”中字母n和字母o的出現次數。 public class Test5_1{ public static vo

點擊之後變色，還切換背景

sed ide 顏色 androi black als guide ted cte 1，新建xml文件存放到drawble目錄下切換顏色 <?xml version="1.0" encoding="utf-8"?><selector xmlns:andr

css3實現網格背景,background-image，background-size

mage cover .cn 技術尺寸查看 height tag 背景圖像用純css3實現網格背景，應該怎麽做呢？需要給容器設置background-image,background-size屬性 .container{ backgro

CSS3 基礎(1)——選擇器詳解

hover 代碼 -o this site 特征 child ack ble CSS3選擇器詳解一、屬性選擇器　　在CSS3中，追加了三個屬性選擇器分別為：[att*=val]、[att^=val]和[att$=val]，使得屬性選擇器有了通配符的概念。選

第95天：CSS3 邊框、背景和文字效果

決定 shadow css3多列應該 bre column set 動畫 css3 　　1、CSS3邊框： border-radius：CSS3圓角邊框。在 CSS2 中添加圓角矩形需要技巧，我們必須為每個圓角使用不同的圖片，在 CSS3 中，創建圓角是非常容易的，在

css3基礎 text-shadow 文字陰影簡單示例

ont cast chrome 學習學習資源 pos type round doctype 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

css3基礎 :target 目標偽類選擇器簡單示例

pos url ctype itl w3cschool ont 錨點網頁 name 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

css3基礎 color:rgba 文字顏色半透明簡單示例

學習 logs school con har win src 文字顏色 www 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

css3基礎 :nth-last-child(3n) 簡單示例

src nth author post 分享圖片 oct ide charset www 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

css3基礎 :nth-child(odd奇/even偶) 簡單示例

w3c oct 學習資源技術分享 eve back browser child src 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

css3基礎 :nth-child(3n+1) 簡單示例

log style set 老師 auth tps 圖片 meta 簡單禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

css3基礎 text-shadow 凹凸文字簡單示例

studio class author round gpo style lock body 交叉禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。

css3基礎 ::first-letter/line 設置首個漢字/首行的樣式

ack css3 meta 思考 win con visual 學習資源 type 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

css3基礎-切換背景影象綜合練習題

相關推薦