CSS文字效果|前端开发|码途山海.智隐长卷 -

程序人生|重庆纽新

找回密码
立即注册

QQ登录

只需一步，快速开始

欢迎访问【程序人生-重庆纽新】，本网站为软件开发人员视觉的IT资讯、软件开发中各种问题的解决办法！！
搜索
码途山海.智隐长卷»技术记录 › 程序员 › 前端开发 › CSS文字效果
发新帖

lzg

2308

积分

0

好友

259

主题

CSS文字效果

楼主
发表于 2021-3-10 15:27:41 | 查看: 1038| 回复: 0
长阴影文字效果
通过多层次，颜色逐渐变化（透明）的阴影变化，可以生成长阴影：
  1. div {
  2.   text-shadow: 0px 0px #992400, 1px 1px rgba(152, 36, 1, 0.98), 2px 2px rgba(151, 37, 2, 0.96), 3px 3px rgba(151, 37, 2, 0.94), 4px 4px rgba(150, 37, 3, 0.92), 5px 5px rgba(149, 38, 4, 0.9), 6px 6px rgba(148, 38, 5, 0.88), 7px 7px rgba(148, 39, 5, 0.86), 8px 8px rgba(147, 39, 6, 0.84), 9px 9px rgba(146, 39, 7, 0.82), 10px 10px rgba(145, 40, 8, 0.8), 11px 11px rgba(145, 40, 8, 0.78), 12px 12px rgba(144, 41, 9, 0.76), 13px 13px rgba(143, 41, 10, 0.74), 14px 14px rgba(142, 41, 11, 0.72), 15px 15px rgba(142, 42, 11, 0.7), 16px 16px rgba(141, 42, 12, 0.68), 17px 17px rgba(140, 43, 13, 0.66), 18px 18px rgba(139, 43, 14, 0.64), 19px 19px rgba(138, 43, 15, 0.62), 20px 20px rgba(138, 44, 15, 0.6), 21px 21px rgba(137, 44, 16, 0.58), 22px 22px rgba(136, 45, 17, 0.56), 23px 23px rgba(135, 45, 18, 0.54), 24px 24px rgba(135, 45, 18, 0.52), 25px 25px rgba(134, 46, 19, 0.5), 26px 26px rgba(133, 46, 20, 0.48), 27px 27px rgba(132, 47, 21, 0.46), 28px 28px rgba(132, 47, 21, 0.44), 29px 29px rgba(131, 48, 22, 0.42), 30px 30px rgba(130, 48, 23, 0.4), 31px 31px rgba(129, 48, 24, 0.38), 32px 32px rgba(129, 49, 24, 0.36), 33px 33px rgba(128, 49, 25, 0.34), 34px 34px rgba(127, 50, 26, 0.32), 35px 35px rgba(126, 50, 27, 0.3), 36px 36px rgba(125, 50, 28, 0.28), 37px 37px rgba(125, 51, 28, 0.26), 38px 38px rgba(124, 51, 29, 0.24), 39px 39px rgba(123, 52, 30, 0.22), 40px 40px rgba(122, 52, 31, 0.2), 41px 41px rgba(122, 52, 31, 0.18), 42px 42px rgba(121, 53, 32, 0.16), 43px 43px rgba(120, 53, 33, 0.14), 44px 44px rgba(119, 54, 34, 0.12), 45px 45px rgba(119, 54, 34, 0.1), 46px 46px rgba(118, 54, 35, 0.08), 47px 47px rgba(117, 55, 36, 0.06), 48px 48px rgba(116, 55, 37, 0.04), 49px 49px rgba(116, 56, 37, 0.02), 50px 50px rgba(115, 56, 38, 0);
  3. }
复制代码

立体阴影文字效果
如果多层阴影，但是颜色变化没那么强烈，能够塑造一种立体的效果。
  1. div {
  2.   text-shadow: 0 -1px 0 #ffffff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212);
  3. }
复制代码

内嵌阴影文字效果
合理的阴影颜色和背景底色搭配，搭配，可以实现类似内嵌效果的阴影。
  1. div {
  2.   color: #202020;
  3.   background-color: #2d2d2d;
  4.   letter-spacing: .1em;
  5.   text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
  6. }
复制代码

氖光效果（Neon）氖光效果，英文名叫 Neon，是我在 Codepen 上看到的最多的效果之一。它的原理非常简单，却可以产生非常酷炫的效果。
我们只需要设置 3~n 层阴影效果，每一层的模糊半径（文字阴影的第三个参数）间隔较大，并且每一层的阴影颜色相同即可。
当然，通常运用 Neon 效果时，背景底色都是偏黑色。

  1. p {
  2.     color: #fff;
  3.     text-shadow:
  4.         0 0 10px #0ebeff,
  5.         0 0 20px #0ebeff,
  6.         0 0 50px #0ebeff,
  7.         0 0 100px #0ebeff,
  8.         0 0 200px #0ebeff
  9. }
复制代码


合理运用 Neon 效果，就可以制作非常多有意思的动效。譬如作用于鼠标 hover 上去的效果：
p {
    transition: .2s;

    &:hover {
        text-shadow: 0 0 10px #0ebeff, 0 0 20px #0ebeff, 0 0 50px #0ebeff, 0 0 100px #0ebeff, 0 0 200px #0ebeff;
    }
}


也可以选取适当合适的字体，配合动画效果，实现一种渐进的亮灯效果：

  1. <p>
  2.   <span id="n">n</span>
  3.   <span id="e">e</span>
  4.   <span id="o">o</span>
  5.   <span id="n2">n</span>
  6. </p>
复制代码
  1. p:hover span {
  2.   animation: flicker 1s linear forwards;
  3. }
  4. p:hover #e {
  5.   animation-delay: .2s;
  6. }
  7. p:hover #o {
  8.   animation-delay: .5s;
  9. }
  10. p:hover #n2 {
  11.   animation-delay: .6s;
  12. }

  14. @keyframes flicker {
  15.   0% {
  16.     color: #333;
  17.   }
  18.   5%, 15%, 25%, 30%, 100% {
  19.     color: #fff;
  20.     text-shadow:
  21.       0px 0px 5px var(--color),
  22.       0px 0px 10px var(--color),
  23.       0px 0px 20px var(--color),
  24.       0px 0px 50px var(--color);
  25.       
  26.   }
  27.   10%, 20% {
  28.     color: #333;
  29.     text-shadow: none;
  30.   }
  31. }
复制代码
文字与背景CSS 中的背景 background，也提供了一些属性用于增强文字的效果。
background-clip 与文字背景中有个属性为 background-clip， 其作用就是设置元素的背景（背景图片或颜色）的填充规则。
与 box-sizing 的取值非常类似，通常而言，它有 3 个取值，border-box，padding-box，content-box，后面规范新增了一个 background-clip。时至今日，部分浏览器仍需要添加前缀 webkit 进行使用 -webkit-background-clip。
使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
看个最简单的 Demo ，没有使用 background-clip:text :

效果如下：
使用 background-clip:text
我们稍微改造下上面的代码，添加 -webkit-background-clip:text：
  1. div {
  2.   font-size: 180px;
  3.   font-weight: bold;
  4.   color: deeppink;
  5.   background: url($img) no-repeat center center;
  6.   background-size: cover;
  7.   background-clip: text;
  8. }
复制代码
看到这里，可能有人就纳闷了，这不就是文字设置 color 属性嘛。
别急，由于文字设置了颜色，挡住了 div 块的背景，如果将文字设置为透明呢？文字是可以设置为透明的 color: transparent 。
  1. div {
  2.   color: transparent;
  3.   background-clip: text;
  4. }
复制代码
效果如下：
通过将文字设置为透明，原本 div 的背景就显现出来了，而文字以外的区域全部被裁剪了，这就是 background-clip:text 的作用。

利用 background-clip 实现渐变文字
再者，利用这个属性，也可以轻松的实现渐变色的文字：
  1. {
  2.     background: linear-gradient(45deg, #009688, yellowgreen, pink, #03a9f4, #9c27b0, #8bc34a);
  3.     background-clip: text;
  4. }
复制代码
配合 background-position 或者 filter: hue-rotate()，让渐变动起来：
  1. {
  2.     background: linear-gradient(45deg, #009688, yellowgreen, pink, #03a9f4, #9c27b0, #8bc34a);
  3.     background-clip: text;
  4.     animation: huerotate 5s infinite;
  5. }

  7. @keyframes huerotate {
  8.     100% {
  9.         filter: hue-rotate(360deg);
  10.     }
  11. }
复制代码

CodePen Demo -- background-clip: text 文字渐变色
利用 background-clip 给文字增加高光动画利用 background-clip， 我们还可以轻松的给文字增加高光动画。
譬如这样：

其本质也是利用了 background-clip，伪代码如下：


  1. <p data-text="Lorem ipsum dolor"> Lorem ipsum dolor </p>
复制代码
  1. p {
  2.     position: relative;
  3.     color: transparent;
  4.     background-color: #E8A95B;
  5.     background-clip: text;
  6. }
  7. p::after {
  8.     content: attr(data-text);
  9.     position: absolute;
  10.     left: 0;
  11.     top: 0;
  12.     width: 100%;
  13.     height: 100%;
  14.     background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);
  15.     background-clip: text;
  16.     background-size: 150% 100%;
  17.     background-repeat: no-repeat;
  18.     animation: shine 5s infinite linear;
  19. }
  20. @keyframes shine {
  21.         0% {
  22.                 background-position: 50% 0;
  23.         }
  24.         100% {
  25.                 background-position: -190% 0;
  26.         }
  27. }
复制代码




收藏回复 只看该作者 道具 举报

返回列表
高级模式
B Color Image Link Quote Code Smilies



QQ|小黑屋| 码途山海.智隐长卷 渝ICP备15002301号-2   渝公网安备50011202504426

GMT+8, 2025-5-18 00:03 , Processed in 0.045633 second(s), 22 queries .

©Copyright 程序人生!

©2012-2015重庆纽新

快速回复 返回顶部 返回列表