【每日一练】第309练 | ​颗粒感文字效果,附源码

科技   2024-09-05 09:25   上海  


今天【每日一辆练】最终效果如下:

源代码如下:
HTML:
<!DOCTYPE html><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>
CSS:
.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;}


推荐阅读

【每日一练】01~100练大合集汇总

【每日一练】01~200练大合集汇总




学习更多技能

请点击下方公众号

web前端开发
一个专业而懂你的前端开发技术研究学习平台,每天与你分享【web前端开发】相关的技术文章与案例,互联网资讯,编程图书与课程,前端开发工具等学习资源,坚持每天学习一点点,每天进步一点点,关注我们,一起学习成长进步。
 最新文章