CSS3实现镂空文字

来源：互联网发布：删除矩阵a的第7号元素编辑：程序博客网时间：2024/06/03 03:00

直接贴代码

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>

0 0