App-like Light / Brightening effect

Question

是否有人知道是否有办法创建CSS效果，看起来像iPhone apps使用的灯光效果？我的意思是盒子的上部，更亮的部分。

谢谢，

罗恩

Answer 1

我从未见过你描述的效果（永远不会使用iPhone），但我认为它是以某种方式动画的？ 然后，如果您使用两个图像并在“悬停”时混合它们，则可以在css中执行此操作。将“灯图标”放在普通图标上方（通常使用css中的:after伪选择器）并使用css :hover选择器控制它的不透明度值。

Answer 2

不幸的是，由于在:after元素上使用:before和img选择器为not covered by the specification，纯CSS解决方案可能无法正常运行：

  

此规范未完全定义以下的交互：之前   和：替换后的元素（例如HTML中的IMG）。这将会   在未来的规范中更详细地定义。

在当前版本的Chrome和Firefox中，这些选择器似乎被忽略，根本无法用于img元素。

这是一个带有小型HTML包装器的解决方案，当不支持CSS时，它将回退到不呈现。需要在此处指定容器大小，但可以使用JavaScript轻松设置容器大小。

<强> CSS

.shine {
    width:223px;
    height:223px;
    position:relative;
    overflow:hidden;
    display:inline-block;
}

.shine:after {
    width:150%;
    height:100%;
    position:absolute;
    top:-45%;
    left:-25%;
    display:block;
    content:"";
    background:rgba(255,255,255,0.1);
    border-radius:100%;
}

<强> HTML

<span class="shine">
    <img src="" alt="">
</span>

<强>结果

为了让这个有点发烧友，你可以为.shine:after添加一个渐变背景，但它可以正常运行而无需证明这个想法。

Here's a jsFiddle所以你不必为此承担责任。