在这里介绍一种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# 如何解析XML

  2. Delphi中的Val函数和iif函数（出错的时候，会有索引值）

    在delphi中Val是一个将字符串转换为数字的函数,Val(S; var V; var Code: Integer)第一个参数是要转换的字符串,第二个参数存放转换后的数字,可以是整数或浮点数,第三个 ...

  3. 027.MFC_映射消息

    映射消息MFC中的消息映射宏 DECLARE_MESSAGE_MAP BEGIN_MEASSAGE_MAP END_MESSAGE_MAP向导自动映射消息手动添加映射消息 MFC会帮我们自动映射大部分 ...

  4. Docker zookeeper 集群 for Docker desktop (win)

    docker desktop win10 环境下的 zookeeper 容器创建并运及可能出现的问题: https://github.com/poazy/boazy-learn/blob/master ...

  5. vue新增属性响应式更新的问题

    根据官方文档定义: 如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删 ...

  6. 将Samba设置为Active Directory域控制器

    一 简介 从版本4.0开始,samba可以作为Active Directory(AD)域控制器(DC)运行,如果在生产环境中安装samba,建议运行两个或者多个DC用于故障转移 本文介绍如何让将一个S ...

  7. C# Charts绘制多条曲线

    一.创建winform工程 拖拽控件Chart 二.比如要绘制俩条曲线,设置Chart控件的属性Series 三.chart的属性根据自己的业务需求设计,我这里只设置了图标类型 代码: using S ...

  8. `docker数据持久化volume和bind mounts两种方式

    将数据从宿主机到容器的三种方式: ,volumes:docker管理宿主机文件系统的一部分(/var/lib/docker/volumes)保存数据的最佳方式 ,bind mounts 将宿主机上的任 ...

  9. DataX-MysqlReader 插件文档

    :first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdow ...

  10. 浅谈Linux下/etc/passwd文件

    浅谈Linux 下/etc/passwd文件 看过了很多渗透测试的文章,发现在很多文章中都会有/etc/passwd这个文件,那么,这个文件中到底有些什么内容呢?下面我们来详细的介绍一下. 在Linu ...