如何用css实现倒影效果

fox/ 2023年09月05日/ CSS教程/ 浏览 1652

在电商和产品广告中,我们经常看到水中倒影的效果,其实这种效果我们也可以通过css来实现。并且这种效果也是通过css的几种属性来实现。


几种属性如下:


1.perspective:

多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。


2.transform:

transform-style:preserve-3d :让转换的子元素保留3D转换

transform-origin:设置旋转元素的基点位置

translate(x, y) :定义2d图形的转换,分别为 x 和 y

roate(90deg) : 定义2d图形的旋转,参数为度数,如旋转90度


3.box-reflect:

倒影属性,这个效果非常的奇特,包括三个属性

direction:定义倒影的方向。

offset:定义反射偏移的距离,取值包括数值或百分比,其中百分比根据对象的尺寸进行确定。默认为0

mask-box-image 定义遮罩图像,该图像将覆盖投影区域。


4.animation :

动画属性,可连贯的书写,也可分开书写(前面加上animation-)


具体实现可以参考以下代码:


HTML部分


<div class=“style”>
      <h1>这里是倒影效果</h1>
 </div>


CSS部分


.style {
        padding-top: 100px;
}
.style h1 {
     font-size: 50px;
     text-align: center;
     color: rebeccapurple;
     -webkit-box-reflect: below 1px linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
}
    

发表评论

暂无评论,抢个沙发...

客服 工单