700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > css实现立体投影文字效果

css实现立体投影文字效果

时间:2020-05-03 16:03:54

相关推荐

css实现立体投影文字效果

非常立体的字,偶然在某个系统看到的,扒下来以备日后使用。原始页面上还有鼠标移动到某个字上就会有“点亮”的效果,不知道怎么实现的,我仔细查看了它的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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。