Html 类似android swipetorefreshlayout的高级线性渐变动画CSS
我想要这个效果 目前我有这个 有人能像原生android swipetorefresh布局那样编码吗 参见下面的代码（与代码笔示例相同） HTMLHtml 类似android swipetorefreshlayout的高级线性渐变动画CSS,html,css,linear-gradients,Html,Css,Linear Gradients,我想要这个效果 目前我有这个 有人能像原生android swipetorefresh布局那样编码吗 参见下面的代码（与代码笔示例相同） HTML 由于线性渐变实际上是渲染图像，因此它们还不能设置动画 你可以用这种方式来思考它 我用来设置渐变动画的方法是在具有不同渐变的多个元素之间插入不透明度。这样地： 再稍微调整一下，你就可以得到像样的动画 但对于您的情况，有一个更好的解决方案，即设置背景位置的动画，因为渐变变化是相似的 请注意，我更改了动画和渐变的一些值，使其渲染器比容器大 希望它有帮
由于线性渐变实际上是渲染图像，因此它们还不能设置动画 你可以用这种方式来思考它 我用来设置渐变动画的方法是在具有不同渐变的多个元素之间插入不透明度。这样地： 再稍微调整一下，你就可以得到像样的动画 但对于您的情况，有一个更好的解决方案，即设置背景位置的动画，因为渐变变化是相似的 请注意，我更改了动画和渐变的一些值，使其渲染器比容器大
希望它有帮助但在最终产品中，我现在选择另一个动画：）无论如何，谢谢你的帮助；）
<html>
<body>
<div class="preloader"></div>
</body>
</html>
.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;
}
}
.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;
}
}
.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;
}
}