锐客网

  1. 首页 > 睿知 > it技术 > >

#yyds干货盘点# 实现渐变文字和文字倒影

IT知识实现倒影干货

仰天大笑出门去，我辈岂是蓬蒿人。这篇文章主要讲述#yyds干货盘点# 实现渐变文字和文字倒影相关的知识，希望能为你提供帮助。
前言该文作为《文字效果到底能玩出多少花样》的第五篇文章，带大家实现 渐变文字和文字倒影 。
具体效果见封面图:

#yyds干货盘点# 实现渐变文字和文字倒影

文章图片

基础知识今天因为要实现两种效果，预备知识有点多，分别是 background-clip 属性、 -webkit-box-reflect 属性。
  • background-clip: 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。有四个属性值，下面来一一介绍一下:
    • border-box: 背景延伸至边框外沿（但是在边框下层）
    • padding-box: 背景延伸至内边距（padding）外沿。不会绘制到边框处
    • content-box: 背景被裁剪至内容区（content box）外沿
    • text: 背景被裁剪成文字的前景色
  • -webkit-box-reflect
    -webkit-box-reflect: [ above | below | right | left ]? < length> ? < image> ?

    • 方位: 设置倒影的朝向
    • 偏移大小: 设置倒影偏离初始元素的距离
    • 遮罩图片: 给元素倒影添加遮罩层，效果语法类似于 background-image 属性。
渐变文字由于 color 属性不能设置渐变色，所以渐变文字的实现并不简单，但众多大佬也通过探索也发掘了好多种实现方案。例如使用 canvas 的 CanvasRenderingContext2D.createLinearGradient()方法实现；使用 background-clip: text 配合 background 来实现；-webkit-mask 配合 attr 来实现等。
本文主要使用 background-clip: text 配合 background 来实现。
  1. background 设置渐变色
    background: linear-gradient(90deg, #7e40ee, #00f, #63d9ee);

【#yyds干货盘点# 实现渐变文字和文字倒影】
#yyds干货盘点# 实现渐变文字和文字倒影

文章图片

  1. background-clip: text 裁剪渐变
-webkit-background-clip: text; background-clip: text;

  1. 文字 color 设置为透明
    color: transparent;

    渐变文字效果就实现了。
#yyds干货盘点# 实现渐变文字和文字倒影

文章图片

文字倒影效果chrome 浏览器提供了 -webkit-box-reflect 属性，通过这个属性可以轻松实现 chrome 下的倒影效果。
color: rgb(237, 125, 49); -webkit-box-reflect: below -2px -webkit-gradient( linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.2)) );

#yyds干货盘点# 实现渐变文字和文字倒影

文章图片

后语伙伴们，如果大家感觉本文对你有一些帮助，给阿包点一个赞

    推荐阅读


    上一篇：数据恢复之希捷硬盘ST1000DM001盘片划伤二次开盘恢复成功

    下一篇：ceph对接openstack故障问题解决