在悬停时使用CSS的光滑效果

时间:2012-06-12 22:01:41

标签: css sass less css3

我在这里发现了这个漂亮的光滑效果 - http://www.red-team-design.com/wp-content/uploads/2011/04/css3-box-shadow.html

以下是此内容的副本 - http://jsfiddle.net/cyvvilek/cL7x6/3/

我想知道是否有任何方法可以在悬停时获得此效果。 我认为,与一些CSS动画一起会产生很好的效果。 有大量使用:之后和:之前在CSS中所以它不能是#box:after:hover或类似的东西:) 我听说过在SASS或LESS筑巢的可能性。 这可以单独用CSS完成吗?

THX

1 个答案:

答案 0 :(得分:3)

不幸的是,伪元素如:after和:before之前还无法转换。 SASS和LESS编译为CSS,因此使用纯CSS可以实现SASS或LESS技术上的所有功能。

你可以做的是有一个单独的元素(可能是div)与顶部阴影并在悬停时淡入淡出。或者,您可以使用图像。