VisualStudio安装加载等待CSS特效

最新推荐文章于 2024-10-01 21:51:05 发布

茫點

最新推荐文章于 2024-10-01 21:51:05 发布

阅读量791

点赞数

分类专栏： Web前端文章标签： css3 等待动画

本文链接：https://blog.csdn.net/peakandyuri/article/details/52317466

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近需要一个加载等待效果的CSS动画样式，想弄一个VS2012-2015版本安装时候的5个小圆点向右奔跑的特效，但在网上搜寻了一圈没有找到（主要是不知道这种加载特效有没有名字），就研究了一下CSS3的动画使用，自己实现了一个。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>奔跑的小球</title>
    <style type='text/css'>
        .spinner {
            margin: auto;
            width: 200px;
            height: 10px;
            text-align: center;
            font-size: 10px;
            position:relative;
            overflow:hidden;
            background-color:gray;
        }

        .spinner > div {
            background-color: white;
            height: 6px;
            width: 6px;
            display: inline-block;
            position: relative;
            top: -30%;
            border-radius: 3px;
        }
        .spinner .rect1{
            left: -62%;
            animation: dot1 5s infinite ease-in-out;
        }
        .spinner .rect2 {
            left: -64%;
            animation: dot2 5s infinite ease-in-out;
            animation-delay: 0.2s;
        }

        .spinner .rect3 {
            left: -68%;
            animation: dot3 5s infinite ease-in-out;
            animation-delay: 0.3s;
        }

        .spinner .rect4 {
            left: -72%;
            animation: dot4 5s infinite ease-in-out;
            animation-delay: 0.4s;
        }

        .spinner .rect5 {
            left: -76%;
            animation: dot5 5s infinite ease-in-out;
            animation-delay: 0.5s;
        }
        @keyframes dot1{0%{transform:translateX(10px);}40%{transform:translateX(160.330002px);}41%{transform:translateX(160.660004px);}42%{transform:translateX(160.990005px);}43%{transform:translateX(161.320007px);}44%{transform:translateX(161.650009px);}45%{transform:translateX(161.980011px);}46%{transform:translateX(162.310013px);}47%{transform:translateX(162.640015px);}48%{transform:translateX(162.970016px);}49%{transform:translateX(163.300018px);}100%{transform:translateX(330px);}}@keyframes dot2{0%{transform:translateX(8px);}40%{transform:translateX(146.630020px);}41%{transform:translateX(146.960022px);}42%{transform:translateX(147.290024px);}43%{transform:translateX(147.620026px);}44%{transform:translateX(147.950027px);}45%{transform:translateX(148.280029px);}46%{transform:translateX(148.610031px);}47%{transform:translateX(148.940033px);}48%{transform:translateX(149.270035px);}49%{transform:translateX(149.600037px);}100%{transform:translateX(316px);}}@keyframes dot3{0%{transform:translateX(6px);}40%{transform:translateX(132.930038px);}41%{transform:translateX(133.260040px);}42%{transform:translateX(133.590042px);}43%{transform:translateX(133.920044px);}44%{transform:translateX(134.250046px);}45%{transform:translateX(134.580048px);}46%{transform:translateX(134.910049px);}47%{transform:translateX(135.240051px);}48%{transform:translateX(135.570053px);}49%{transform:translateX(135.900055px);}100%{transform:translateX(302px);}}@keyframes dot4{0%{transform:translateX(4px);}40%{transform:translateX(119.230057px);}41%{transform:translateX(119.560059px);}42%{transform:translateX(119.890060px);}43%{transform:translateX(120.220062px);}44%{transform:translateX(120.550064px);}45%{transform:translateX(120.880066px);}46%{transform:translateX(121.210068px);}47%{transform:translateX(121.540070px);}48%{transform:translateX(121.870071px);}49%{transform:translateX(122.200073px);}100%{transform:translateX(288px);}}@keyframes dot5{0%{transform:translateX(2px);}40%{transform:translateX(105.530075px);}41%{transform:translateX(105.860077px);}42%{transform:translateX(106.190079px);}43%{transform:translateX(106.520081px);}44%{transform:translateX(106.850082px);}45%{transform:translateX(107.180084px);}46%{transform:translateX(107.510086px);}47%{transform:translateX(107.840088px);}48%{transform:translateX(108.170090px);}49%{transform:translateX(108.500092px);}100%{transform:translateX(274px);}}

    </style>
</head>
<body>
<div class="spinner">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
</div>
</body>
</html>

由于小圆点到中间有一个缓慢的过渡效果，因此动画定义的CSS有点多，本人也是通过Java编码输出，来弄这段样式的（实在太多，伤不起啊）。其次，我尝试了使用百分比来确认小圆点的位置，但是失败了，只能使用像素，所以对修改也是很麻烦，但是有了Java来输出CSS代码就好多了。

public class OutCss {

    public static void main(String[] args) {

        int end = 330;//小圆点向右走的最终点像素位置
        int begin = 10;//小圆点动画开始的像素位置
        float center = 160f;//在中间缓慢移动的像素位置
        for(int i = 1; i <= 5; i++){
            System.out.println(format("@keyframes dot%d {", i));
            System.out.println("\t0%{");
            System.out.println(
                    String.format("\t\ttransform: translateX(%dpx);", (begin--)));
            begin--;
            System.out.println("\t}");
            for(int j = 0; j < 10; j++){
                System.out.println(format("\t5%d%%{", j));
                center = center + 0.33f;//缓慢移动每次移动的像素
                System.out.println(
                        String.format("\t\ttransform: translateX(%fpx);", center));
                System.out.println("\t}");
            }
            center -= 15f;//小圆点依次列队到中间的像素点位置
            System.out.println("\t100%{");
            System.out.println(
                    String.format("\t\ttransform: translateX(%dpx);", (end)));
            end -= 14;//小圆点列队走向终点的像素点位置
            System.out.println("\t}");
            System.out.println("}");
        }
    }
    private static String format(String str, Object...objects){
        return String.format(str, objects);
    }
}