那些复杂的颜色实现

渐变边框颜色

设计大大的精妙稿子,怎么能不去实现呢(🤷摊手.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兼容性好像还好~,移动端应该可以使用的~~~

参考文档:

相关推荐
夏梦春蝉1 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室2 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子3 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W4 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端5 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~5 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程5 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏5 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083166 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头7 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github