<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
css - 在图像( Logo )上创建光扫描效果( Shiny )
我想给一张图片添加扫光效果，让它看起来像在发光。
期望的行为:
(就像在这个图像中，但是图像，但是光在移动)
我发现了一些解决方案完全符合我的预期，但仅限于 div 元素。我尝试用图像申请，但没有成功。
知道如何在 PNG 图像上添加 Shiny 效果吗？
示例:http://jsfiddle.net/nqQc7/289/
最佳答案
因为 img 标签不喜欢伪元素，所以您需要使用包装元素并absolutely 定位您的 img在里面。类似于 this demo显示，如下所示:
.wrap {
display: inline-block;
height: 200px;
width: 200px;
position: relative;
overflow: hidden;
}
.wrap img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.wrap:before {
content: "";
z-index: 10;
position: absolute;
height: 200%;
width: 200%;
top: -120%;
left: -120%;
background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%);
transition: all 2s;
transform: rotate(-45deg);
animation: shine 6s infinite forwards;
}
@keyframes shine {
0% {
top: -120%;
left: -120%;
}
20% {
left: 100%;
top: 100%;
}
40% {
left: 100%;
top: 100%;
}
100% {
left: 100%;
top: 100%;
}
}<div class="wrap">
<img src="http://placehold.it/200/200" />
<div>关于css - 在图像( Logo )上创建光扫描效果( Shiny )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36830283/