css3倒影怎么写?

css3倒影怎么写?下面本篇文章给大家介绍一下使用CSS3实现倒影的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

css3实现漂亮的倒影效果

实际上还有很多CSS新属性并未包含进CSS3官方标准中。-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box-reflect的作用是让图片出现倒影。

如果一个图片,我们想要给其增加倒影,做法如下:

html:

<img src="images/7.jpg"/>

css样式:

img{
  -webkit-box-reflect: below;
}

效果:

1 (1).png

如果希望倒影和图片之间有空隙可是设置css样式:

img{
  -webkit-box-reflect: below 10px;
}

效果如图:

2.png

实现渐变效果的css如下:

img{
  -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.7)));
}

效果如下:

3.png

但是,此方法只能适用于webkit内核的浏览器。要想可以兼容火狐浏览器,接下来,介绍另外一种方法。

html代码如下:

<div class="wrap"> 
            <div class="image"><img src="images/7.jpg" /></div> 
            <div class="down"><!--放置倒影 -->
                <div class="reflection"></div> <!--放置倒影图片-->
                <div class="overlay"></div> <!--设置渐变-->
            </div> 
        </div>

css代码如下:

*{
        padding:0px;
        margin:0px;
    }
   .wrap{position:relative;} 
   .image{margin-bottom:3px;} 
   .down{position: relative;left:-11px;top:-10px;} 
   .reflection{width:421px;height:180px;left:-10px;background:url(images/7.jpg) bottom center no-repeat; 
   -webkit-transform: scaleY(-1); 
   -moz-transform: scaleY(-1); 
   -ms-transform: scaleY(-1); 
   -o-transform: scaleY(-1); 
   transform: scaleY(-1); 
   opacity:0.5; 
   filter:alpha(opacity='50'); 
} 
.overlay{position: relative;width:421px;height:180px;bottom:149px; 
background-image: -moz-linear-gradient(center bottom, rgb(255,255,255) 20%, rgba(255,255,255,0) 90%); 
background-image: -o-linear-gradient(rgba(255,255,255,0) 10%, rgb(255,255,255) 30%); 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.20, rgb(255,255,255)), color-stop(0.90, rgba(255,255,255,0))); 
}

transform:scaleY(-1)是的图片上下颠倒。

filter为过滤器,定义图片的可视效果,模糊与饱和度等。

background-image:-moz-linear-gradient,设置图片的渐变。

看着css代码多,其实并不是很难,很多都是加各种浏览器的前缀,解决兼容性问题。

效果图:

4.png

更多web前端自学知识,请查阅 HTML中文网 !!

以上就是css3倒影怎么写?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏