文字和图片的倒影效果

倒影的实现语言:
-webkit-box-reflect: below 10px -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
-webkit-box-reflect:后面代表的是倒影在原图的哪个方向和距离原图多少px
-webkit-linear-gradient:后面是背景色和透明度的渐变

文字的倒影实现:

<style>
    body{  
      background: #000;
  }  
  p{
        font-size:50px;
        color:#fff;       
       -webkit-box-reflect: below 10px -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1)); 
   }
</style>
<body>
    <p>罗一笑,你给我站住</p>
</body>

图片的倒影实现

<style>
    body{ 
       background: #000;   
   }    
   #div1{ 
       width: 300px; 
       height: 300px; 
       background: url("3.jpg") no-repeat; 
       margin:50px auto;
       -webkit-box-reflect: right 0px -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1)); 
   }
</style>
<body> 
   <div id="div1"></div>
</body>

图片的倒影有四个方向,分别是上下左右,对应的英文代码分别是above,below,left,right。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容