码迷,mamicode.com
首页 > 其他好文 > 详细

过渡效果 loding 动画 animation

时间:2018-09-17 17:45:16      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:ofo   st3   border   sof   mat   doc   href   why   oat   

<!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>

过渡效果 loding 动画 animation

标签:ofo   st3   border   sof   mat   doc   href   why   oat   

原文地址:http://blog.51cto.com/zhaoyingyatou/2176185

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!