使用 css 的 keyframe 实现 loading 动画

最新推荐文章于 2021-12-14 16:53:22 发布

weixin_34232744

最新推荐文章于 2021-12-14 16:53:22 发布

阅读量356

点赞数

原文链接：http://www.cnblogs.com/eleven24/p/8648839.html

版权

效果查看：https://jsfiddle.net/rubys/je16qL5k/6/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css animation</title>
  <style>
    body {
      background-color: gray;
    }
    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform:  rotate(360deg); } }
    @keyframes spin { 100% { -webkit-transform:  rotate(360deg); transform: rotate(360deg); } }

    .preloader {
      animation-name: spin;
      animation-duration: .5s;
      animation-timing-function: linear;
      -webkit-animation-delay: 0s;
      animation-animation-delay: 0s;
      animation-iteration-count: infinite;
      animation-direction: normal;
      animation-fill-mode: none;
      animation-play-state: running;
      border: 2px solid transparent;
      border-top: 2px solid #fff;
      border-left: 2px solid #fff;
      border-radius: 50px;
      opacity: 1;
      width: 32px;
      height: 32px;
      cursor: wait;
      display: block;
      transition: all 400ms ease !important;
      -webkit-animation: spin .6s linear infinite;
      -o-animation: spin .6s linear infinite;
      animation: spin .6s linear infinite;
    }

    #animation {

    }
  </style>
</head>
<body>

<div id="animation" class="preloader"></div>

</body>
</html>

转载于:https://www.cnblogs.com/eleven24/p/8648839.html

weixin_34232744

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用 css 的 keyframe 实现 loading 动画

效果查看：https://jsfiddle.net/rubys/je16qL5k/6/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css animation</title> <st...
复制链接

扫一扫