如何为 HTML 目标对象制作 CSS3 微光动画？

Question

在网页中，有没有办法在目标对象上制作 CSS3 微光动画，例如 DIV、A 标签或 BUTTON , 使用关键帧？我更关心当前的浏览器，而不是比 IE11 版本更早的浏览器。

微光动画将一个闪亮的条以一定角度横跨对象并沿特定方向移动。它有助于将注意力吸引到页面上的某些内容。这对于在线广告中的着陆页非常有用，可以吸引客户点击购买。

在这种情况下，HTML 目标对象将在页面加载时正常显示。但是，几秒钟后，它从左侧移入您希望应用此效果的元素的可见溢出边界外的隐藏 space 中，然后向右移动直到溢出 HTML 目标对象边界和边界外，只是有延迟并再次出现。它可以在目标对象的顶部，尽管我正在寻找的那种动画在目标对象的背景中并且闪耀着明亮的白色。在目标对象背景上移动时，速度应该很快，持续 1 秒或 1.5 秒。

Answer 1

您可以创建对角线渐变背景，并在关键帧计时器上将其从最左端滑动到最右端。将以下内容添加到您的 CSS 文件，然后将 "shimmer" class 添加到您的 HTML 元素。我使用关键帧中 background-position-x 属性中较大数字的组合来播放动画速度，以及 animation 属性中的动画速度（当前为 8s） CSS class.

@keyframes shimmerBackground {
    0% {background-position:-5000px 0}
    100% {background-position:5000px 0}
}

.shimmer
{
background-image: -moz-linear-gradient(160deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0)), color-stop(60%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%);
background-image: -o-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%);
background-image: -ms-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%);
background-image: linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%);
background-repeat: repeat-y;
background-position:-5000px 0;
animation: shimmerBackground 8s linear infinite;
}

如何为 HTML 目标对象制作 CSS3 微光动画？

How can I do a CSS3 shimmer animation to an HTML target object?

html

css

effects

keyframe

css-animations