现代 CSS

box-reflect

CSS倒影那些事儿

最近我在Codepen看到一个这样子的加载示例。使用CSS完成的具有渐变褪色倒影的、旋转的3D条形块。每一个条形块使用了一个元素,之后进行复制,这些元素形成倒影,最后添加渐变进行覆盖形成渐变褪色效果。这听起来有点像用你的左脚趾从背后抓右耳朵般不切实际。更不用说渐变覆盖方法形成褪色效果在非平面背景色不起作用了。是不是有更好的方法使用CSS可以实现这种效果呢?

使用CSS3制作倒影

在Web制作中,有些时候需要实现一些倒影的效果。比如说,你看到一个美女,你想从另一个角度来看这个MM的风姿。在早前要实现这样的效果我们都必须借助于类似于Photoshop这样的制作图软件来实现,然后通过引入一张image。那么除了图片,我们有没有别的方法能实现呢?值得庆幸的是,到目前为之,CSS3有一个属性可以实现。那么今天我们要给大家介绍的就是这个属性的应用。

返回顶部