css花字效果

javascript 复制代码
 <div data-subtitle="春江潮水连海平" class="colorText">春江潮水连海平</div>
javascript 复制代码
.colorText{
  font-family:'ZhanKuKuaiLeTi2016XiuDingBan';
  font-size: 50px;
  font-weight: bold;
  position: relative;
  background-image: linear-gradient(90deg,#A1B3FB 0%,#FBD7ED 50%,#F6F6C8 100%);
  letter-spacing: 12px;
  // filter:drop-shadow(rgb(152, 93, 8) 2.4px 2px 0px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #A2A9F7;
}
.colorText::before{
  content: attr(data-subtitle);
  position: absolute;
  background-image: linear-gradient(90deg,#A1B3FB 0%,#FBD7ED 50%,#F6F6C8 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-stroke: 0;
}

实现效果

相关推荐
萌萌哒草头将军几秒前
⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
前端·javascript·vue.js
江城开朗的豌豆9 分钟前
Proxy:JavaScript中的'变形金刚',让你的对象为所欲为!
前端·javascript·面试
江城开朗的豌豆17 分钟前
JavaScript中的instanceof:你的代码真的认识'自家孩子'吗?
前端·javascript·面试
JinSo19 分钟前
create-easy-editor —— 快速搭建你的可视化编辑器
前端·前端框架·github
Watermelo61728 分钟前
【前端实战】如何让用户回到上次阅读的位置?
前端·javascript·性能优化·数据分析·哈希算法·哈希·用户体验
zhaoyang03013 小时前
css3笔记 (1) 自用
前端·javascript·css·vue.js·笔记·html·css3
珎珎啊3 小时前
CSS3 常用功能详细使用指南
前端·css·css3
moxiaoran57536 小时前
uni-app萌宠案例学习笔记--页面布局和CSS样式设置
前端·css·uni-app
CrissChan7 小时前
Pycharm 函数注释
java·前端·pycharm
小小小小宇7 小时前
Vue.nextTick()笔记
前端