今天【每日一辆练】最终效果如下:
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>【每日一练】第309练 | 颗粒感文字效果</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">何以解忧,提钱退休</div>
</body>
</html>
.box {
text-transform: uppercase;
color: #0000;
font-family: sans-serif;
font-size: 100px;
font-weight: bold;
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;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
background: #05adad;
}
html {
background: #fff;
}
推荐阅读
学习更多技能
请点击下方公众号