首页 前端知识 css实现立体投影文字效果

css实现立体投影文字效果

2024-08-30 03:08:05 前端知识 前端哥 187 900 我要收藏

非常立体的字,偶然在某个系统看到的,扒下来以备日后使用。原始页面上还有鼠标移动到某个字上就会有“点亮”的效果,不知道怎么实现的,我仔细查看了它的css代码以及事件,发现都没有。实在是很疑惑,如果有谁知道请告之。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<style>
p{
    padding-top: 100px;
    text-align: center;
    font-size: 75px;
    font-weight: 700;
    line-height: 100px;
    letter-spacing: 5px;
    color: #fff;
    margin-bottom: 30px;
}
p span {
    cursor: pointer;
    text-shadow: 0 0 2px #686868, 0 1px 1px #ddd, 0 2px 1px #d6d6d6, 0 3px 1px #ccc, 0 4px 1px #c5c5c5, 0 5px 1px #c1c1c1, 0 6px 1px #bbb, 0 7px 1px #777, 0 8px 3px hsl(0deg 0% 39% / 40%), 0 9px 5px hsl(0deg 0% 39% / 10%), 0 10px 7px hsl(0deg 0% 39% / 15%), 0 11px 9px hsl(0deg 0% 39% / 20%), 0 12px 11px hsl(0deg 0% 39% / 25%), 0 13px 15px hsl(0deg 0% 39% / 30%);
    transition: all 1s cubic-bezier(0.53, -0.44, 1, 1);
}
</style>
<body>
<p><span>欢</span><span>迎</span><span>使</span><span>用勒索病毒</span></p>
</body>
</html>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/17155.html
标签
评论
发布的文章

npm install 报错解决记录

2024-09-09 00:09:08

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!