使用线性渐变作为背景的自适应发光动画 [英] Responsive shine animation using linear-gradient as background
问题描述
我想创建一个加载动画的动画，该动画将出现在具有不同背景颜色的多个元素上.
I want to create a shine loading animation which will appear on multiple elements with different background colors.
当前，我正在使用background-image渐变，并且正在使用vw单位为background-position设置动画，但是它不可缩放，我的元素将具有不同的长度.
Currently, I'm using background-image gradient and I'm animating the background-position using vw units, but it's not scalable, my elements will have different lengths.
是否可以使用百分比单位为background-image设置动画?
Is there a way I can animate background-image with percentage units?
创建的动画
body {
background: black;
}
header {
width: 100%;
height: 50px;
background-color: rebeccapurple;
background-image: linear-gradient(
to right,
transparent 0%,
rgba(255,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>
推荐答案
一个想法是使渐变的大小比容器大3倍，并对容器的中间部分进行着色，然后从左向右滑动它:
An idea is to make the size of the gradient to be 3 times bigger than the container and color the middle part of it then you slide it from left to right:
body {
background: black;
}
.box {
height: 50px;
margin:5px;
background-color: rebeccapurple;
background-image: linear-gradient(
to right,
transparent 33%,
rgba(255,255,255,0.3) 50%,
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 class="box"></div>
<div class="box" style="width:60%"></div>
<div class="box" style="width:40%"></div>
另一种替代动画的方法:
Another alternative for a different animation:
body {
background: black;
}
.box {
height: 50px;
margin:5px;
background-color: rebeccapurple;
background-image: repeating-linear-gradient(
to right,
transparent 0,
rgba(255,255,255,0.3) 25%,
transparent 50%
);
background-size:200% 100%;
animation: shine 1s infinite linear;
}
@keyframes shine {
0% {
background-position: right;
}
}
<div class="box"></div>
<div class="box" style="width:60%"></div>
<div class="box" style="width:40%"></div>
相关问题:使用百分比值和线性渐变中的背景位置
这篇关于使用线性渐变作为背景的自适应发光动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
