zoukankan      html  css  js  c++  java
  • css3动画效果

    5.1动画的基本使用
    制作动画分为两步:
    1. 先定义动画
    2.再使用(调用)动画
    1.用keyframes定义动画(类似定义类选择器)

    @keyframes 动画名称{
                0%{
                    
                }
                100%{
    
                }
            }

    动画序列

    0%是动画的开始, 100%是动画的完成。这样的规则就是动画序列。
    ●在 @keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
    ●动画是使元素从一 种祥式逐渐变化为另-种样式的效果。您可以改变任意多的样式任意多的次数。
    请用百分比来规定变化发生的时间,或用关键词"from"和"to" ,等同于0%和100%。

    同时设置多个动画样式用逗号隔开

    2.元素使用动画
    div {
    200px;
    height: 200px;
    background- - color: aqua;
    margin:
    100px auto;
    /★调用动画 */
    animation-name:动画名称;
    /★持续时间★
    animation-duration:持续时间;
    }

    5.3动画简写属性
    animation :动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;
    animation: myfirst 5s linear 2s infinite alternate;

    ●简写属性里面不包含 animation-play-state

    暂停动画: animation-play-state: puased; 经常和鼠标经过等其他配合使用
    想要动画走回来,而不是直接跳回来: animation-direction : alternate

    子动画结束后,停在结束位置: animation- fll-mode : forwards

     打字机效果:

    <style>
            @keyframes w {
                0% {
                     0;
                }
    
                100% {
                     200px;
                }
            }
    
            div {
                overflow: hidden;
                font-size: 20px;
                height: 30px;
                 0;
                background-color: pink;
                animation-name: w;
                animation-duration: 4s;
                animation-fill-mode: forwards;
                animation-timing-function: steps(10);
            }
        </style>
    </head>
    
    <body>
        <div>世纪佳缘我在这里等你</div>
    </body>

    精妙之处:盒子的总宽度是200px,而一个字体的大小是20px,10个正好是200px,恰好又有10步,所以一步会出来一个字体。

    轮播图案例

    在这整个动画里面,如33%和42%这样两个left值是相同的,是为了当轮播图转到图片位置时可以暂时停留一下。这样更符合轮播图的风格

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>轮播图练习</title>
        <style>
            @keyframes moves {
                0% {
                    left: 0px;
                }
    
                23% {
                    left: 0px;
                }
    
                33% {
                    left: -400px;
                }
    
                42% {
                    left: -400px;
                }
    
                53% {
                    left: -800px;
                }
    
                67% {
                    left: -800px;
                }
    
                80% {
                    left: -1200px;
                }
    
                90% {
                    left: -1200px;
                }
    
                100% {
                    left: -1600px;
                }
            }
    
            .window {
                position: relative;
                 400px;
                height: 200px;
                overflow: hidden;
                margin: 0 auto;
            }
    
            .move {
                position: absolute;
                top: 0;
                left: 0;
                 1600px;
                height: 200px;
                overflow: hidden;
                border: 1px solid #ccc;
                animation: moves 9s linear infinite;
            }
    
            .move img {
                float: left;
                 400px;
                height: 200px;
            }
        </style>
    </head>
    
    <body>
        <div class="window">
            <div class="move">
                <img src="images/lunbotu1.jpg" alt="">
                <img src="images/lunbotu2.jpg" alt="">
                <img src="images/touxiang1.jpg" alt="">
                <img src="images/touxiang2.jpg" alt="">
            </div>
        </div>
    </body>
    
    </html>
  • 相关阅读:
    使用vs code开发.net core2.2时OmniSharp.MSBuild.ProjectLoader无法解析"xxx"的解决方法
    An unexpected exception occurred while binding a dynamic operation 错误的一种情况
    node excel export包导致find函数被覆盖
    C#字典Dictionay多线程读是否是安全的
    mongodb数据分组按字符串split
    IIS做反向代理重定向到NodeJS服务器
    .net core 时间戳unix与本地时间互转、获取当前时间戳
    使用Postman调试asp.net core 控制器的action
    监听浏览器tab选项卡选中事件,点击浏览器tab标签页回调事件,浏览器tab切换监听事件
    vue、element-ui开发技巧
  • 原文地址:https://www.cnblogs.com/echol/p/12860265.html
Copyright © 2011-2022 走看看