css花字效果

qq_48354174 • 2023年09月24日 03:18 • 1年前 • 编程日记 • 阅读(5) • 违法举报

在这里插入图片描述

 <div data-subtitle="春江潮水连海平" class="colorText">春江潮水连海平</div>

.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;
}

实现效果
在这里插入图片描述文章来源地址https://uudwc.com/A/Mx393

原文地址:https://blog.csdn.net/qq_48354174/article/details/132985445

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请联系站长进行投诉反馈，一经查实，立即删除！