I've found this nice slick effect in here - http://www.red-team-design.com/wp-content/uploads/2011/04/css3-box-shadow.html.
我在这里发现了这个漂亮的光滑效果——http://www.red-team-design.com/wp-content/uploads/2011/04/css3-box shadow.html。
Here is a copy of this - http://jsfiddle.net/cyvvilek/cL7x6/3/
这里有一个副本:http://jsfiddle.net/cyvvilek/cL7x6/3/。
I was wondering if there is any way to get this effect on hover. Together with some CSS animation would give a nice effect, I think. There is a heavy use of :after and :before in CSS so it cannot be #box:after:hover or anything like that :) I've heard about possibility of nesting stuff in SASS or LESS.. Can this be done with CSS alone?
我想知道是否有办法达到这个效果。我认为，加上一些CSS动画会给你带来不错的效果。在CSS中有很多的用法:after and:before，所以它不能是#box:after:hover或类似的:)我听说过在SASS中嵌套东西的可能性。仅仅使用CSS就能做到这一点吗?
Thx
谢谢
1 个解决方案
#1
3
Unfortunately, pseudo elements like :after and :before cannot be transitioned yet. SASS and LESS compile down to CSS, so everything technically possible with SASS or LESS, is possible with plain CSS.
不幸的是，像:after和:before这样的伪元素还不能转换。SASS和LESS编译到CSS中，所以在技术上，SASS或更少的CSS都是可行的。
What you can do is have a seperate element (maybe div) with the top shadow and fade it in and out on hover. Alternatively you can use an image.
你能做的是有一个独立的元素(也许是div)与顶部的阴影和淡入和淡出在悬停。或者你也可以使用图像。
#1
3
Unfortunately, pseudo elements like :after and :before cannot be transitioned yet. SASS and LESS compile down to CSS, so everything technically possible with SASS or LESS, is possible with plain CSS.
不幸的是，像:after和:before这样的伪元素还不能转换。SASS和LESS编译到CSS中，所以在技术上，SASS或更少的CSS都是可行的。
What you can do is have a seperate element (maybe div) with the top shadow and fade it in and out on hover. Alternatively you can use an image.
你能做的是有一个独立的元素(也许是div)与顶部的阴影和淡入和淡出在悬停。或者你也可以使用图像。