html – CSS水平线动画(渐变颜色)

概述我有彩色,动画,垂直线这样一个： @keyframes colored { 0% { background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 我有彩色,动画,垂直线这样一个：

@keyframes colored {  0% {    background-image: -webkit-linear-gradIEnt(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);    background-image: -moz-linear-gradIEnt(left,#62c2e4);    background-image: -o-linear-gradIEnt(left,#62c2e4);    background-image: linear-gradIEnt(to right,#62c2e4);  }  12.5% {    background-image: -webkit-linear-gradIEnt(left,#62c2e4,#62c2e4 12.5%,#c4e17f 25%,#f7fdca 37.5%,#fecf71 50%,#f0776c 62.5%,#db9dbe 75%,#c49cde 87.5%,#669ae1);    background-image: -moz-linear-gradIEnt(left,#669ae1);    background-image: -o-linear-gradIEnt(left,#669ae1);    background-image: linear-gradIEnt(to right,#669ae1);  }  25% {    background-image: -webkit-linear-gradIEnt(left,#669ae1,#669ae1 12.5%,#62c2e4 25%,#c4e17f 37.5%,#f7fdca 50%,#fecf71 62.5%,#f0776c 75%,#db9dbe 87.5%,#c49cde);    background-image: -moz-linear-gradIEnt(left,#c49cde);    background-image: -o-linear-gradIEnt(left,#c49cde);    background-image: linear-gradIEnt(to right,#c49cde);  }  37.5% {    background-image: -webkit-linear-gradIEnt(left,#c49cde,#c49cde 12.5%,#669ae1 25%,#62c2e4 37.5%,#c4e17f 50%,#f7fdca 62.5%,#fecf71 75%,#f0776c 87.5%,#db9dbe);    background-image: -moz-linear-gradIEnt(left,#db9dbe);    background-image: -o-linear-gradIEnt(left,#db9dbe);    background-image: linear-gradIEnt(to right,#db9dbe);  }  50% {    background-image: -webkit-linear-gradIEnt(left,#db9dbe,#db9dbe 12.5%,#c49cde 25%,#669ae1 37.5%,#62c2e4 50%,#c4e17f 62.5%,#f7fdca 75%,#fecf71 87.5%,#f0776c);    background-image: -moz-linear-gradIEnt(left,#f0776c);    background-image: -o-linear-gradIEnt(left,#f0776c);    background-image: linear-gradIEnt(to right,#f0776c);  }  62.5% {    background-image: -webkit-linear-gradIEnt(left,#f0776c,#f0776c 12.5%,#db9dbe 25%,#c49cde 37.5%,#669ae1 50%,#62c2e4 62.5%,#c4e17f 75%,#f7fdca 87.5%,#fecf71);    background-image: -moz-linear-gradIEnt(left,#fecf71);    background-image: -o-linear-gradIEnt(left,#fecf71);    background-image: linear-gradIEnt(to right,#fecf71);  }  75% {    background-image: -webkit-linear-gradIEnt(left,#fecf71,#fecf71 12.5%,#f0776c 25%,#db9dbe 37.5%,#c49cde 50%,#669ae1 62.5%,#62c2e4 75%,#c4e17f 87.5%,#f7fdca);    background-image: -moz-linear-gradIEnt(left,#f7fdca);    background-image: -o-linear-gradIEnt(left,#f7fdca);    background-image: linear-gradIEnt(to right,#f7fdca);  }  87.5% {    background-image: -webkit-linear-gradIEnt(left,#f7fdca,#c4e17f);    background-image: -moz-linear-gradIEnt(left,#c4e17f);    background-image: -o-linear-gradIEnt(left,#c4e17f);    background-image: linear-gradIEnt(to right,#c4e17f);  }  100% {    background-image: -webkit-linear-gradIEnt(left,#62c2e4);  }}.colored {  margin-top: 5px;  margin-bottom: 5px;  height: 7px;  border-top: 0;  background: #c4e17f;  border-radius: 5px;  background-image: -webkit-linear-gradIEnt(left,#62c2e4);  background-image: -moz-linear-gradIEnt(left,#62c2e4);  background-image: -o-linear-gradIEnt(left,#62c2e4);  background-image: linear-gradIEnt(to right,#62c2e4);  animation-name: colored;  animation-duration: 2s;  animation-iteration-count: infinite;}

<hr >

我想知道它是否可以在一些更好的(阅读：更聪明的方式)完成.花费我一些时间来计算和准备所有的动画步骤(正在使用excell),我觉得很愚蠢.

第二个问题(基于其中一个意见)是否这个动画可以更流畅？如何完成？

解决方法 保持结构最大化,这里是我的解决方案

.colored {  margin-top: 5px;  margin-bottom: 5px;  height: 7px;  border-top: 0;  background: #c4e17f;  border-radius: 5px;  background-image: linear-gradIEnt(to right,#62c2e4);  padding-right: 50%;  background-origin: content-Box;  background-size: 200%;  animation-name: colored;  animation-duration: 2s;  animation-iteration-count: infinite;  animation-timing-function: steps(8);}@keyframes colored {  from {background-position: 0% 0%;}      to {background-position: 200% 0%;}}

<hr >

我用步骤功能来动画化背景位置,所以颜色的离散变化很容易实现.

使用一个单一的梯度,响应和动画有点棘手.

最简单的解决方案是什么,表示背景大小为100％,不受百分比的背景位置更改的影响.

诀窍是将背景设置为只有一半的元素(用填充技巧实现),然后将尺寸设置为200％

总结

以上是内存溢出为你收集整理的html – CSS水平线动画(渐变颜色)全部内容，希望文章能够帮你解决html – CSS水平线动画(渐变颜色)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。