css实现loading的动画图标

最新推荐文章于 2025-04-11 09:01:11 发布

wenge1477

最新推荐文章于 2025-04-11 09:01:11 发布

阅读量696

点赞数

本文链接：https://blog.youkuaiyun.com/wenge1477/article/details/86500374

版权

1、例

<!DOCTYPE html>
<html>
<head>
   <title>this is animation</title>
   <style type="text/css">
       @keyframes topMove{
           0%{
               transform: rotateZ(0);
           }
           50%{
               transform: rotateZ(45deg);
           }
           100%{
               transform: rotateZ(0);
           }

       }
       @keyframes bottomMove{
           0%{
               transform: rotateZ(0);
           }
           50%{
               transform: rotateZ(-45deg);
           }
           100%{
               transform: rotateZ(0);
           }
       }
       @keyframes bollMove{
           from{
               left:260px;
               opacity: 0;
           }
           to{
               left:80px;
               opacity: 1;

           }
       }

       *{
           margin: 0;
           padding: 0;
       }
       .first{
           width: 300px;
           height: 300px;
           background-color: skyblue;
           position: relative;
           margin: 0 auto;
       }

       .top{
           margin-top: 30px;
           margin-left: 40px;
           width: 0px;
           height: 0px;
           border: 40px solid #fff;
           border-radius: 50%;
           border-right-color: transparent;
           border-bottom-color: transparent;
           position: absolute;
           animation: topMove 2s linear infinite;
       }
       .bottom{
           margin-top: 30px;
           margin-left: 40px;
           width: 0px;
           height: 0px;
           border: 40px solid #fff;
           border-radius: 50%;
           border-right-color: transparent;
           border-top-color: transparent;
           position: absolute;
           animation: bottomMove 2s linear infinite;
       }
       .boll{
           width: 30px;
           height: 30px;
           background-color: #fff;
           position: absolute;
           left:260px;
           margin-top: 55px;
           border-radius: 50%;
           animation: bollMove .5s linear infinite;
       }
   </style>
</head>
<body>

2、例

<!DOCTYPE html>
<html>
<head>
   <title>this is homeword</title>
   <style type="text/css">
       @keyframes movesecond{
           from{
               transform: rotateZ(0deg);
           }
           to{
               transform: rotateZ(360deg);
           }
       }
       @keyframes movethird{
           0%{
               opacity: 0.2;
               transform: scaleX(0.5) scaleY(0.5);

           }
           50%{
               opacity: 1;
               transform: scaleX(1) scaleY(1);

           }
           100%{
               opacity: 0.2;
               transform: scaleX(0.5) scaleY(0.5);
           }
       }
       *{
           margin: 0;
           padding: 0;
       }
       .first{
           width: 300px;
           height: 300px;
           position: relative;
           margin: 0 auto;
           background-color: skyblue;
       }
       .first .second{
           margin-left: 80px;
           margin-top: 80px;
           width: 100px;
           height: 100px;
           border: 10px solid #fff;
           background-color: transparent;
           border-radius: 50%;
           border-top-color: transparent;
           border-bottom-color: transparent;
           animation:movesecond 2s linear infinite;
           position: absolute;
       }
       .first .third{
           width: 0px;
           height: 0px;
           border: 20px solid #fff;
           border-radius: 50%;
           position: absolute;
           margin-left: 120px;
           margin-top: 115px;
           animation: movethird 2s linear infinite;
       }

</style>
</head>
<body>

3、例

<!DOCTYPE html>
<html>
<head>
   <title>this is case2</title>
   <style type="text/css">
       @keyframes move1{
           form{
               transform: rotateZ(0deg);
           }
           to{
               transform: rotateZ(360deg);
           }
       }
       *{
           margin: 0;
           padding: 0;
       }
       .first{
           width: 300px;
           height: 300px;
           position: relative;
           margin: 0 auto;
           position: relative;
           margin: 0 auto;
           background-color: skyblue;
       }
       .first .second{
           width: 100px;
           height: 100px;
           background-color: transparent;
           border: 10px solid #fff;
           border-radius: 50%;
           position: absolute;
           opacity: 0.5
       }
       .first .third{
           width: 100px;
           height: 100px;
           background-color: transparent;
           border: 10px solid #fff;
           border-radius: 50%;
           border-left-color: transparent;
           border-right-color: transparent;
           border-top-color: transparent;
           position: absolute;
           animation: move1 2s linear infinite;
       }