WEB每日一练——CSS让你的文字立起来

最新推荐文章于 2024-09-01 06:05:48 发布

Mr.A.D.0013

最新推荐文章于 2024-09-01 06:05:48 发布

阅读量365

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/Bannerparter/article/details/127721858

版权

<h1>阴影</h1>

如何让这个标题的文字呈现立起来的效果呢？

首先需要找到这个h1并加上一个伪元素:

h1::before {
    content:'阴影'//与h1元素的内容一致
    position:absolute;
    color:#000;
    transform: translate(此处是调整位置，自己调试一下) scaleY(0.5) skew(50deg);
    z-index:-1;
    filter:blur(5px);
    -webkit-mask-image: linear-gradient(transparent,#000)
}

到这里整体效果已经完成了。

顺便说一句：css真的强大！