在这里介绍一种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. Vijos1035 贪婪的送礼者 [map的应用]

    1.题意:一群人之间每人准备了一些钱互相送(你们好无聊(⊙o⊙)…),数据给出了每人准备的金额与送出的对象,且保证送给每人的金额是平均的,最后要求出每个人收到的比送出的钱多的数目. 2.分析:模拟题, ...

  2. Percona-XtraDB-Cluster 5.7版本（PXC）集群部署

    PXC(Percona-XtraDB-Cluster)5.7版本集群部署 Centos 7.3系统部署Mysql 集群 PXC三个节点分别执行和安装(1)配置hosts cat /etc/hosts1 ...

  3. 抽象类（abstract class）和接口（interface）有什么区别?

    抽象类中可以有构造器.抽象方法.具体方法.静态方法.各种成员变量,有抽象方法的类一定要被声明为抽象类,而抽象类不一定要有抽象方法,一个类只能继承一个抽象类. 接口中不能有构造器.只能有public修饰 ...

  4. python入门之字符串的魔法

    1.test="alex" v=test.capitalize() print(v)               //输出结果首字母大写 2.test1="alex&qu ...

  5. mysql中information_schema.columns字段说明

    1. 获取所有列信息(COLUMNS) SELECT  *  FROM information_schema.COLUMNS WHERE  TABLE_SCHEMA='数据库名';  COLUMNS表 ...

  6. 【一起学源码-微服务】Nexflix Eureka 源码十：服务下线及实例摘除，一个client下线到底多久才会被其他实例感知？

    前言 前情回顾 上一讲我们讲了 client端向server端发送心跳检查,也是默认每30钟发送一次,server端接收后会更新注册表的一个时间戳属性,然后一次心跳(续约)也就完成了. 本讲目录 这一 ...

  7. C# 对象与引用变量

    从宏观的角度来看,对象是类的实例.比如: //定义一个名为Someone的类,代表这么一些人(通过指定年龄,性别,性格等基本信息)class Someone {  public int age;  p ...

  8. Mysql 字段类型与约束条件

    一.数值类型 二.日期类型 三.枚举与集合 四.约束条件 五.设置严格模式 一.数值类型 1.1 整型 应用场景: id号.年龄... tinyint: 有符号:默认范围 -128, 127 无符号: ...

  9. Java截图小程序源码

    Java编写的全屏截图小程序 package cnom.test.testUtils; import java.awt.AWTException; import java.awt.Dimension; ...

  10. WPF 添加提示动画

    下面放一张效果图: 那么具体是怎么实现呢: 前端XAML中: <Image Source="/Images/tips.png" HorizontalAlignment=&qu ...