css3实现loading效果三

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012987546/article/details/79814841

css3实现定位的动画

使用到的css3的属性：

border-radius: 
rgba(): 
box-shadow:
transform:
animation:

执行的效果：

1.编写布局代码

<!--背景布局-->
<div id="box">
    <!-- 定位动画 -->
    <div class="location"></div>
</div>

2.添加背景样式

 <style>
 #box {
            width: 400px;
            height: 400px;
            background: green;

            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -200px;
        }

        .location{
          position: relative;
          margin: 60px;
        }
        /*背景图片*/
        .location::after{
          /*相对于父亲location定位*/
          position: absolute;
          content: ' ';
          width: 40px;
          height: 20px;
          border-radius: 100%;
          background: rgba(255,255,255,0.3);
        }
 </style>

3.添加定位的图片

       /*定位的图标*/
        .location::before{
            position: absolute;
            top: -25px;
            left: 8px;
            content: '';
            width: 25px;
            height: 25px;
            box-shadow:0px 0px 0px 2px rgba(255,255,255,1); /*模糊尺寸2px*/ 
        }

执行的效果：

4.定位图片加圆角

       /*定位的图标*/
        .location::before{
            position: absolute;
            top: -25px;
            left: 8px;
            content: '';
            width: 25px;
            height: 25px;
            box-shadow:0px 0px 0px 2px rgba(255,255,255,1); /*模糊尺寸2px*/ 
             /*圆角*/
            border-radius: 100% 100% 100% 0px;
        }

执行效果：

5.旋转定位图片

       /*定位的图标*/
        .location::before{
            position: absolute;
            top: -25px;
            left: 8px;
            content: '';
            width: 25px;
            height: 25px;
            box-shadow:0px 0px 0px 2px rgba(255,255,255,1); /*模糊尺寸2px*/ 
             /*圆角*/
            border-radius: 100% 100% 100% 0px;
            /*旋转*/
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

执行效果：

6.定位图片添加上下移动的动画

       /*定位的图标*/
        .location::before{
             /*...*/ 
             /*...*/  
             /*动画*/
            -webkit-animation: upAndDown 1s infinite linear;/*Chrome 16+, Safari 4+*/
            -moz-animation: upAndDown 1s infinite linear;/*FF 5+*/
            -o-keyframes: upAndDown 1s infinite linear;/* Opera */
            -ms-keyframes: upAndDown 1s infinite linear;/*IE 10+*/
            animation: upAndDown 1s infinite linear;
        }
        /*Chrome 16+, Safari 4+*/
        @-webkit-keyframes upAndDown{
            0% {top: -25px;}
            50%{top: -20px;}
            100% {top:-25px; }
        }

        /*FF 5+*/
        @-moz-keyframes upAndDown{
            0% {top: -25px;}
            50%{top: -20px;}
            100% {top:-25px; }
        }

        /* Opera */
        @-o-keyframes upAndDown{
            0% {top: -25px;}
            50%{top: -20px;}
            100% {top:-25px; }
        }

        /*IE 10+*/
        @-ms-keyframes upAndDown{
            0% {top: -25px;}
            50%{top: -20px;}
            100% {top:-25px; }
        }

        /*IE*/
        @keyframes upAndDown{
            0% {top: -25px;}
            50%{top: -20px;}
            100% {top:-25px; }
        }

执行效果：