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>


目录
相关文章
|
30天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
78 33
|
3月前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码,具有真实的视觉感,同时文字还会在旋转过程中显示出灯光的反射效果,很有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
42 6
|
3月前
纯css3发光霓虹灯文字闪烁特效代码
纯css3发光霓虹灯文字闪烁特效代码是一款彩色的店铺名称文字动画特效。
49 6
|
3月前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
34 1
|
5月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
125 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
6月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
75 1
|
4月前
|
Web App开发 前端开发 iOS开发
|
6月前
|
移动开发 前端开发 HTML5
css实现涂绘文字的效果
如何使用HTML5和CSS3创建一个简单的文字涂抹动画效果。通过设置一个相对定位的父级div包含文本,并在其上使用绝对定位的伪元素与之重叠,实现动画效果。关键在于控制伪元素的宽度从0%到100%的变化过程,同时利用`overflow: hidden`和`white-space: nowrap`确保文本按预期显示。光标效果则通过添加右边界来模拟。整体代码简洁明了,便于理解和实践。
49 1
css实现涂绘文字的效果
|
6月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
221 0
|
6月前
|
前端开发
CSS流光文字效果:打造网页上的霓虹灯效果!
CSS流光文字效果:打造网页上的霓虹灯效果!