我想创建一个发光加载动画,该动画将出现在具有不同背景颜色的多个元素上.
当前,我正在使用背景图像渐变,并且正在使用vw单位为背景位置设置动画,但是它不可缩放,我的元素将具有不同的长度.
有没有一种方法可以使背景图像具有百分比单位？
创建的动画
body { background: black;}header { wIDth: 100%; height: 50px; background-color: rebeccapurple; background-image: linear-gradIEnt( to right,transparent 0%,rgba(255,255,0.3) 50%,transparent 100% ); background-repeat: no-repeat; background-position: -100vw; animation: shine 2s infinite;}@keyframes shine { 0% { background-position: -100vw; } 100% { background-position: 100vw; }}<!DOCTYPE HTML><HTML><head> <Meta charset="utf-8"> <Meta name="vIEwport" content="wIDth=device-wIDth"> <Title>Js Bin</Title> <script src="https://code.jquery.com/jquery-3.1.0.Js"></script> </head><body> <header></header> </body></HTML>body { background: black;}.Box { height: 50px; @R_404_5553@:5px; background-color: rebeccapurple; background-image: linear-gradIEnt( to right,transparent 33%,transparent 66% ); background-size:300% 100%; animation: shine 2s infinite;}@keyframes shine { 0% { background-position: right; } /*100% { background-position: left; it's the default value,no need to define it }*/}<div ></div><div ></div><div ></div>相关问题：Using percentage values with background-position on a linear gradient 总结
以上是内存溢出为你收集整理的html-CSS背景渐变发光动画 全部内容，希望文章能够帮你解决html-CSS背景渐变发光动画 所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）