|
|

楼主 |
发表于 2022-6-1 07:26
|
显示全部楼层
本帖最后由 马黑黑 于 2022-6-1 07:28 编辑
一楼如果使用webkit内核的浏览器查看,会看到很奇妙的效果,有点h5知识的一眼就看得出来,这是用了 webkit-box-reflect 的缘故,将元素镜像反射复制了。
但这不是简单的反射,是多重嵌套反射。HTML结构如下:
<div class="mama">
<div class="wrap">1
<div class="wrap below1">2-1</div>
<div class="wrap below2">2-2</div>
</div>
</div>
mama是外框,不多说。其子层 wrap 使用了一个向右的反射,然后套两个并列的 wrap 。当然,不是简单的套,它们又各自引用不同的选择器 below1 和 below2,二者的选择器都使用了一个向下的反射。
来看看完整的CSS代码:
- <style>
- .mama { margin: auto; width: 800px; height: 400px; position: relative;}
- .wrap { position: relative; top: 100px; width: 200px; height: 40px; text-align: center; font: normal 16px / 40px sans-serif; -webkit-box-reflect: right 10px; border: 1px solid; }
- .below1 { position: absolute; top: 50px; -webkit-box-reflect: below 10px; background: tan; }
- .below2 { position: absolute; top: 160px; -webkit-box-reflect: below 10px; background: olive; }
- </style>
复制代码 由于反射的结果不具备真实元素特性,所以below1 的垂直定位我们拉开了与 wrap 元素的距离,50px,below2 拉开的更大,160px。如果不拉开,它们会几乎重叠在一起。
从HTML结构和CSS样式设定看,其实这是 reflect 套娃的灵活运用: wrap 自己套自己,只是不是一路套下去,而是套了两个并列的自己,同时也不是简单的套,而是所套的自己又有自己的其他行为特征。如果真正用套娃的方式一路套下去会有什么结果?就是一系列的元素和镜像重叠,其应用场景也是存在的,比如展示一些无序化的景象等等。
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|