如何对HTML目标对象执行CSS3微调动画？

Question

在网页中,有没有办法做一个目标对象上的CSS3动画微光,就像一个DIV,A标签,或者BUTTON,使用关键帧？我更关注当前的浏览器,而不是IE11版本之前的浏览器.

一个闪光动画将一个闪亮的条形物放置在一个角度,穿过物体并沿特定方向移动.它有助于引起对页面上某些内容的注意.这非常适合在线广告中的目标网页,以吸引客户点击购买.

在这种情况下,HTML目标对象将像页面加载时一样显示.但是,几秒钟之后,它会从您希望应用此效果的元素的可见溢出边界外的隐藏空间中向左移动,并向右移动直到它溢出HTML目标对象边界并离开边界,只是有延迟并再次出现.它可以位于目标对象的顶部,尽管我正在寻找的动画类型位于目标对象的背景中并且闪耀着明亮的白色.在目标物体背景上旅行时,它应该是快速的,使其持续1秒或1.5秒.

Answer 1

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

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