一、文本

background-clip:text 实现渐变文字

  1. div {
  2.   color: transparent;
  3.   background-clip: text;
  4. }

通过将文字设置为透明，原本 div 的背景就显现出来了，而文字以外的区域全部被裁剪了，这就是 background-clip:text 的作用。

https://code.juejin.cn/pen/7112616977457217544

  1. <h1>
  2.   Improve how you
  3.   <span class="bg-clip-text bg-gradient-to-r text-transparent pink200-to-blue500">
  4.     architect
  5.   </span>
  6.   Improve
  7. </h1>
  9. <h1 class="bg-clip-text bg-gradient-to-r text-transparent pink-to-purple">
  10.   Practical examples on CodeSandbox
  11. </h1>
  12. <h1 class="bg-clip-text bg-gradient-to-r text-transparent pink-to-orange">
  13.   Practical examples on CodeSandbox
  14. </h1>
  1. h1{
  2.   margin: 5rem 15rem;
  3.   font-size: 5.5rem;
  4.   font-weight: 800;
  5. }
  7. .text-transparent {
  8.   color: transparent;
  9. }
  11. .bg-clip-text {
  12.   -webkit-background-clip: text;
  13.   background-clip: text;
  14. }
  16. .bg-gradient-to-r {
  17.   background-image: linear-gradient(90deg,var(--tw-gradient-stops));
  18. }
  20. .pink200-to-blue500{
  21.   --tw-gradient-from: #ec008c;
  22.   --tw-gradient-to: #0070f3;
  23.   --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(236,0,140,0));
  24. }
  26. .pink-to-purple {
  27.   --tw-gradient-from: #FF00BB;
  28.   --tw-gradient-to: #5C00CB;
  29.   --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(51,140,245,0));
  30. }
  32. .pink-to-orange {
  33.   --tw-gradient-from: #EC008C;
  34.   --tw-gradient-to: #FFF200;
  35.   --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(51,140,245,0));
  36.   animation: huerotate 5s infinite;
  37. }
  39. @keyframes huerotate {
  40.   100% {
  41.     filter: hue-rotate(360deg);
  42.   }
  43. }

image.png

首字母大写

  1. text-transform: Capitalize;

  1. <p class="custom-text-selection">Select some of this text.</p>
  3. ::selection {
  4.   background: aquamarine;
  5.   color: black;
  6. }
  7. .custom-text-selection::selection {
  8.   background: deeppink;
  9.   color: white;
  10. }

自定义文本选择

image.png

蚀刻文本

  1. <p class="etched-text">I appear etched into the background.</p>
  1. .etched-text {
  2.   text-shadow: 0 2px white;
  3.   font-size: 1.5rem;
  4.   font-weight: bold;
  5.   color: #b8bec5;
  6. }

image.png

溢出滚动渐变

向溢出元素添加渐变以更好地指示有更多内容需要滚动。

  1. <div class="overflow-scroll-gradient">
  2.   <div class="overflow-scroll-gradient__scroller">
  3.     Content to be scrolled
  4.   </div>
  5. </div>
  1. .overflow-scroll-gradient {
  2.   position: relative;
  3. }
  4. .overflow-scroll-gradient::after {
  5.   content: '';
  6.   position: absolute;
  7.   bottom: 0;
  8.   width: 240px;
  9.   height: 25px;
  10.   background: linear-gradient(
  11.     rgba(255, 255, 255, 0.001),
  12.     white
  13.   ); /* transparent keyword is broken in Safari */
  14.   pointer-events: none;
  15. }
  16. .overflow-scroll-gradient__scroller {
  17.   overflow-y: scroll;
  18.   background: white;
  19.   width: 240px;
  20.   height: 200px;
  21.   padding: 15px 0;
  22.   line-height: 1.2;
  23.   text-align: center;
  24. }

image.png
说明

  1. position: relative 在父级上为伪元素建立笛卡尔定位上下文。
  2. ::after 定义伪元素。
  3. background-image: linear-gradient(...) 添加从透明渐变为白色(从上到下)的线性渐变。
  4. position: absolute 从文档流中取出伪元素，并将其相对于父元素定位。
  5. width: 240px 匹配滚动元素的大小(它是具有伪元素的父元素的子元素)。
  6. height: 25px 是衰落梯度伪元素的高度，应当保持相对较小。
  7. bottom: 0 将伪元素定位在父元素的底部。
  8. pointer-events: none 指定伪元素不能是鼠标事件的目标，允许其后面的文本仍然是可选/交互式的。

文本高光

利用 background-clip， 我们还可以轻松的给文字增加高光动画。
点击查看【codepen】

  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-clip: text;
  17.     background-size: 150% 100%;
  18.     background-repeat: no-repeat;
  19.     animation: shine 5s infinite linear;
  20. }
  21. @keyframes shine {
  22.     0% {
  23.         background-position: 50% 0;
  24.     }
  25.     100% {
  26.         background-position: -190% 0;
  27.     }
  28. }

添加了 mask 属性的元素，其内容会与 mask 表示的渐变的 transparent 的重叠部分，并且重叠部分将会变得透明
点击查看【codepen】

镂空文字

image.png

拿到了镂空文字后，我们还可以利用混合模式 mix-blend-mode: multiply 生成渐变色的文字。

  1. p {
  2.     position: relative;
  3.     -webkit-text-stroke: 3px #9a9acc;
  5.     &::before{
  6.         content: ' ';
  7.         width: 100%;
  8.         height: 100%;
  9.         position: absolute;
  10.         left: 0;
  11.         top: 0;
  12.         background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);
  13.         mix-blend-mode: multiply;
  14.     }
  15. }

image.png

hover 悬停下划线动画

  1. <p class="hover-underline-animation">Hover this text to see the effect!</p>\
  2. .hover-underline-animation {
  3.   display: inline-block;
  4.   position: relative;
  5.   color: #0087ca;
  6. }
  7. .hover-underline-animation::after {
  8.   content: '';
  9.   position: absolute;
  10.   width: 100%;
  11.   transform: scaleX(0);
  12.   height: 2px;
  13.   bottom: 0;
  14.   left: 0;
  15.   background-color: #0087ca;
  16.   transform-origin: bottom right;
  17.   transition: transform 0.25s ease-out;
  18. }
  19. .hover-underline-animation:hover::after {
  20.   transform: scaleX(1);
  21.   transform-origin: bottom left;
  22. }

image.png

禁用文本选择

  1. <p>你可以选择我。</p>
  2. <p class="unselectable">你不能选择我！</p>
  3. .unselectable {
  4.   user-select: none;
  5. }

说明

user-select: none 指定无法选取文字。

文本溢出

文本超出不定行

文本 - 图9

  1. <div class="con">
  2.     <div class="section">
  3.         <h3 class="title">LGD 在 TI10 放猛犸，RNG 在 S7 放加里奥最后都输了，哪个更让你愤怒失望？</h3>
  4.         <p class="excerpt">猛犸是对面的绝中绝，大家都知道，并且之前扳回两局已经证明了，当lgd选择ban掉猛犸，或者自己抢掉猛犸时，对面完全不是对手。</p>
  5.     </div>
  6.     <div class="section">
  7.         <h3 class="title">《饥荒》为什么这么难玩？</h3>
  8.         <p class="excerpt">玩的是联机版，30个小时了还没过第一个冬天。</p>
  9.     </div>
  10.     <div class="section">
  11.         <h3 class="title">你觉得国漫的巅峰之作是哪个？</h3>
  12.         <p class="excerpt">一直觉得国漫做的一般，之前看了灵笼这部国漫，做的不错，还有什么YYDS的国漫推荐吗！</p>
  13.     </div>
  14. </div>
  17. html,body{
  18.     margin: 0;
  19.     height: 100%;
  20.     display: flex;
  21.     justify-content: center;
  22.     align-items: center;
  23. }
  24. h3,p{
  25.     margin: 0;
  26. }
  27. .con{
  28.     width: 500px;
  29.     overflow: hidden;
  30.     resize: horizontal;
  31. }
  32. .section{
  33.     display: flex;
  34.     position: relative;
  35.     border: 10px solid transparent;
  36.     outline: 1px solid;
  37.     overflow: hidden;
  38.     height: 72px;
  39.     margin: 10px;
  40.     line-height: 1.5;
  41.     text-align: justify;
  42.     flex-direction: column;
  43. }
  45. .title{
  46.     overflow: hidden;
  47.     display: -webkit-box;
  48.     -webkit-line-clamp: 2;
  49.     -webkit-box-orient: vertical;
  50.     font-size: 16px;
  51.     margin-bottom: 3px;
  52. }
  53. .excerpt{
  54.     font-size: 14px;
  55.     margin-top: auto;
  56.     flex: 1;
  57.     overflow: hidden;
  58.     max-height: 3em;
  59. }
  60. .excerpt::before{
  61.     content: '...';
  62.     float: right;
  63.     height: 100%;
  64.     shape-outside: inset(calc(100% - 1.5em) 0 0 0);
  65.     display: flex;
  66.     align-items: flex-end;
  67.     margin-left: 2px;
  68. }
  70. .excerpt::after{
  71.     content: '';
  72.     position: absolute;
  73.     width: 999vh;
  74.     height: 999vh;
  75.     background: #fff;
  76.     box-shadow: -2em 2em #fff;
  77. }

点击查看【codepen】

文字排版布局

文字沿着不规则路径排版布局的实现

https://www.zhangxinxu.com/wordpress/2020/09/svg-text-around-path/

直线等图形3D穿过文字的CSS实现

https://www.zhangxinxu.com/wordpress/2021/02/css-3d-through/
image.png

文本特效-掘金

https://css-tricks.com/creating-playful-effects-with-css-text-shadows/
https://juejin.cn/post/6937102296442470413#heading-17