CSS3实现镂空文字

最新推荐文章于 2024-06-29 19:32:59 发布

一百万光年

最新推荐文章于 2024-06-29 19:32:59 发布

阅读量1.4k

点赞数

分类专栏：前端web

本文链接：https://blog.youkuaiyun.com/ZuoYanDeHuangHun/article/details/23663651

版权

前端web 专栏收录该内容

14 篇文章

订阅专栏

这篇博客介绍了如何利用CSS3的技巧来实现独特的镂空文字效果，通过代码示例展示了具体的实现步骤，为网页设计增添创意。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接贴代码

css：

h1{
          text-transform: uppercase;
          font-size: 48px;
          margin: 0 0 30px 0; 
          -webkit-text-stroke: 1px black;
          color: white;
 }
h2{				/*--通过阴影做出效果--*/
          font-size: 48px;
          margin: 0 0 30px 0; 
          color: white;
          text-shadow:
            -3px -3px 0 #000,  
            1px -3px 0 #000,
            -3px 3px 0 #000,
            3px 3px 0 #000;
}
h3{									/*-这个demo需要用基于webkit内核的chrome或者safari浏览器才能看，firefox上无效-*/
          font-size: 48px;
           
          -webkit-text-stroke: 2px red;
          -webkit-text-fill-color: white; 
          color: white;
           
          -webkit-animation: colorchange 1s infinite;
          -webkit-animation-direction: alternate;
}@-webkit-keyframes colorchange {
            0% {
                -webkit-text-stroke: 10px red;
                letter-spacing: 0;
            }
            100% {
                -webkit-text-stroke: 20px green;
                letter-spacing: 18px;
            }
}

html：

<h1>HELLO</h1>
<h2>HELLO</h2>
<h3>HELLO</h3>