【每日一练】85- CSS分层文本阴影效果生成器的实现

每日一练1年前 (2023)发布 admin
2,011 0

关于文本效果的练习,我们在前面也分享了不少,今天我们再来练习一个CSS实现的彩色文本效果生成器,它的最终效果如下:

【每日一练】85- CSS分层文本阴影效果生成器的实现
我们看完了这个效果的最终介绍,我们再来看一下,它的代码实现过程。
HTML代码:
<htm>
<head>
<meta charset=”UTF-8″>
<title>【每日一练】85- CSS分层文本阴影效果生成器的实现</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div>web前端开发</div>
<p>web前端开发博客网站:
<a href=”https://www.webqdkf.com/”>www.webqdkf.com</a>
</p>
</body>
</htm>
CSS代码:
div{
font-size: 15rem;
text-align: center;
height:90vh;
line-height: 90vh;
color: #fcedd8;
background: #d52e3f;
font-family: ‘微软雅黑’;
font-weight: 700;
text-shadow:
5px 5px 0px #eb452b,
10px 10px 0px #efa032,
15px 15px 0px #46b59b,
20px 20px 0px #017e7f,
25px 25px 0px #052939,
30px 30px 0px #c11a2b,
35px 35px 0px #c11a2b,
40px 40px 0px #c11a2b,
45px 45px 0px #c11a2b;
}
p{
text-align: center;
font-family: “Helvetica”;
font-size:0.8rem;
}
a{
color: #d52e3f;
text-decoration: none;
font-family: ‘Niconne’, cursive;
font-size: 1.2rem;
}
写在最后

好了,今天的【每日一练】就先到这里,希望今天的这个分享对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

© 版权声明

相关文章

暂无评论

暂无评论...