CSS —文字挺立效果

xiaobai_qxjn

于 2023-06-01 11:50:29 发布

阅读量93

点赞数

文章标签：前端 css 前端框架

本文链接：https://blog.csdn.net/xiaobai_qxjn/article/details/130985379

版权

该文章介绍了如何使用CSS创建一种文字挺立的效果，通过设置`h2`元素的样式，结合`transform`属性的`skew`,`scaleY`和`translate`函数，以及`filter`的模糊效果和`-webkit-mask-image`的遮罩层，创造出立体感的文字。这种方法可以用于提升网页设计的视觉吸引力。

摘要由CSDN通过智能技术生成

CSS —文字挺立效果

效果如下

在这里插入图片描述

相应操作

1.html

<div >
      <h2 class="text-up">Hello World</h2>
</div>

2.css

h2 {
    position: relative;
    margin-top: 30px;
    width: 100%;
    text-align: center;
    font-size: 5rem;
    font-weight: 700;
    color: #fff;
    z-index: 21;
  }
h2::before {
    content: 'Hello World';
    position: absolute;
    color: #000;
    // skew 旋转；scaleY 缩放；translate 偏移
    transform: translate(-34px, 16px) scaleY(0.5) skew(50deg);
    z-index: -1;
    filter: blur(5px);
    -webkit-mask-image: linear-gradient(transparent, #000); // 遮罩，由远到近
}