HTML部分：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>动态字体</title>

		<link rel="stylesheet" type="text/css" href="index.css"/>

	</head>

	<body>

		<h1>Best Look</h1>

		<h2>Yeah 666!</h2>

	</body>

</html>

CSS部分：

:root {

	font-size: 32px;

}

body {

	display: flex;

	justify-content: center;

	align-items: center;

	min-height: 100vh;

	flex-direction: column;

	background-color: #33ff00;

	font-family: "arial, helvetica, sans-serif";

	perspective: 2500px;

}

h1, h2 {

	position: relative;

	padding: 0;

	margin: 0;

	color: #fff;

}

h1 {

	font-size: 6rem;

	animation: 5s bast ease-in-out infinite;

}

@keyframes bast{

	0%, 100% {

		transform: rotate3d(0, 1, 0, -20deg);

	}

	50% {

		transform: rotate3d(0, 1, 0, 20deg);

	}

}

h2 {

	font-size: 3rem;

	letter-spacing: -4px;

	animation: 2.5s ye ease-in-out infinite;

}

@keyframes ye {

	0% 100% {

		transform: translate3d(1, 0, 0, -10deg);

	}

	50% {

		transform: rotate3d(1, 0, 0, 10deg);

	}

}

h1::before,

h1::after {

	content: 'Best Look';

}

h2::before,

h2::after {

	content: 'Yeah 666!';

}

h1::before,

h1::after,

h2::before,

h2::after {

	position: absolute;

	top: 0;

	left: 0;

}

h1::before {

	color: #9900ff;

	z-index: -3;

	animation: 5s h1-before ease-in-out infinite;

}

@keyframes h1-before {

	0%, 100% {

		transform: translate3d(15px, 5px, -10px);

	}

	50% {

		transform: translate3d(-15px, 5px, -10px);

	}

}

h1::after {

	color: #330033;

	z-index: -4;

	animation: 5s h1-after ease-in-out infinite;

}

@keyframes h1-after {

    0%, 100% {

		transform: translate3d(30px, 10px, -20px);

	}

	50% {

		transform: translate3d(-30px, 10px, -20px);

	}

}

h2::before {

	color: #00ccff;

	z-index: -1;

	animation: 2.5s h2-before ease-in-out infinite;

}

@keyframes h2-before {

	0%, 100% {

		transform: translate3d(0px, 6px, -10px);

	}

	50% {

		transform: translate3d(0px, -3px, -10px);

	}

}

h2::after {

	color: #000ccc;

	z-index: -2;

	animation: 2.5s h2-after ease-in-out infinite;

}

@keyframes h2-after {

	0%, 100% {

		transform: translate3d(0px, 12px, -20px);

	}

	50% {

		transform: translate3d(0px, -6px, -20px);

	}

}

效果图：



												


											
用原生CSS编写动态字体的更多相关文章
	

    
								
  1. canvas ：原生javascript编写动态时钟
		
    canvas :原生javascript编写动态时钟     此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...
    
		
    2. 
						
  2. 用原生CSS编写-怦怦跳的心
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    3. 
						
  3. HTML+CSS编写规范
		
    在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...
    
		
    4. 
						
  4. 原生 Javascript 编写五子棋
		
    原文地址:原生 Javascript 编写五子棋 博客地址:http://www.extlight.com 一.背景 近一个月没写 Javascript 代码,有点生疏.正好浏览网页时弹出五子棋的游戏 ...
    
		
    5. 
						
  5. css加载字体跨域问题
		
    刚才碰到一个css加载字体跨域问题,记录一下.站点的动态请求与静态文件请求是不同的域名的.站点的域名为 www.domain.com,而静态文件的域名为 st.domain.com.问题:页面中加载c ...
    
		
    6. 
						
  6. 原生css 中变量的使用
		
    前两天看到阮大神的一篇在css中使用变量的文章,整理了一下. 这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明  ...
    
		
    7. 
						
  7. CSS编写指导规范和建议
		
    在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 易于维护 保持代码清晰易懂 保持 CSS 的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一 ...
    
		
    8. 
						
  8. 使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式
		
    查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...
    
		
    9. 
						
  9. 原生 CSS 网格布局学习笔记
		
    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. hdu 5093 Battle ships（二分图最大匹配）
			
    题意: M*N的矩阵,每个格子上是三个之一:*.o.#.                     (1 <= m, n <= 50) *:海洋,战船可以停在上面.      o:浮冰,战船 ...
    
			
    2. 
						
  2. buuoj刷题 October
			
    2019 极客大挑战 web easysql 直接万能密码登就完事了 LoveSQL 万能密码登进去,给了md5,没解出来 手注吧,都要忘了手注怎么注了 猜字段数 3的时候正常不报错 看回显位,2,3 ...
    
			
    3. 
						
  3. part 36 AngularJS route reload
			
    In this video we will discuss angular route service reload() method. This method is useful when you  ...
    
			
    4. 
						
  4. Java学习（十二）
			
    今天安装讲师推荐下载了一个叫Hbuiler X的IDE,并且学习了选择器的知识. 作为练习,写了一下的代码 <!DOCTYPE html> <html> <head> ...
    
			
    5. 
						
  5. Mac 安装 RabbitMQ 出现的问题
			
    安装 RabbitMQ 在官网这里按照步骤来就行 出现Error: Permission denied @ apply2files - /usr/local/lib/docker/cli-plugin ...
    
			
    6. 
						
  6. go微服务框架Kratos笔记（一）入门教程
			
    kratos简介 Kratos 一套轻量级 Go 微服务框架,包含大量微服务相关功能及工具 本文基于kratos v2.0.3,windows平台,其他系统平台均可借鉴参考 环境搭建 Golang开发 ...
    
			
    7. 
						
  7. 菜鸡的Java笔记 第三十五 接口定义增强
			
    接口定义增强        在java从一开始到现在接口之中的核心组成部分:抽象方法与全局常量,但是随着技术的不断发展,用户在使用过程之中发现了有一些问题        如果说现在有一个接口经过了长年 ...
    
			
    8. 
						
  8. 使用pmml跨平台部署机器学习模型Demo——房价预测
			
      基于房价数据,在python中训练得到一个线性回归的模型,在JavaWeb中加载模型完成房价预测的功能. 一. 训练.保存模型 工具:PyCharm-2017.Python-39.sklearn2 ...
    
			
    9. 
						
  9. Maven中所用的Dependency查找方法
			
    用了Maven,所需的JAR包就不能再像往常一样,自己找到并下载下来,用IDE导进去就完事了,Maven用了一个项目依赖(Dependency)的概念,用俗话说,就是我的项目需要用你这个jar包,就称 ...
    
			
    10. 
						
  10. [atARC110F]Esoswap
			
    先构造使得$p_{i}$降序(即$p_{i}=n-1-i$),只需要从后往前,不断执行$i$操作直至合法即可 正确性的证明:首先保证了$[0,n-i)$这些数字都已经出现,因此操作不会破坏已确定的数字 ...
    
			
    11.