css - 类似应用程序的光/增亮效果

Question

有人知道是否有一种方法可以创建CSS看起来像用于灯光效果的效果iPhone apps吗？我的意思是盒子的上部，较亮的部分。

谢谢，

罗恩

Answer 1

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

Answer 2

不幸的是，由于规范没有涵盖在元素上使用:after和:before选择器，纯 CSS 解决方案可能无法正确运行：img

该规范没有完全定义 :before 和 :after 与替换元素的交互（例如 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，但它可以正常工作而无需演示这个想法。

这是一个 jsFiddle，所以你不必相信我的话。