花花丹的代码

花花丹

女上海 Web前端工程师更多信息

505h 学习时长

15902 经验

8 积分

25 关注

38 粉丝

课程 \ 十天精通CSS3

十天精通CSS3

代码 80 问答 0

按时间按章节

12-4 制作3D旋转视频展示区

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body {

          margin-top: 5em;

          text-align: center;

          color: #414142;

          background: rgb(246,241,232);

          /*任务一、制作多背景*/

          background: radial-gradient(farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%),url(http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg);

          /*任务二、控制背景图像尺寸*/

          background-size: cover;

        }



        h1, em, #information {

          display: block;

          font-size: 25px;

          font-weight: normal;

          margin: 2em auto;

        }



        a {

          color: #414142;

          font-style: normal;

          text-decoration: none;

          font-size: 20px;

        }



        a:hover {

          text-decoration: underline;

        }



        #container {

          margin: 0 auto;

          width: 1024px;

        }



        .wrapper {

          display: inline-block;

          width: 310px;

          height: 100px;

          vertical-align: top;

          margin: 1em 1.5em 2em 0;

          cursor: pointer;

          position: relative;

          font-family: Tahoma, Arial;

          -webkit-perspective: 4000px;

          -moz-perspective: 4000px;

          -ms-perspective: 4000px;

          -o-perspective: 4000px;

          perspective: 4000px;

        }



        .item {

          height: 100px;

          -webkit-transform-style: preserve-3d;

          -moz-transform-style: preserve-3d;

          -ms-transform-style: preserve-3d;

          -o-transform-style: preserve-3d;

          transform-style: preserve-3d;

          /*任务三、给每个列表项添加过渡动画效果*/

          transition: transform .6s

        }



        .item:hover {

          /*任务四、悬浮状态改变每个列表项的transform效果*/

          transform: translateZ(-50px) rotateX(95deg);

        }



        .item img {

          display: block;

          position: absolute;

          top: 0;

          /*任务五、设置列表项图片的圆角和阴影效果*/

          border-radius: 15px;

          box-shadow: 5px 8px 10px rgba(0,0,0,0.3);

          -webkit-transform: translateZ(50px);

          -moz-transform: translateZ(50px);

          -ms-transform: translateZ(50px);

          -o-transform: translateZ(50px);

          transform: translateZ(50px);

          -webkit-transition: all .6s;

          -moz-transition: all .6s;

          -ms-transition: all .6s;

          -o-transition: all .6s;

          transition: all .6s;

          width: 310px; 

          height: 100px;

        }



        .item .information {

          display: block;

          position: absolute;

          top: 0;

          height: 80px;

          width: 290px;

          text-align: left;

          border-radius: 15px;

          padding: 10px;

          font-size: 12px;

          text-shadow: 1px 1px1px rgba(255,255,255,0.5);

          box-shadow: none;

          background: rgb(236,241,244);

          /*任务六、给底层显示文本的层级设置渐变效果*/

          background: linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);

          -webkit-transform: rotateX(-90deg) translateZ(50px);

          -moz-transform: rotateX(-90deg) translateZ(50px);

          -ms-transform: rotateX(-90deg) translateZ(50px);

          -o-transform: rotateX(-90deg) translateZ(50px);

          transform: rotateX(-90deg) translateZ(50px);

          -webkit-transition: all .6s;

          -moz-transition: all .6s;

          -ms-transition: all .6s;

          -o-transition: all .6s;

          transition: all .6s;

        }



        .information strong {

          display: block;

          margin: .2em 0 .5em 0;

          font-size: 20px;

          font-family: "Oleo Script";

        }

        .item:hover img {

          /*任务七、列表项悬浮状态时，去掉图片的阴影效果*/

          box-shadow: none;

          border-radius: 15px;



        }



        .item:hover .information {

          box-shadow: 0px 3px 8px rgba(0,0,0,0.3);

          border-radius: 3px;

        }

    </style>

</head>

<body>

    <div id="container">

        <h1>CSS3 3D变形制作视频展示区</h1>

        <div class="wrapper">

            <div class="item">

                <img src="http://pic2.qiyipic.com/image/20140415/4e/32/5f/v_105669963_m_601_180_101.jpg" />

                <span class="information">

                <strong>澳门风云</strong>闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴.

                </span>

            </div>

        </div>



        <div class="wrapper">

            <div class="item">

                <img src="http://pic4.qiyipic.com/image/20140417/b5/01/81/a_100003950_m_601_m2_180_101.jpg" />

                <span class="information">

                <strong>改过迁善</strong>该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔，为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。

                </span>

            </div>

        </div>

        

        <div class="wrapper">

            <div class="item">

                <img src="http://pic1.qiyipic.com/common/lego/20140521/4515581d06cc4d5b8ab320da2cf3778d.jpg" />

                <span class="information">

                <strong>父子刑警</strong>本剧改编自雫井修介小说《Bitter Blood》。剧中，新晋刑警•佐原夏辉（佐藤健饰）被分配到银座警察

                </span>

            </div>

        </div>

        

        <div class="wrapper">

            <div class="item">

                <img src="http://pic5.qiyipic.com/image/20140319/7a/8d/4f/a_100003478_m_601_m1_180_101.jpg" />

                <span class="information">

                <strong>果宝特攻3</strong>果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界

                </span>

            </div>

        </div>

        <div class="wrapper">

            <div class="item">

                <img src="http://pic0.qiyipic.com/image/20140517/ce/e8/42/v_106167752_m_601_180_101.jpg" />

                <span class="information">

                <strong>红眼</strong>1988年7月16日，从汉城始发的列车发生了一起严重的交通事故，造成100多人死亡。

                </span>

            </div>

        </div>

        <div class="wrapper">

            <div class="item">

                <img src="http://pic6.qiyipic.com/image/20140303/da/e9/aa/v_105073913_m_601_180_101.jpg" />

                <span class="information">

                <strong>熊出没之夺宝熊兵</strong>一场漆黑雨夜的意外事故，一段笑料十足的误打误撞，将两个外表相似却内容各异的箱子调换。

                </span>

            </div>

        </div>

    </div>

</body>

</html>

2015-07-23 查看完整代码

9-10 制作3D旋转导航综合练习题

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>制作3D旋转导航</title>

  <style type="text/css">

    @import url("http://www.w3cplus.com/demo/css3/base.css");

    /*任务一：引入本地字体文件*/

    @font-face {

      font-family: 'sansationregular';

      src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');

      src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix') format('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'),

      url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff') format('woff'),

      url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf') format('truetype'),

      url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular') format('svg');

      font-weight: normal;

      font-style: normal;

    }



    body {

      background-color:#edecec;

    }



    /* basic menu styles */

    .nav-menu {

      display: block;

      background: #74adaa;

      width:950px;

      margin: 50px auto 150px;

    }

    .nav-menu > li {

      display: inline;

      float:left;           

      border-right:1px solid #94c0be;

    }

    .nav-menu > li:last-child {

      border-right: none;

    }

    .nav-menu li a {

      color: #fff;

      display: block;

      text-decoration: none;

      /*调用本地字体*/

      font-family:sansationregular;

      -webkit-font-smoothing: antialiased;

      -moz-font-smoothing: antialiased;

      font-smoothing: antialiased;

      text-transform: capitalize;

      overflow: visible;

      line-height: 20px;

      font-size: 20px;

      padding: 15px 30px 15px 31px;           

    }





    .three-d {

      /* 任务三、设置3D舞台布景 */

      -webkit-perspective: 200px;

      -moz-perspective: 200px;

      -ms-perspective: 200px;

      -o-perspective: 200px;

      perspective: 200px;

      /*任务四、设置3D舞台布景过渡效果*/

  /*  -webkit-transition: all .07s linear;

    -moz-transition: all .07s linear;

    -ms-transition: all .07s linear;

    -o-transition: all .07s linear;

    transition: all .07s linear;*/

    position: relative;

  }



  .three-d:not(.active):hover {

    cursor: pointer;

  }



  /*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/

  .three-d:not(.active):hover .three-d-box, 

  .three-d:not(.active):focus .three-d-box {

    -wekbit-transform: translateZ(-25px) rotateX(90deg);

    -moz-transform: translateZ(-25px) rotateX(90deg);

    -o-transform: translateZ(-25px) rotateX(90deg);

    -ms-transform: translateZ(-25px) rotateX(90deg);

    transform: translateZ(-25px) rotateX(90deg);

  }



  .three-d-box {

    /*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/

    -webkit-transition: all .3s ease-out;

    -moz-transition: all .3s ease-out;

    -ms-transition: all .3s ease-out;

    -o-transition: all .3s ease-out;

    transition: all .3s ease-out;

    -webkit-transform: translatez(-25px);

    -moz-transform: translatez(-25px);

    -ms-transform: translatez(-25px);

    -o-transform: translatez(-25px);

    transform: translatez(-25px);

    -webkit-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;

    -ms-transform-style: preserve-3d;

    -o-transform-style: preserve-3d;

    transform-style: preserve-3d;

    -webkit-pointer-events: none;

    -moz-pointer-events: none;

    -ms-pointer-events: none;

    -o-pointer-events: none;

    pointer-events: none;

    position: absolute;

    top: 0;

    left: 0;

    display: block;

    width: 100%;

    height: 100%;

  }



  /*任务七、给导航设置3D前，与3D后变形效果*/

  .front {

    -webkit-transform: rotatex(0deg) translatez(25px);

    -moz-transform: rotatex(0deg) translatez(25px);

    -ms-transform: rotatex(0deg) translatez(25px);

    -o-transform: rotatex(0deg) translatez(25px);

    transform: rotatex(0deg) translatez(25px);

  }



  .back {

    -webkit-transform: rotatex(-90deg) translatez(25px);

    -moz-transform: rotatex(-90deg) translatez(25px);

    -ms-transform: rotatex(-90deg) translatez(25px);

    -o-transform: rotatex(-90deg) translatez(25px);

    transform: rotatex(-90deg) translatez(25px);

    color: #FFE7C4;

  }



  .front, .back {

    display: block;

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    background: #74adaa;

    padding: 15px 30px 15px 31px;   

    color: white;

    -webkit-pointer-events: none;

    -moz-pointer-events: none;

    -ms-pointer-events: none;

    -o-pointer-events: none;

    pointer-events: none;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

  }

  /*任务八、设置导航当前状态与悬浮状态下的背景效果*/

  .nav-menu li .active .front,

  .nav-menu li .active .back,

  .nav-menu li a:hover .front,

  .nav-menu li a:hover .back {

    background-color: #51938f;

    -webkit-background-size: 5px 5px;

    background-size: 5px 5px;

    background-position: 0 0, 30px 30px;

    background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

    background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

    background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

    background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

    background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

  }

  .nav-menu ul {

    position: absolute;

    text-align: left;

    line-height: 40px;

    font-size: 14px;

    width: 200px;

    -webkit-transition: all 0.3s ease-in;

    -moz-transition: all 0.3s ease-in;

    -ms-transition: all 0.3s ease-in;

    -o-transition: all 0.3s ease-in;

    transition: all 0.3s ease-in;

    -webkit-transform-origin: 0px 0px;

    -moz-transform-origin: 0px 0px;

    -ms-transform-origin: 0px 0px;

    -o-transform-origin: 0px 0px;

    transform-origin: 0px 0px;

    -webkit-transform: rotateX(-90deg);

    -moz-transform: rotateX(-90deg);

    -ms-transform: rotateX(-90deg);

    -o-transform: rotateX(-90deg);

    transform: rotateX(-90deg);

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility: hidden;

    -ms-backface-visibility: hidden;

    -o-backface-visibility: hidden;

    backface-visibility: hidden;

  }

  /*任务九、显示下拉导航菜单，并其设置一个变形效果*/

  .nav-menu > li:hover ul {

    display: block;

    -webkit-transform: rotateX(0deg);

    -moz-transform: rotateX(0deg);

    -ms-transform: rotateX(0deg);

    -o-transform: rotateX(0deg);

    transform: rotateX(0deg);

  }

</style>

</head>

<body>

  <div id="nav">

    <ul class="nav-menu clearfix unstyled">

      <li><a href="#" class="three-d active">

        Home

        <span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>

      </a></li>

      <li><a href="#" class="three-d">

        Services

        <span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>

      </a></li>

      <li><a href="#" class="three-d">

        Products

        <span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span>

      </a></li>

      <li><a href="#" class="three-d">

        About

        <span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>

      </a></li>

      <li><a href="#" class="three-d">

        Contact

        <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>

      </a></li>

      <li><a href="#" class="three-d">

        Blog

        <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span></a>

        <ul class="clearfix unstyled drop-menu">

          <li><a href="#" class="three-d">

            Html5

            <span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>

          </a></li>

          <li><a href="#" class="three-d">

            Css3

            <span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>

          </a></li>

          <li><a href="#" class="three-d">

            JavaScript

            <span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>

          </a></li>

          <li><a href="#" class="three-d">

            Videogames

            <span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span>

          </a></li>

        </ul>

      </li>

      <li><a href="#" class="three-d">

        Shop On-line

        <span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span>

      </a></li>

    </ul>

  </div>

</body>

</html>

2015-07-23 查看完整代码

7-8 切换背景图像综合练习题

<!DOCTYPE html>

<html lang="en">

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

        }

        /*任务一、设置不同列表的背景色*/

        li:nth-of-type(1) a{

            background-color: #02646e;

        }

        li:nth-of-type(2) a{

            background-color: #eb0837;

        }

        li:nth-of-type(3) a{

            background-color: #67b374;

        }    

        li:nth-of-type(4) a{

            background-color: #e6674a;

        }    

        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(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg) no-repeat center;

        }

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

            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg) no-repeat center;

        }

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

            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg) no-repeat center;

        }

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

            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg) no-repeat center;

        }

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

            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.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;

        }

        /*任务六、点击综略图，切换背景图*/

        /*背景图从左向右出现*/

        .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 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="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>

2015-07-23 查看完整代码

12-3 CSS生成内容

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>CSS生成内容</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<h1>我是标题，在我前面插入内容吧</h1>

</body>

</html>

2015-07-07 查看完整代码

12-2 CSS3外轮廓属性

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>CSS3外轮廓属性</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div>

</div>

</body>

</html>

2015-07-07 查看完整代码

12-1 自由缩放属性resize

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>自由缩放属性resize</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<textarea name="" id="" cols="30" rows="10"></textarea>

</body>

</html>

2015-07-07 查看完整代码

11-8 Responsive设计——不同设备的分辨率设置

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>columns</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="wrapper">

  <div class="left"></div>

  <div class="content"></div>

</div>

</body>

</html>

2015-07-07 查看完整代码

11-7 Responsive设计——meta标签

2015-07-07 查看完整代码

11-6 Responsive布局技巧

2015-07-07 查看完整代码

11-5 Responsive设计（二）

2015-07-07 查看完整代码

11-4 Responsive设计（一）

2015-07-07 查看完整代码

11-3 Media Queries使用方法

2015-07-07 查看完整代码

11-2 media queries——媒体类型（二）

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8">

<title>变形与动画</title>

<style type="text/css">

    @media screen{

    选择器{/*你的样式代码写在这里…*/}

}

</style>

</head> 

<body>



</body>

</html>

2015-07-07 查看完整代码

11-1 Media Queries——媒体类型（一）

2015-07-07 查看完整代码

10-9 CSS3 伸缩布局（二）

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>伸缩布局</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<img src="http://img1.sycdn.imooc.com//5365d7b10001e8d506350529.jpg" alt="" />

</body>

</html>

2015-07-07 查看完整代码

10-8 CSS3 伸缩布局（一）

2015-07-07 查看完整代码

10-7 CSS3 盒子模型

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>盒子模型</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="header"><h1>Header Content</h1></div>

<div id="page">

  <div class="main"><h1>Main Content</h1></div>

  <div class="sidebar"><h1>Sidebar Content</h1></div>

</div>

<div id="footer"><h1>Footer Content</h1></div>  

</body>

</html>

2015-07-01 查看完整代码

10-6 CSS3 跨列设置column-span

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>跨列设置column-span</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="columns">

  <h2>我要分列显示</h2>

  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>

  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>

  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>

  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>

  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>

  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>

</div>

</body>

</html>

2015-07-01 查看完整代码

10-5 CSS3 列表边框column-rule

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>列表边框column-rule</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="columns">

  <h2>我要分列显示</h2>

  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>

  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>

  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>

</div>

</body>

</html>

2015-07-01 查看完整代码

10-4 CSS3 列间距column-gap

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>列间距column-gap</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="columns">

  <h2>我要分列显示</h2>

  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>

  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>

  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>

</div>

</body>

</html>

2015-07-01 查看完整代码

热搜

最近搜索清空

花花丹

十天精通CSS3