h5css3_02练习

其他 2019-12-25 13:50:55 阅读次数: 0

基础案例

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

猜你喜欢

转载自www.cnblogs.com/fly-book/p/12096127.html
今日推荐
探索 api.maynor1024.live：一站式 AI 服务平台
AI一键去衣技术：窥见深度学习在图像处理领域的革命(最后有彩蛋)
艾体宝案例 | 使用Redis和Spring Ai构建rag应用程序
Apple M1 vs 高通8Gen2 vs Apple A12Z各方面比较
【升职加薪必备架构图】Springboot学习路线汇总_springboot四层架构流程图
与Apollo共创生态：Apollo7周年大会自动驾驶生态利剑出鞘
Spring Boot 3.0：未来企业应用开发的基石
Java 的 AI 前景光明
国内首个智能体生态大会！2024百度万象大会定档5月30日
开源一周年，青语言新版发布
深入浅出：大型语言模型（LLM）的全面解读
顶会ICLR2024论文Time-LLM：基于大语言模型的时间序列预测
周排行
第五讲：AbstractBean以及Ioc常见注解使用和自动装配
python-re模块学习-正则表达式
黑客攻击常用手段
正则表达式的规则
windwos::mutex
Spring中日志的使用（log4j）
Bootstra5 按钮处理
JVM内存结构-这一篇全部了解
Android的低级错误
Oracle中Cursor, A表a1字段值复制到B表b1字段
每日归档
更多
2024-06-02(4)
2024-06-01(60)
2024-05-31(47)
2024-05-30(4)
2024-05-29(65)
2024-05-28(2)
2024-05-27(56)
2024-05-26(6)
2024-05-25(68)
2024-05-24(65)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022