那些复杂的颜色实现

渐变边框颜色

设计大大的精妙稿子,怎么能不去实现呢(🤷摊手.png)!

之前合作的设计师,给的一个视觉稿子效果图,里面有个解锁区域的边框渐变效果,大致如下图所示。 边框是一个透明度从0%->100%->0%->83%->6%的渐变效果再叠加了一个外发光,实现难点主要实现一个渐变边框线。

实现思路:

div层添加圆角度,后续通过伪元素,添加一个特殊(transparent->red->transparent->red->transparent)渐变的mask层。

核心代码:

js 复制代码
<div class="con">哈哈哈</div>
// css
.con {
  min-height: 130px;
  position: relative;
  border-radius: 8px;
}
.con:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 0.01rem solid #dbc091;
  border-radius: inherit;
  -webkit-mask: lineargradient(to right bottom,transparent,red,transparent,red,transparent);
}

动态渐变背景色

css 复制代码
background: linear-gradient(106deg, rgba(77, 176, 0, 0.16) 0%, rgba(77, 176, 0, 0.08) 100%);

涉及到实际的业务动态下发的需求场景,它的实现需要再斟酌一下。

业务场景:接口下发一个纯色颜色值(rgb或者hex都有可能)效果展示上需要实现背景色为指定颜色colorA的一个渐变从透明度16%到8%。

方案一:纯色背景上叠加白色透明渐变(无黑夜模式适配首选)

具体思路如下所示,在色块上方叠加一个白色固定透明度即可

核心代码:

css 复制代码
background: linear-gradient(to right bottom, rgba(255,255,255, .84), rgba(255,255,255, .92)), #4DB000;

完整代码:

html 复制代码
// dom
<div class="card" style="--color: red">哈哈哈</div>
// css
.card {
  background: linear-gradient(to right bottom, rgba(255,255,255, .84), rgba(255,255,255, .92)), var(--color);
  min-height: 130px;
}

缺点: 无法适配黑夜模式or透过显示部分底层元素

方案二:纯色背景+mask

具体思路如下所示,在背景色块上添加一个任意颜色(此次为了简写用的#000)渐变mask即可。

核心代码:

css 复制代码
background: #4DB000;
-webkit-mask: linear-gradient(to right bottom, rgba(0,0,0,.86), rgba(0,0,0,.08))

完整代码:

less 复制代码
// dom
<div class="card" style="--color: red">哈哈哈</div>
// css
.card {
  position: relative;
  min-height: 130px;
}
.card::before{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color);
  -webkit-mask: linear-gradient(to right bottom, rgba(0,0,0,.86), rgba(0,0,0,.08))
}

body {
  background: url('./img.jpg')
}

效果图

(PS:此处为看效果,左上方的Alpha由0.16改成0.46了) 兼容性: -webkit-mask兼容性好像还好~,移动端应该可以使用的~~~

参考文档:

相关推荐
中微子17 分钟前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z26 分钟前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录34 分钟前
虚拟DOM
前端·vue.js·dom
爱学习的茄子34 分钟前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神35 分钟前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
摆烂为不摆烂39 分钟前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神39 分钟前
cocos游戏开发中,如何制作一个空气墙
前端·javascript
爱编程的喵39 分钟前
深入理解JavaScript事件循环机制:从同步到异步的完整解析
前端·javascript
202640 分钟前
11. vite打包优化
前端·javascript·vite
拾光拾趣录1 小时前
组件封装的⼀些基本准则
前端·前端工程化