css实现立体投影文字效果

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

图片.png

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


目录
相关文章
|
6月前
|
前端开发
CSS新增样式----圆角边框、盒子阴影、文字阴影
CSS新增样式----圆角边框、盒子阴影、文字阴影
|
7月前
|
前端开发
CSS 限制文字行数(超出显示省略号...)
CSS 限制文字行数(超出显示省略号...)
79 0
|
7月前
CSS3 transform 文字切斜展开动画
CSS3 transform 文字切斜展开动画
54 0
|
7月前
CSS3 text-shadow - 凹凸文字效果
CSS3 text-shadow - 凹凸文字效果
35 0
|
7月前
CSS3 transform 立体导航栏
CSS3 transform 立体导航栏
29 0
|
1月前
|
Web App开发 弹性计算 前端开发
纯 CSS 实现多行文字截断
纯 CSS 实现多行文字截断
21 1
|
2月前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
|
3月前
|
前端开发
html+css+js实现自动敲文字效果
html+css+js实现自动敲文字效果
23 0
css3文字阴影和盒子阴影
css3文字阴影和盒子阴影