CSS 制作文字立起来的效果

最新推荐文章于 2025-05-08 10:28:50 发布

来福的常威呀

最新推荐文章于 2025-05-08 10:28:50 发布

阅读量784

点赞数 23

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/liu_chun_hu/article/details/146037075

版权

效果

实现

html 代码解读复制代码<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(194, 202, 202);
      }
      h1{
        position: relative ;
        color: #ffffff;
      }
      h1::before {
        content: "BLACK PINK";
        color: #000;
        font-weight: bolder;
        position: absolute;
        left: 0;
        z-index: -1;
        filter: blur(1px);
        transform: translateX(-15px) translateY(5px) scaleY(.5) skew(50deg);
        mask: linear-gradient(transparent, #000);
      }
    </style>
  </head>
  <body>
        <h1>BLACK PINK</h1>
    </div>
  </body>
</html>

用到的知识点归纳

伪元素

定义

伪元素是用于选择元素的特定部分，而不是元素本身。它们可以创建一些在 HTML 中不存在的虚拟元素，并为这些虚拟元素设置样式。

语法

伪元素使用双冒号 :: 来表示（在 CSS2 中也可以使用单冒号，但为了区分伪类和伪元素，建议使用双冒号）

css 代码解读复制代码selector::pseudo-element { property: value; }

常见伪元素及示例

::before 和 ::after

用于在元素的内容之前或之后插入内容。通常需要配合 content 属性使用

html 代码解读复制代码<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      p::before {
        content: "开始：";
        color: red;
      }

      p::after {
        content: " 结束。";
        color: blue;
      }
    </style>
  </head>

  <body>
    <p>这是一段文本。</p>
  </body>
</html>

::first-line

选择元素的第一行文本。

html 代码解读复制代码<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      p::first-line {
        color: purple;
        font-weight: bold;
      }
    </style>
  </head>

  <body>
    <p>
      这是一段比较长的文本，用于测试 ::first-line <br />
      伪元素的效果。当文本内容足够长时，第一行的样式会被单独设置。
    </p>
  </body>
</html>

效果：

伪类和伪元素的区别

本质不同：伪类用于选择处于特定状态或位置的元素，而伪元素用于选择元素的特定部分。
语法不同：伪类使用单冒号 :，伪元素使用双冒号 ::。
数量限制不同：一个选择器可以同时使用多个伪类，但通常只能使用一个伪元素（::before 和 ::after 除外）。

CSS特性

css 代码解读复制代码filter: blur(radius);

基本概念

filter 属性允许你对元素应用图形效果，如模糊、亮度调整、对比度调整等。blur() 是 filter 属性的一个函数，专门用于创建模糊效果。模糊半径决定了模糊的程度，半径越大，元素越模糊

这里的 x-angle 和 y-angle 是角度值，用来指定倾斜的程度，单位可以是度（deg）、弧度（rad）、梯度（grad）或转（turn），正数表示向某个方向倾斜，负数表示向相反方向倾斜。

倾斜方向与正负角度的关系

x-angle）：

y-angle）：

radius：指定模糊半径，单位可以是 px（像素）、em 等长度单位。值越大，模糊效果越明显；值为 0 时，没有模糊效果。
```
css 代码解读复制代码transform: skew(degree)
```
transform: skew() 是 CSS 中用于对元素进行倾斜变换的函数，它可以让元素在水平方向（X 轴）、垂直方向（Y 轴）或者两个方向同时产生倾斜效果。

基本语法

skew() 函数有两种形式：
skew(x-angle) ：只在水平方向（X 轴）上进行倾斜变换。
skew(x-angle, y-angle) ：同时在水平方向（X 轴）和垂直方向（Y 轴）上进行倾斜变换。
水平倾斜（
- 正角度：元素的右边向上倾斜。
- 负角度：元素的右边向下倾斜。
- 正角度：元素的下边向右倾斜。
- 负角度：元素的下边向左倾斜。
- 垂直倾斜（