渐变

文字渐变?😮 咋做?好像没有直接的 CSS 属性可以使用呀。。。(老玩家可以跳过,继续往下瞧)

不会?那换个问题,背景渐变!这个会了吧?呃...😐 这个可以会吖!!!

且看:

 

html

代码解读

复制代码

<!DOCTYPE html>
<html>
<head>
<style>
  .text {
    width: fit-content;
    font-size: 32px;
    font-weight: bold;
    background-image: linear-gradient(to right, #7F00FF, #FF7F00, #32CD32, #FF1493);
  }
</style>
</head>
<body>
  <p class="text">谁对时间越吝啬,时间就对谁越慷慨。</p>
</body>
</html>

效果:

CSS文字效果:渐变、描边、阴影、倒影、填充图片、动画效果 转载_html

丑?别在意这些细节😁。这里咱们通过 background-image 属性与 CSS 的图像函数 linear-gradient() 就能实现背景色的渐变,这点相信各位彦祖和亦菲应该都很熟啦。

注意,加了一个 width: fit-content; 属性,为了一会文字更好的呈现渐变效果。

那么,背景渐变咱们实现了,文字的渐变呢?👀

简单,瞧:

 

css

代码解读

复制代码

.text {
  ...
  background-clip: text;
  color: transparent;
}

效果:

CSS文字效果:渐变、描边、阴影、倒影、填充图片、动画效果 转载_动画效果_02

就加两行,通过 background-clip: text; 属性能将背景裁剪成文字的前景色。当然,也要注意将文字颜色设置成透明色(color: transparent;)。

你可以理解成背景现在被裁剪成文字的模样,与文字重叠了,要看到背景,自然要将本来的文字颜色设置成透明,咱们才能看到背景。

描边

文字描边?空心文字?啥玩意?😦

先看看效果:

CSS文字效果:渐变、描边、阴影、倒影、填充图片、动画效果 转载_html_03

噢,有点意思。

具体实现:

 

html

代码解读

复制代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .text {
      font-size: 32px;
      font-weight: bold;
      color: transparent;
      -webkit-text-stroke: 2px #FF7F00; /*描边*/
    }
  </style>
</head>
<body>
  <p class="text">谁对时间越吝啬,时间就对谁越慷慨。</p>
</body>
</html>

主要通过 -webkit-text-stroke 属性来实现,它等同于 -webkit-text-stroke-width 和 -webkit-text-stroke-color ,很简单吧,没什么可说的。😗

阴影

文字阴影?

这与我们常用的"盒子"阴影(box-shadow)差不多啦。

且看:

 

html

代码解读

复制代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .text {
      font-size: 32px;
      font-weight: bold;
      color: #7F00FF;
      text-shadow: 1px 1px 12px red; /*阴影*/
    }
  </style>
</head>
<body>
	<p class="text">谁对时间越吝啬,时间就对谁越慷慨。</p>
</body>
</html>

效果:

CSS文字效果:渐变、描边、阴影、倒影、填充图片、动画效果 转载_html_04

文字阴影可以通过 text-shadow 属性来实现,具体参数描述?就自行直接上MDN上查阅啦。💀

倒影

文字倒影?这也是有现成的 CSS 属性可以使用的。

但是呢,它有点小问题,咱们先来看看实现效果:

CSS文字效果:渐变、描边、阴影、倒影、填充图片、动画效果 转载_动画效果_05

实现过程:

 

html

代码解读

复制代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .text {
      font-size: 32px;
      font-weight: bold;
      width: fit-content;
      background-image: linear-gradient(to right, #7F00FF, #FF7F00, #32CD32, #FF1493);
      color: transparent;
      background-clip: text;
      /*倒影*/
      -webkit-box-reflect: below -4px linear-gradient(to bottom, transparent 10%, white);
    }
  </style>
</head>
<body>
  <p class="text">谁对时间越吝啬,时间就对谁越慷慨。</p>
</body>
</html>

咱们只加了一行 "倒影" 的样式属性,其他样式属性都是前面讲过的渐变效果样式。

而 -webkit-box-reflect 属性支持三个属性值,分别是:偏移量、间距、蒙版。

  • 方向:above-上边、below-下边、left-左边、right-右边。
  • 偏移量:偏移量其实就是倒影与原来文字的间距。
  • 蒙版:"描述要应用于反射的蒙版" 这是官方的描述,其实不是很好理解😵;它的值类型仅能是一些图像函数 ,例如linear-gradient 函数。注意,这也仅是确定了它的"值类型"而已哦!!!并不是说这个函数就能随意使用了,它也只能是在一些透明度上做做文章。小编个人的理解是它像在倒影上添加了一层"蒙层",而我们能做的就是调整这一层蒙层的透明度,仅此而已。(你可以多多尝试下就明白啦👻)

最后,这个属性它还有一点兼容性问题,它是非标准的并且火狐浏览器不支持,且不能在 span 标签中使用,,最好在 divp 等元素中使用呗。

CSS文字效果:渐变、描边、阴影、倒影、填充图片、动画效果 转载_动画效果_06

CSS文字效果:渐变、描边、阴影、倒影、填充图片、动画效果 转载_偏移量_07

填充图片

文字填充图片相信各位多多少少也见识过,它本质和咱们前面讲的渐变实现是差不多的。

 

html

代码解读

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .text {
      width: fit-content;
      font-size: 100px;
      font-weight: bold;
      background-image: url();
      background-clip: text;
      color: transparent;
    }
  </style>
</head>
<body>
  <p class="text">橙某人</p>
</body>
</html>

就把 background-image 改成一个图片地址即可。

效果:

CSS文字效果:渐变、描边、阴影、倒影、填充图片、动画效果 转载_动画效果_08

不过,它看起来有点丑?😕

咱们可以稍微再给它修饰修饰。

 

css

代码解读

复制代码

-webkit-text-stroke: 1px #32CD32;
filter: drop-shadow(1px 1px 1px rgb(0, 0, 0, 0.8));

它给加描边和滤镜:

CSS文字效果:渐变、描边、阴影、倒影、填充图片、动画效果 转载_偏移量_09

(好像更丑了😅,就这样子吧。)

动画效果

动画效果?这又是啥呢?

且看:

CSS文字效果:渐变、描边、阴影、倒影、填充图片、动画效果 转载_偏移量_10

还是可以吧?😲 可能是小编调的颜色不够搭配,要不估计更绚丽一些。

直接贴代码瞧瞧:

 

html

代码解读

复制代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .text {
      font-size: 32px;
      font-weight: bold;
      width: fit-content;
      background-image: linear-gradient(to right, #7F00FF, #FF7F00, #32CD32, #FF1493);
      color: transparent;
      background-clip: text;
      /*动画效果*/
      background-size: 300% 100%;
      animation: gradientAnimation 2s linear infinite;
      animation-direction: alternate; 
    }
    @keyframes gradientAnimation {
      0% {
        background-position: 0;
      }
      to {
        background-position: 100%;
      }
    }
  </style>
</head>
<body>
  <p class="text">谁对时间越吝啬,时间就对谁越慷慨。</p>
</body>
</html>

咱们主要是将渐变的背景宽度设置为了三倍,然后通过来回移动背景就能完成这个动画了。

animation-direction 属性可以让动画是应正向播放、反向播放还是在正向和反向之间交替播放。


作者:橙某人