CSS实现噪点文字效果实例页面

回到相关文章 »

效果:

CSS新世界

代码:

CSS代码:
.title {
    height: 300px;
    display: grid;
    place-items: center;
    background-color: deepskyblue;
}
.title strong {
    font-size: 100px;
    color: #0000;
    background: 
        repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 0/2500px 2500px,
        repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 50%/2500px 2500px;
    background-blend-mode: difference;
    mix-blend-mode: lighten;
    -webkit-background-clip: text;
          background-clip: text;
}
HTML代码:
<div class="title">
    <strong>CSS新世界</strong>
</div>