html5 css图片倒影,CSS3----图片倒影效果

效果图：

倒影消隐效果：CSS3渐变色(Gradients)功能，

倒影偏移量：-webkit-box-reflect: below 10px;

CSS:

#imgbox {

-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%);

padding: 0px 10px;

position:relative;

}

#imgbox img {

z-index: -1;

height:340px;

width:340px;

}

#imgbox:before {

content:"";

background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px,-moz-element(#imgbox) 0px 0px no-repeat;

/*百分比为调倒影的透明度*/

-moz-transform: scaleY(-1);

padding: 1px 0px;

background-origin: padding-box, content-box;

background-clip: padding-box, content-box;

position:absolute;

height:340px;

width: 340px;

top: 340px;

left:0px;

}

Html:

html5 css图片倒影,CSS3----图片倒影效果相关推荐

HTML+CSS+JS实现 ❤️CSS3图片遮罩高亮显示❤️
效果演示: GIF压缩太大.故显示图片查看吧代码目录: 主要代码实现: CSS样式: @charset "utf-8"; * {margin: 0;padding: 0;list ...
html图片滤色,CSS3图片混合（Blend）效果详解
在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果.在这些效果的背后实际是一些简单的数学公式在起作用.CSS3中也引入了blend模式,对照Photoshop中的实现, ...
html图片抖动,css3图片抖动
受1楼启发 Document .sdf{ width:500px; height:500px; overflow:hidden; margin:200px auto; position:relativ ...
20个超棒的CSS3图片切换灯箱效果教程推荐
CSS3中增加了诸多新的特性,借助这些特性,可以实现不可思议的效果.本文带来20个教程,教你如何使用CSS3创建引人注目的图片切换效果和灯箱效果. 点击小标题可以直接看效果 1. 创建带3D灯箱动画 ...
html5怎么让字跟图片对齐,css怎么将字和图对齐
css将字和图对齐的方法:1.通过添加css的"vertical-align:middle;"实现将字和图对齐:2.通过在css中设置背景图片实现将字和图对齐:3.把文字和图片分别 ...
css3图片旋转轮播_使用CSS和JavaScript构建3D旋转轮播
css3图片旋转轮播 A lot has been said on the use of traditional 2D carousels, for example this piece on Sma ...
[css] 如何使用css3实现一个div设置多张背景图片？
[css] 如何使用css3实现一个div设置多张背景图片? background-image:url("1.jpg"),url("2.jpg"),url(&q ...
[css] 请使用css3实现图片的平滑转换
[css] 请使用css3实现图片的平滑转换以全局监听的方式通过 a 标签的描点进行 view 动态切换页面,只要把 a 标签带有 id 的 href 属性的值指到锚点,用 CSS3 的动画进行切换 ...
java水面倒影效果,Java实现图片倒影代码详解
/*实现图片倒影(tested)*/ public class ButtonImageActivity extends Activity { /** Called when the activity ...

html5 css图片倒影,CSS3----图片倒影效果

html5 css图片倒影,CSS3----图片倒影效果相关推荐

最新文章

热门文章