CSS animation动画loading

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>logging</title>
    <style>
        @keyframes beat{
            70%{
                transform: scale(1,1);
            }
            100%{
                transform: scale(1.3,1.3);
            }
        }
        body{
            margin: 0;
            padding: 0;
            background: #000;
        }
        .box{
            width: 400px;
            height: 450px;
            /*border: 2px solid #000;*/
            margin: 150px auto 0;
            text-align: center;

        }

        .box div{
            float: left;
            width: 10px;
            height: 60px;
            margin: 50px 20px 50px;
            border-radius: 3px;
            border: 1px solid rgba(255,237,151,0.3);
            animation: beat 500ms linear 0s infinite alternate;
            background: #fff;
        }
        .box div:nth-child(1){
            animation-delay: 100ms;
        }
        .box div:nth-child(2){
            animation-delay: 200ms;
        }
        .box div:nth-child(3){
            animation-delay: 300ms;
        }
        .box div:nth-child(4){
            animation-delay: 400ms;
        }
        .box div:nth-child(5){
            animation-delay: 500ms;
        }
        .box div:nth-child(6){
            animation-delay: 600ms;
        }
        .box div:nth-child(7){
            animation-delay: 700ms;
        }

    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>

        <!-- <p>Loading</p> -->
    </div>
</body>
</html>

原文地址:https://www.cnblogs.com/jrri/p/11346940.html

时间: 2024-11-08 03:01:37

CSS animation动画loading的相关文章

css animation动画

在掘金上看到一个大神总结的animation相关东西,感觉很震撼,需要记录一下 主要也是借助chrome devtool来查看相关的属性,然后去调整 自己只知道有 animation-name animation-delay time-function 次数等,其实这些事w3c上写的,只写了6个,还差两个没写 animation-play-state animation-fill-mode 这两个在w3c里面其实也可以找的到,看了下,现在浏览器的支持度其实还是挺不错的了 如下表格算是比较全的了

如何使用JavaScript控制CSS Animations(动画)和Transitions(过渡)

Zach邮件跟我说,上Stack Overflow这类的论坛,他经常碰到一些关于JavaScript控制CSS 动画的问题,又提供给我几个例子.我很久就打算写一些关于这方面的文章,所以很高兴让Zach提出来并促使我写了这个教程. 有时候WEB开发人员认为CSS的动画比JavaScript的动画更难理解.虽然CSS动画有其局限性,但它的性能比大多数JavaScript库更加高效,因为它可以借助硬件加速啊!其效果绝对可以超出我们的预期. CSS animations和transitions再加上点J

基于animation.css实现动画旋转特效

分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap"> <div class="mod_bg"> <div class="bg1"></div> <div class="bg2"></div> <

css animation关于step

animation-timing-function animation-timing-function 规定动画的速度曲线.速度曲线定义动画从一套 CSS 样式变为另一套所用的时间.在平常的取值中,主要有以下几个: 值 描述 linear 动画从头到尾的速度是相同的. ease 默认.动画以低速开始,然后加快,在结束前变慢. ease-in 动画以低速开始. ease-out 动画以低速结束. ease-in-out 动画以低速开始和结束. cubic-bezier(n,n,n,n) 在 cub

超级强大的SVG SMIL animation动画详解

本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有缓存时候是无动画效果,此时您可以试着[右键-新标签页打开图片]. 一.SVG SMIL animation概览 1. SMIL是什么?SMIL不是指「水蜜梨」,而是Synchronized Multimedia Integration Language(同步多媒体集成语言)的首字母缩写简称,是有标准

css3 transition属性变化与animation动画的相似性以及不同点

下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transition属性变化效果 第二个为animation动画效果 是不是已经看出他们之间的相同与不同了吧.对的,他们都可以实现简单的动画效果,但transition变化效果当鼠标离开动画结束时,它还是会持续一段时间的动画并最终返回为元素的初始样式.animation动画效果则不是,当鼠标离开后它会之间立刻结束动

CSS3 Animation动画

Animation自定义动画是CSS制作动画三个属性其中一个,CSS制作动画的三个元素有:Transform,Translate,Animation.元素所应用的动画名称,必须与规则@keyframes关键帧配合使用,因为动画名称由@keyframes定义. 而@keyframes关键帧有自己的语法规则,必须以@keyframes开头,后面接动画名称(自定义,语义化一点更好),然后在加对“{}”,括号中就是一些不同时间段样式规则. @keyframes语法:@keyframes<identifi

CSS Animation 属性

一.animation是CSS3中新增的属性,它可以制作出多种酷炫的动画效果,如果对flash有一定的了解,那这个属性就会很容易学习. 先展示一下简单的动画效果 __ __O 二.下面就来了解一下animation的具体属性. 1.动画名称 1 /*1.name:动画名称*/ 2 /*-webkit-animation-name: kf_play;*/ 3 /*-moz-animation-name: kf_play;*/ 4 /*-o-animation-name: kf_play;*/ 5

css3 animation动画技巧

一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更顺畅,css3动画如何做弧线动画,css3动画是否有动画库,css3帧动画如何快速简单……   为了解决这些折磨人的问题,我们今天来分析一下: 首先介绍css3 Animation动画库: http://daneden.github.io/animate.css/ 基本涵盖了我们常见的基础css3动