900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html5 css图片倒影 CSS3----图片倒影效果

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

时间:2019-05-09 14:41:24

相关推荐

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:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。