Question

我想要这个效果 http://antonioleiva.com/wp-content/uploads/2014/03/SwipeRefreshLayout.gif

有人可以像原生的android swipetorefresh布局一样编码吗？

请参阅下面的代码（与CodePen示例相同） HTML

<html>
  <body>
  <div class="preloader"></div>
   </body>
</html>

CSS

.preloader {
     height: 5px;
    width: 100%;
}
.preloader {


    background-size: 100px 100px;
background-image: -moz-linear-gradient(135deg, #fecf23 25%, transparent 25%,transparent 50%, #fecf23 50%, #fecf23 75%,transparent 75%, transparent);
background-image: -webkit-gradient(135deg, #fecf23 25%, transparent 25%,transparent 50%, #fecf23 50%, #fecf23 75%,transparent 75%, transparent);
background-image: -webkit-linear-gradient(135deg, #fecf23 25%, transparent 25%,transparent 50%, #fecf23 50%, #fecf23 75%,transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, #fecf23 25%, transparent 25%,transparent 50%, #fecf23 50%, #fecf23 75%,transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, #fecf23 25%, transparent 25%,transparent 50%, #fecf23 50%, #fecf23 75%,transparent 75%, transparent);
background-image: linear-gradient(135deg, #fecf23 25%, transparent 25%,transparent 50%, #fecf23 50%, #fecf23 75%,transparent 75%, transparent);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fecf23', endColorstr='#34c2e3',GradientType=1 );
  background-color: #34c2e3;


    -ms-animation: animate-stripes 1.2s linear infinite;
    -o-animation: animate-stripes 1.2s linear infinite;
    -moz-animation: animate-stripes 1.2s linear infinite;
    animation: animate-stripes 1.2s linear infinite;
   -webkit-animation: animate-stripes 1.2s linear infinite;

    transition: width .4s ease-in-out;
    -ms-transition: width .4s ease-in-out;
   -o-transition: width .4s ease-in-out;
   -webkit-transition: width .4s ease-in-out;
    -moz-transition: width .4s ease-in-out;
}

@-ms-keyframes animate-stripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 200px 0;
    }
}

@-o-keyframes animate-stripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 200px 0;
    }
}

@-moz-keyframes animate-stripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 200px 0;
    }
}

@-webkit-keyframes animate-stripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 200px 0;
    }
}

@keyframes animate-stripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 200px 0;
    }
}

Answer 1

由于线性渐变实际上是渲染图像，因此它们不具有动画效果。

你可以通过这种方式考虑它。

我用来为渐变设置动画的方法是在具有不同渐变的多个元素之间插入不透明度。像这样： http://jsfiddle.net/L9p4swzx/

    .container{
        position:relative;
        width:300px;
        height:300px;
        border:1px solid black;
    }
    .container h1{
        display:block;
        position:relative;
        z-index:2;
    }

    .animated {
        z-index:1;
        position:absolute;
        width:100%;
        height:100%;
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(21%, #ff670f), color-stop(56%, #ffffff), color-stop(88%, #0eea57));
        background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
        background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
        animation:gra1 5s infinite;
        animation-direction:alternate;
        -webkit-animation:gra1 5s infinite;
        -webkit-animation-direction:alternate;


        animation-timing-function:linear;
        -webkit-animation-timing-function:linear;
    }
    .animated2 {
        content: ' ';
        z-index:1;
        position:absolute;
        width:100%;
        height:100%;

        border:1px solid black;
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(10%, #ff670f), color-stop(40%, #ffffff), color-stop(60%, #0eea57));
        background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
        background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
        animation-direction:alternate;
        -webkit-animation:gra2 5s infinite;
        -webkit-animation-direction:alternate;

            animation-timing-function:linear;
        -webkit-animation-timing-function:linear;
    }
    .animated3 {
        content: ' ';
        z-index:1;
        position:absolute;
        width:100%;
        height:100%;

        border:1px solid black;
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(5%, #ff670f), color-stop(10%, #ffffff), color-stop(40%, #0eea57));
        background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);
        background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);

        animation-direction:alternate;
        -webkit-animation:gra3 5s infinite;
        -webkit-animation-direction:alternate;

            animation-timing-function:linear;
        -webkit-animation-timing-function:linear;
    }

    @-webkit-keyframes gra {
        33% {
            opacity: 1;
        }
        80% {
            opacity: 0;
        }
        100% {
            opacity:0;
        }
    }

    @-webkit-keyframes gra2 {
        33% {
            opacity: 0;
        }
        66% {
            opacity: 1;
        }
        100% {
            opacity:0;
        }
    }

@-webkit-keyframes gra3 {
    33% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    100% {
        opacity:1;
    }
}

通过稍微调整一下，你可以得到体面的动画。

但是对于你的情况，有一个更好的解决方案，它可以为背景位置设置动画，因为渐变变化是相似的。

http://jsfiddle.net/3L6tybd5/1/

.container{
    position:relative;
    width:300px;
    height:300px;
    border:1px solid black;
}
.container h1{
    display:block;
    position:relative;
    z-index:2;
}

.animated {
    z-index:1;
    position:absolute;
    width:100%;
    height:100%;
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(5%, #ff670f), color-stop(20%, #ffffff), color-stop(44%, #0eea57));
    background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 5%, #ffffff 20%, #0eea57 44%);
    background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 20%, #0eea57 44%);
    background-size:200%;
    background-position:0px 0px;
    animation:gra1 5s infinite;
    animation-direction:alternate;
    -webkit-animation:gra1 5s infinite;
    -webkit-animation-direction:alternate;

    animation-timing-function:linear;
    -webkit-animation-timing-function:linear;

}

@-webkit-keyframes gra1 {
    33% {
            background-position:0px 0px;
    }
    66% {
        background-position:-50px -50px;
    }
    100% {
        background-position:-150px -150px;
    }
}

请注意，我更改了动画和渐变的某些值，因此渲染器大于容器。

希望有所帮助

高级线性渐变动画CSS，如android swipetorefreshlayout

1 个答案: