在这里介绍一种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. idea2020注册码永久激活（激活到2100年）

    首先有图有真相: 资源链接: 链接:https://pan.baidu.com/s/1DPIllnyhc7H4qL2yQb0OvQ 提取码:lbjx 第一步:将bin目录下的三个文件拷贝到IDEA安装 ...

  2. Django进阶一

    目录 表关系创建 django请求生命周期流程 路由层 无名分组 有名分组 反向解析 路由分发 名称空间 虚拟环境 django版本区别 伪静态 视图层 三板斧 JsonResponse前后端交互数据 ...

  3. js中的事件冒泡

    事件冒泡和阻止事件冒泡: 事件冒泡的原理:从实际操作的元素(事件)向上级父元素一级一级执行下去,直到达到document/window,冒泡过程结束.例如:假设我有一个 div 盒子,里面嵌套了1个子 ...

  4. 阿里云ECS单节点Kubernetes部署

    参考资料: kubernetes官网英文版 kubernetes官网中文版 环境.工具 阿里云学生机ECS.Ubuntu.docker.kubectl1.15.4.kubelet1.15.4.kube ...

  5. 傅立叶变换—DFT

    背景:最近看到实验室其他同学在用傅立叶变换解决问题,我也想通过并行来解决这个问题,所以看了一下傅立叶变换的东西,感觉涵盖的东西还能多,我只是初步做了一下了解(一定很片面,但是我主要是为了应用它,主要了 ...

  6. Java防锁屏小程序

    为防止系统桌面自动锁屏,只需打成jar包,写个批处理程序start.bat,双击执行保持dos窗口执行即可,无其他影响. 程序设计为每30秒动一次鼠标,可根据需要调整. 附代码: package ma ...

  7. 【转】Beyond compare4密钥

    转:https://blog.csdn.net/lemontree1945/article/details/92963423 w4G-in5u3SH75RoB3VZIX8htiZgw4ELilwvPc ...

  8. css控制div等比高度

    在移动端开发中,在banner轮播图未加载出来之前,banner层是不占文档流高度的,当从服务器获取完banner数据,展示的时候,banner层因为有了内容 所以会撑开,导致banner层下面的内容 ...

  9. echarts更改轴线颜色

    xAxis : [ { type : 'category', data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月 ...

  10. Ceph日常运维管理和排错 -- <7>

    Ceph日常运维管理 集群监控管理 集群整体运行状态 [root@cephnode01 ~]# ceph -s cluster: id: 8230a918-a0de-4784-9ab8-cd2a2b8 ...