在这里介绍一种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. vagrant在windows下的安装和配置（一）

    记录一下安装和配置过程中的一些坑步骤一分别下载vagrant和VirtualBox,我这里下载的是vagrant_1.9.1.msi 和 VirtualBox-5.1.14-112924-Win.ex ...

  2. 使用element的upload组件实现一个完整的文件上传功能（上）

    说到标题就有点心塞了,前段时间项目上需要实现一个文件上传的功能,然后就咔咔的去用了element的upload组件,不用不知道一用吓一跳哇. 在使用的过程中遇到了很多让意想不到的问题,后来也因为时间问 ...

  3. Ambari+HDP+HDF离线安装包下载清单

    Ambari 2.7.3 Repositories OS Format URL RedHat 7 CentOS 7 Oracle Linux 7 Base URL http://public-repo ...

  4. 2019 沈阳网络赛 Fish eating fruit

    这题看了三个月,终于过了,第一次看的时候没学树形DP,想用点分治但是不会 后来学了二次扫描,就有点想法了.... 这东西也真就玄学了吧... #include<iostream> #inc ...

  5. EnvironmentAware接口的作用

    在SpringBoot中的应用 凡注册到Spring容器内的bean,实现了EnvironmentAware接口重写setEnvironment方法后,在工程启动时可以获得application.pr ...

  6. 计算机专业如何高质量的走完大学四年?毕业成为Offer收割机

    前言:迷茫本就是青春该有的模样,但不要让未来的你讨厌现在的自己. "就要毕业了. 回头看自己所谓的大学生活, 我想哭,不是因为离别,而是因为什么都没学到. 我不知,简历该怎么写,若是以往我会 ...

  7. GNE: 4行代码实现新闻类网站通用爬虫

    GNE(GeneralNewsExtractor)是一个通用新闻网站正文抽取模块,输入一篇新闻网页的 HTML, 输出正文内容.标题.作者.发布时间.正文中的图片地址和正文所在的标签源代码.GNE在提 ...

  8. React Hooks 完全指南，读React作者博文感悟（2W字精华）

    阅读 facebook大佬:Dan Abramov 的文章颇有感悟 大佬 github地址 https://github.com/gaearon 重点总结 useEffect 是同步的 状态是捕获的当 ...

  9. 2020了你还不会Java8新特性？（五）收集器比较器用法详解及源码剖析

    收集器用法详解与多级分组和分区 为什么在collectors类中定义一个静态内部类? static class CollectorImpl<T, A, R> implements Coll ...

  10. 解决springmvc报错，java.lang.IllegalArgumentException:No converter found for return value of type: class .......

    1.背景 最近在自学java中的三大框架 ssm,在 springmvc 与 mybatis 整合过程中用到 json 数据交互.因为看的视频的是比较早的嘛,一些配置.jar包什么的,要么跟 jdk ...