在这里介绍一种3D文字的一种动态效果，可以说这是一种伪3D创建的一种3D的视觉效果

简单的讲解一下：大家或多或少都会听说过素描这种绘画手法，其实这种手法就是巧妙的利用了。阴影给人们带来的立体的视觉冲击，在这里我们也是通过这种素描的方式，利用css3中的文字阴影属性：text-shadow来绘制出唯美的3D效果字

text-shadow:一共有四个参数，参数一是X轴的偏移，参数2是Y轴的偏移，参数三是模糊层度(一定要大于零，小于零的话表示没有模糊将看不到效果)，参数4：是阴影的颜色

text-shadow:最大的优势在于他可以无限的连接，就是多个阴影重叠，这也就是我们3D效果创建出来的根本

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style>

			#nav{

				font-family: sans-serif;

				width: 100%;

				text-align: center;

				margin-top: 200px;

			}

			body{

				padding: 0;

				margin: 0;

				background-color: #444444;

			}

			h1{

				text-transform: uppercase;

				font-size: 3em;

				letter-spacing: 0.1em;

				color: #EEE;

				animation: rotate 2s alternate infinite;

			}

                        /*利用伪类创建文字下方的黑色阴影*/

			h1:before{

				  content:"你在桥上看风景,而我在桥边看你";

				  text-shadow: 0 0 15px #111;

				  color: transparent;

				  position: absolute;

				  z-index: -1;

				  margin: -0.1em 0 0 0;

				  animation: skew 2s alternate infinite;

				  transform-origin: bottom;

			}

                        /*给一个动画让文字动起来，并且可以给定义个六重阴影一个更好的展现平台*/

        			@keyframes rotate {

				  from {

				    transform: rotateY(-10deg);

				    text-shadow:  1px -1px #CCC,

				                  2px -1px #BBB,

				                  3px -2px #AAA,

				                  4px -2px #999,

				                  5px -3px #888,

				                  6px -3px #777;

				  }

				  to {

				    transform: rotateY(10deg);

				    text-shadow:  -1px -1px #CCC,

				                  -2px -1px #BBB,

				                  -3px -2px #AAA,

				                  -4px -2px #999,

				                  -5px -3px #888,

				                  -6px -3px #777;

				  }

				}

			/*让阴影随着文字移动创建更好的视觉效果*/

			@keyframes skew {

				  from {

				    transform: scaleY(0.5) skewX(-35deg);

				  }

				  to {

				    transform: scaleY(0.5) skewX(35deg);

				  }

		</style>

	</head>

	<body>

		<div id="nav">

			<h1>你在桥上看风景,而我在桥边看你</h1>

		</div>

	</body>

</html>

效果图:在这里给大家简单的截图看一眼，动态效果大家可以复制代码观赏，以后如果有好的效果会继续分享给大家!谢谢大家

3d动态文字的绘制的更多相关文章

  1. 基于HTML5 Canvas的3D动态Chart图表

    发现现在工业SCADA上或者电信网管方面用图表的特别多,虽然绝大部分人在图表制作方面用的是echarts,他确实好用,但是有些时候我们不能调用别的插件,这个时候就得自己写这些美丽的图表了,然而图表轻易 ...

  2. 基于 WebGL 的 3D 动态柱状图表

    发现现在工业SCADA上或者电信网管方面用图表的特别多,虽然绝大部分人在图表制作方面用的是echarts,他确实好用,但是有些时候我们不能调用别的插件,这个时候就得自己写这些美丽的图表了,然而图表轻易 ...

  3. Three.js实现脸书元宇宙3D动态Logo

    背景 Facebook 近期将其母公司改名为 Meta,宣布正式开始进军 元宇宙 领域.本文主要讲述通过 Three.js + Blender 技术栈,实现 Meta 公司炫酷的 3D 动态 Logo ...

  4. CoreText精彩文字轮廓绘制动画的一点改进

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 原文在: http://oleb.net/blog/2010/ ...

  5. Canvas 3D球形文字云动画特效

    Canvas 3D球形文字云动画特效 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器 ...

  6. jQuery+html5实现的3D动态切换焦点轮播幻灯片

    今天爱编程给网友们分享一款基于jQuery+html5实现的3D动态切换焦点轮播幻灯片,支持左右箭头和圆点按钮播放控制,支持多种不同的3D动态切换特效,自适应全屏显示,兼容360.FireFox.Ch ...

  7. 3D动态人脸识别技术分析——世纪晟人脸识别实现三维人脸建模

    - 目录 - 国内3D动态人脸识别现状概况 - 新形势下人脸识别技术发展潜力 - 基于深度学习的3D动态人脸识别技术分析 1. 非线性数据建模方法 2. 基于3D变形模型的人脸建模 - 案例结合——世 ...

  8. WPF 3D动态加载模型文件

    原文:WPF 3D动态加载模型文件 这篇文章需要读者对WPF 3D有一个基本了解,至少看过官方的MSDN例子. 一般来说关于WPF使用3D的例子,都是下面的流程: 1.美工用3DMAX做好模型,生成一 ...

  9. Directx 3D编程实例：绘制3DMesh

    最近朋友建议我写一些关于微软云技术的博客留给学校下一届的学生们看,怕下一届的MSTC断档.于是我也觉的有这个必要.写了几篇博客之后,我觉得也有必要把这一年的学习内容放在博客做个纪念,就这样写了本篇博客 ...

随机推荐

  1. 无法加载文件C:\Users\TANG\AppData\Roaming\npm\nrm.ps1，因为在此系统上禁止运行脚本

    # 碰到问题解决过程 > 1. 刚在一个新的机器上装node环境时,要用一个nrm管理镜像源时.报了一个错,如图1 ![图1](https://img2018.cnblogs.com/blog/ ...

  2. mysql主从之配置验证

    实验环境: master  192.168.132.121 主库 slave     192.168.132.122 从库 一 mysql主从复制的配置 1.1 mysql主库给从库复制的权限 mys ...

  3. centos curl命令post携带body json数据

    1,接口链接 https://xxx.com/xqAppServer/api/APPBizRest/idfaDuplicateRemove/v1/?sysIdfa=661743D1-A76E-498A ...

  4. MyBatis 注解开发+逆向(Generator)

    注解开发 最初设计时,MyBatis 是一个 XML 驱动的框架.配置信息是基于 XML 的,而且映射语句也是定义在 XML 中的.随着技术的更新发展,对于开发效率要求也原来越高,特别是一些小型项目; ...

  5. 20191031-6beta week 1/2 Scrum立会报告+燃尽图 04

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9914 git地址:https://e.coding.net/Eustia/ ...

  6. 从零开始のcocos2dx生活（八）ParticleSystemQuad

    https://learnopengl-cn.github.io/01%20Getting%20started/04%20Hello%20Triangle/#_1 写的真的非常好-最近没时间拜读,只看 ...

  7. .NET Core 3.1之深入源码理解HealthCheck（二）

    写在前面 前文讨论了HealthCheck的理论部分,本文将讨论有关HealthCheck的应用内容. 可以监视内存.磁盘和其他物理服务器资源的使用情况来了解是否处于正常状态. 运行状况检查可以测试应 ...

  8. Java事务失效

    问题复现,用伪代码复现问题! 事务配置文件 <tx:advice id="txAdvice" transaction-manager="transactionMan ...

  9. 1063 计算谱半径 (20 分)C语言

    在数学中,矩阵的"谱半径"是指其特征值的模集合的上确界.换言之,对于给定的 n 个复数空间的特征值 { a1+b​1​​ i,⋯,a​n​​ +b​n​​ i },它们的模为实部与 ...

  10. Python PyInstaller安装和使用教程

    安装 PyInstalle Python 默认并不包含 PyInstaller 模块,因此需要自行安装 PyInstaller 模块. 安装 PyInstaller 模块与安装其他 Python 模块 ...