随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

倒影问题(reflect:below)

这个例子灵感来源于实现一个登录框下方的倒影:

.box {
width: 300px;
height: 200px;
border: 1px solid #1f637b;
-webkit-box-reflect: below 10px -webkit-linear-gradient(rgba(255, 255, 255, 0.0),rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.1), rgba(100, 119, 135, 0.5));
color: #fff;
position: absolute;
top: 100px;
margin: 100px auto;
border-radius: 5px;
border-color: rgba(255,255,255,0.5);
box-shadow: 1px 1px 14px rgba(255, 255, 255, 0.4), inset -11px 3px 131px rgba(100, 119, 135, 0.8);
}
.login,.reset{
width: 90px;
height: 30px;
border-color: rgba(77, 96, 110, 0.1);
background: rgba(140, 155, 165, 0.5);
color: #fff;
font-size: 17px;
margin-left: 36px;
margin-top: 14px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.2), inset 0 20px 30px rgba(26, 39, 47, 0.5);
-moz-box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.2), inset 0 20px 30px rgba(26, 39, 47, 0.5);
box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.2), inset 0 20px 30px rgba(26, 39, 47, 0.5);
}
实现效果:


关键点:倒影的取色和位置需要与上面的颜色对应,用透明度控制即可;(添加两到三个红色,因为倒影最淡的颜色部分其实就是红色,添加两个可使之更加自然);











posted on   小虾米吖~  阅读(203)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」

点击右上角即可分享
微信分享提示