如何对 HTML 目标对象进行 CSS3 微光动画？

Question

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

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

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

Answer 1

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

@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;
}