在电商和产品广告中,我们经常看到水中倒影的效果,其实这种效果我们也可以通过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));
}
-
css详解系列:10-Flex项目属性orderorder 属性 用来设置或检索弹性盒模型对象的项目(子元素)在容器中出现的順序。
-
css详解系列:11-Flex项目属性align-selfalign-self属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。
-
css实现点击切换图片效果的方法在css中我们可以使用伪类选择器来实现点击切换图片的效果,看看如何实现的。
-
css样式表的三种样式css(级联样式表)主要有三种样式定义方式
-
如何在css中实现样式优先级在css中,样式优先级是由一系列规则决定的,这些规则决定了当多个样式规则应用于同一个HTML元素时,哪个规则会优先生效。
-
css文本超出显示3个点的方法在css中,如果你想让超出特定长度的文本显示为三个点(...),你可以使用text-overflow属性,配合overflow和white-space属性。
暂无评论,抢个沙发...