• 技术文章 >web前端 >css教程

    如何用css快速创建3点加载动画

    藏色散人藏色散人2021-08-25 15:29:28原创284
    在之前的文章《如何使用CSS创建波浪背景?》中给大家介绍了怎么使用CSS创建波浪背景,有需要的朋友可以去阅读了解一下~

    那么本文将给大家介绍在前端开发过程中最常见的一种效果实现,也就是加载动画的实现。

    简单来说,比如常见的网页加载等待的效果loading.....,通常都是动态的加载效果。

    下面我就给大家介绍一种非常简单并且很基础的加载动画的效果实现方法:

    直接上代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <style>
            body {
                margin: 0;
                padding: 0;
                background: black;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                height: 100vh;
            }
    
            .dot1, .dot2, .dot3 {
                background: #fff;
                width: 15px;
                height: 15px;
                border:double;
                border-color:black;
                border-radius: 50%;
                margin: 10px;
            }
    
            .dot1 {
                animation: jump 1.6s -0.32s linear infinite;
                background: #4B0082;
            }
            .dot2 {
                animation: jump 1.6s -0.16s linear infinite;
                background: #B22222;
            }
            .dot3 {
                animation: jump 1.6s linear infinite;
                background: #006400;
            }
    
            @keyframes jump {
                0%, 80%, 100% {
                    -webkit-transform: scale(0);
                    transform: scale(0);
                } 40% {
                      -webkit-transform: scale(2.0);
                      transform: scale(2.0);
                  }
            }
        </style>
    </head>
    <body>
    <div class="dot1"> </div>
    <div class="dot2"></div>
    <div class="dot3"></div>
    </body>
    
    </html>

    效果如下图:

    GIF 2021-8-25 星期三 下午 3-21-59.gif

    下面介绍两个关键属性:

    语法:animation: name duration timing-function delay iteration-count direction fill-mode play-state;

    值 
    animation-name:指定要绑定到选择器的关键帧的名称
    animation-duration:动画指定需要多少秒或毫秒完成
    animation-timing-function:设置动画将如何完成一个周期
    animation-delay:设置动画在启动前的延迟间隔。
    animation-iteration-count:定义动画的播放次数。
    animation-direction:指定是否应该轮流反向播放动画。
    animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
    animation-play-state:指定动画是否正在运行或已暂停。
    initial:设置属性为其默认值。
    inherit:从父元素继承属性。

    使用@keyframes规则可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。

    在动画过程中,可以更改CSS样式的设定多次。指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。

    0%是开头动画,100%是当动画完成。为了获得最佳的浏览器支持,应该始终定义为0%和100%的选择器。

    注: 使用animation属性来控制动画的外观,还使用选择器绑定动画。

    语法:@keyframes animationname {keyframes-selector {css-styles;}}

    值
    animationname:必需的,定义animation的名称。
    keyframes-selector:必需的,动画持续时间的百分比。
    合法值:
    0-100%
    from (和0%相同)
    to (和100%相同)
    注意:可以用一个动画keyframes-selectors。
    css-styles:必需的,一个或多个合法的CSS样式属性。

    PHP中文网平台有非常多的视频教学资源,欢迎大家学习《css视频教程》!

    以上就是如何用css快速创建3点加载动画的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:纯CSS3怎么给文本添加背景图 下一篇:纯CSS3创建边框阴影向外扩散的动画特效
    线上培训班

    相关文章推荐

    • 使用纯css实现简单加载动画效果(代码实例)• css为什么不能正常加载• 纯CSS实现心形加载动画(附源码)• 纯css实现动态条形加载条效果(附源码)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网