WEB开发者-分享WEB开发知识,让开发变得更简单!

过渡效果 loding 动画 animation

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title></title>
<style>

  • {
    margin: 0px;
    padding: 0px;
    }
    .Load {
    margin: auto;
    margin-top: 200px;
    width: 240px;
    height: 20px;
    padding: 5px;
    }
    .Load div {
    float: left;
    margin: 0 10px;
    width: 20px;
    height: 20px;
    background: #F95F4A;
    border-radius: 50%;
    }
    @keyframes myfirst1 {
    90% {
    background: #fff;
    }
    }
    @keyframes myfirst2 {
    90% {
    background: #fff;
    }
    }
    @keyframes myfirst3 {
    90% {
    background: #fff;
    }
    }
    @keyframes myfirst4 {
    90% {
    background: #fff;
    }
    }
    @keyframes myfirst5 {
    90% {
    background: #fff;
    }
    }
    @keyframes myfirst6 {
    90% {
    background: #fff;
    }
    }
    .Dot1 {
    animation: myfirst1 1.8s infinite;
    animation-delay: 0.3s;
    }
    .Dot2 {
    animation: myfirst1 1.8s infinite;
    animation-delay: 0.6s;
    }
    .Dot3 {
    animation: myfirst1 1.8s infinite;
    animation-delay: 0.9s;
    }
    .Dot4 {
    animation: myfirst1 1.8s infinite;
    animation-delay: 1.2s;
    }
    .Dot5 {
    animation: myfirst1 1.8s infinite;
    animation-delay: 1.5s;
    }
    .Dot6 {
    animation: myfirst1 1.8s infinite;
    animation-delay: 1.8s;
    }
    </style>
    </head>
    <body>
    <div class="Load">
    <div class="Dot1"></div>
    <div class="Dot2"></div>
    <div class="Dot3"></div>
    <div class="Dot4"></div>
    <div class="Dot5"></div>
    <div class="Dot6"></div>
    </div>
    </body>
    </html>

本文链接:https://www.webkfz.com/WEBkF/HTML/94372.html

版权声明:站内所有文章皆来自网络转载,只供分享作用,不代表本站的观点!

发表评论 共有 0 条评论)

联系客服
网站客服 业务合作 QQ
1244305267
公众号
公众号
公众号
返回顶部