h5css3_02练习

基础案例

01-模拟二维码

训练描述

利用CSS3动画属性，模拟扫描二维码的场景

训练提示

1. 在大盒子中上下正常排版两张图片
2. 利用动画，让第二张图片上下发生位移
3. 设置动画属性，注意动画设置的兼容问题

操作步骤

1. 创建index文件，新建css文件夹，创建base.css文件并初始化基本代码，新建images文件夹

2. 创建index.css保存至css文件夹，首页html文件引入css样式

3. 编写结构代码

   • 创建父盒子，内部插入两张图片，二维码和扫描的光线

     <div class="v-code">
            <img class="erweima" src="images/57b280b496dee47507111c56NRN73rVj.png" alt="">
            <img class="line" src="images/line_dd0b705.png" alt="">
     </div>

   • 排版父盒子和两个图片的位置

     body {
        padding: 50px;
     }
     
     .v-code {
        width: 145px;
         height: 240px;
         padding-top: 47px;
         float: left;
         position: relative;
         background: url(../images/index_z_71df05e.png);
         background-position: 0px 0px;
         background-repeat: no-repeat;
     
     }
     
     .v-code .erweima {
        display: block;
        margin: 0 auto;
        width: 107px;
     }
     
     .v-code .line {
        position: absolute;
         left: 12px;
         top: 45px;
         -webkit-animation: mainbarcode 4s linear infinite;
         -moz-animation: mainbarcode 4s linear infinite;
         -ms-animation: mainbarcode 4s linear infinite;
         animation: mainbarcode 4s linear infinite;
     }

   • 声明动画

     @keyframes mainbarcode {
        0% {
            -webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
        50% {
            -webkit-transform: translate3d(0,100px,0);
            -moz-transform: translate3d(0,100px,0);
            -ms-transform: translate3d(0,100px,0);
            transform: translate3d(0,100px,0);
        }
        100% {
            -webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
     }

4. 打开首页文件，观察效果

02-人物走动f4

训练描述

当浏览此网页的时候，如果停顿等待的时间较长，将会出现4个小人物走动，滚动或者鼠标经过就消失

训练提示

1. 先进行基本的布局，排出来具体的大小位置，在底部均匀分布

2. 给每个盒子设置背景，然后创建公共移动的动画

3. 创建该变背景的动画，将两个动画引入在不同盒子上，重复执行

操作步骤

? 1，创建index文件，新建css文件夹并创建base.css文件，初始化css样式

? 2，新建images文件夹，在首页文件中引入样式

? 3，创建基本的结构

    <div class="f4_box">
        <div class="walk01">
            <div class="west-01"></div>
        </div>
        <div class="walk02">
            <div class="west-02"></div>
        </div>
        <div class="walk03">
            <div class="west-03"></div>
        </div>
        <div class="walk04">
            <div class="west-04"></div>
        </div>
    </div>

? 4，排版基本的样式

.f4_box {
    position: fixed;/*固定*/
    width: 100%;
    height: 175px;
    left: 0;
    bottom: 0;
    z-index: 99;
    -webkit-transition: all 3.2s ease;
    -moz-transition: all 3.2s ease;
    -ms-transition: all 3.2s ease;
    transition: all 3.2s ease;
}

.walk01 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 154px;
    height: 121px;
    opacity: 0;
    -webkit-animation: move01 15s linear infinite;
    -moz-animation: move01 15s linear infinite;
    -ms-animation: move01 15s linear infinite;
    animation: move01 15s linear infinite;
}

.west-01 {
    width: 154px;
    height: 121px;
    background-image: url(../images/txgc_6d0e9e5.png);
    background-repeat: no-repeat;
    -webkit-animation: play01 .4s steps(2) infinite;
    -moz-animation: play01 .4s steps(2) infinite;
    -ms-animation: play01 .4s steps(2) infinite;
    animation: play01 .4s steps(2) infinite;
}

@keyframes move01 {
    0% {
        -webkit-transform: translate(-200px,0);
        -moz-transform: translate(-200px,0);
        -ms-transform: translate(-200px,0);
        transform: translate(-200px,0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(1920px,0);
        -moz-transform: translate(1920px,0);
        -ms-transform: translate(1920px,0);
        transform: translate(1920px,0);
        opacity: 1;
    }
}


@keyframes play01 {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -308px 0;
    }
}

? 5，设置其他盒子的样式

.walk02 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 167px;
    height: 176px;
    opacity: 0;
    -webkit-animation: move01 15s linear 2s infinite;
    -moz-animation: move01 15s linear 2s infinite;
    -ms-animation: move01 15s linear 2s infinite;
    animation: move01 15s linear 2s infinite;
}

.west-02 {
    width: 167px;
    height: 176px;
    background-image: url(../images/txgh_fee2457.png);
    background-repeat: no-repeat;
    -webkit-animation: play02 .4s steps(2) infinite;
    -moz-animation: play02 .4s steps(2) infinite;
    -ms-animation: play02 .4s steps(2) infinite;
    animation: play02 .4s steps(2) infinite;
}

@keyframes play02 {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -334px 0;
    }
}

.walk03 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 161px;
    height: 149px;
    opacity: 0;
    -webkit-animation: move01 15s linear 4s infinite;
    -moz-animation: move01 15s linear 4s infinite;
    -ms-animation: move01 15s linear 4s infinite;
    animation: move01 15s linear 4s infinite;
}

.west-03 {
    width: 161px;
    height: 149px;
    background-image: url(../images/txgl_c15cfd8.png);
    background-repeat: no-repeat;
    -webkit-animation: play03 .4s steps(2) infinite;
    -moz-animation: play03 .4s steps(2) infinite;
    -ms-animation: play03 .4s steps(2) infinite;
    animation: play03 .4s steps(2) infinite;
}

@keyframes play03 {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -322px 0;
    }
}

.walk04 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 171px;
    height: 157px;
    opacity: 0;
    -webkit-animation: move01 15s linear 6s infinite;
    -moz-animation: move01 15s linear 6s infinite;
    -ms-animation: move01 15s linear 6s infinite;
    animation: move01 15s linear 6s infinite;
}

.west-04 {
    width: 171px;
    height: 157px;
    background-image: url(../images/txgq_d281c9b.png);
    background-repeat: no-repeat;
    -webkit-animation: play04 .4s steps(2) infinite;
    -moz-animation: play04 .4s steps(2) infinite;
    -ms-animation: play04 .4s steps(2) infinite;
    animation: play04 .4s steps(2) infinite;
}

@keyframes play04 {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -342px 0;
    }
}

03-旋转小动画

训练描述

页面一打开，就有一个小图标一直旋转，当鼠标经过的时候，旋转停下来了

训练提示

1. 创建index文件，新建css文件创建base.css文件，完成css初始化

2. 在首页文件中引入文件，完成结构布局

3. 完成样式排版，当鼠标经过，调用动画的播放属性，让它停下来

操作步骤

1. 创建基本结构

   <div class="play-video"></div>

2. 设置基本样式和鼠标经过样式

   html, body {
    height: 100%;
    background: url(../images/bg_81ab3d6.jpg) no-repeat center top;
   }
   
   .play-video {
    position: absolute;
       top: 280px;
       right: 380px;
       width: 93px;
       height: 93px;
       margin-left: -47px;
       z-index: 4;
   }
   
   .play-video::before,
   .play-video::after {
    display: block;
       width: 100%;
       height: 100%;
       content: "";
       position: absolute;
   }
   
   .play-video::before {
       background-image: url(../images/index_z_9769688.png);
       background-position: -744px -819px;
       background-repeat: no-repeat;
    -webkit-animation: rotate1 2s linear infinite 300ms 0 ease;
       -moz-animation: rotate1 2s linear infinite 300ms 0 ease;
       -ms-animation: rotate1 2s linear infinite 300ms 0 ease;
       animation: rotate1 2s linear infinite 300ms 0 ease;
       -moz-animation: rotate1 2s linear infinite;
       -webkit-animation: rotate1 2s linear infinite;
       -o-animation: rotate1 2s linear infinite;
       -ms-animation: rotate1 2s linear infinite;
       animation: rotate1 2s linear infinite;
   }
   
   .play-video::after {
    position: absolute;
       left: 50%;
       top: 50%;
       width: 21px;
       height: 25px;
       margin-top: -12px;
       margin-left: -10px;
       background-image: url(../images/index_z_9769688.png);
       background-position: -2290px -107px;
       background-repeat: no-repeat;
   }
   
   @keyframes rotate1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
   }

3. 设置鼠标经过样式

   .play-video:hover {
    cursor: pointer;
   }
   
   .play-video:hover::before {
    -webkit-animation-play-state: paused;
       -moz-animation-play-state: paused;
       -o-animation-play-state: paused;
       animation-play-state: paused;
       background-repeat: no-repeat;
   }

扩展案例

04-背景变换

训练描述

1，以往的背景经过都是半透明盒子遮罩直上直下或者渐入渐出

2，以斜着进入离开需要用到CSS3的斜切

训练提示

1. 保存图片，新建文件，初始化样式：
2. 设置鼠标经过样式，利用放大的斜切的原理，让父盒子溢出隐藏

操作步骤

1. 新建基本的结构

<div class="content">
    <a href="javascipt:;"></a>
</div>

1. 创建CSS样式

.content {
    width: 275px;
    height: 185px;
    background: url(bgi.jpg) no-repeat;
    margin: 100px auto;
    overflow: hidden;
}
a {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(47, 214, 133, .75);
    opacity: 0;
    transition: all .1s ease-in;
}

1. 设置鼠标经过演示

.content:hover a {
    opacity: 1;
    /*动画引入*/
    animation: donghua .3s forwards;
}

/*动画声明*/
@keyframes donghua {
    from {
        transform: translateX(130%) skewX(-45deg) scale(1);/*skewX  斜偏x */
    }
    to {
        transform: translateX(0) skewX(-45deg) scale(2);
    }
}

h5css3_02练习

原文：https://www.cnblogs.com/fly-book/p/12096127.html