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. 网络摄像机中的IR-CUT详解
			
    自然界存在着各种波长的光线,通过折射人眼能看到不同颜色的光线,这就是光线的波长不同所导致的.其实还有许多光线是人眼看不到的,人眼识别光线的波长范围在320nm-760nm之间,超过760nm的光线人眼 ...
    
			
    2. 
						
  2. Shell脚本学习笔记之（自动填充函数模板）
			
    其实,vii 就是写的一个脚本,跟 vi 没半毛钱关系,只不过借用一下这个名字而已.那这个脚本长什么样呢?look: 下面来详细的解析上面的代码,来看第1行: #!/bin/bash 这是Shell脚 ...
    
			
    3. 
						
  3. greenplum分布键的hash值计算分析
			
    greenplum 数据分布策略 greenplum 是一个 MPP 架构的数据库,由一个 master 和多个 segment 组成(还可选配置一个 standby master),其数据会根据设置 ...
    
			
    4. 
						
  4. AtCoder Beginner Contest 210题解
			
    A B 过水,略... C 统计长度为k的区间的最多本质不同的数.用尺取法维护下左右指针就可以了.调了许久的原因是更新答案时出现了问题. 当我移动指针时,我们应该移动一个就更新一个,而不是将移动与更新 ...
    
			
    5. 
						
  5. 王爽汇编第十章,call和ret指令
			
    目录 王爽汇编第十章,call和ret指令 call和ret指令概述: ret和retf ret指令 retf指令 call 和 ret 的配合使用 call指令详解 call原理 call指令所有写 ...
    
			
    6. 
						
  6. 【解决方案】Pyinstaller打包exe策略（简单实用）
			
    场景说明 在业务场景中, 经常需要Python开发一些小程序/脚本/GUI界面,进行简单的项目测试或未安装Python 的小伙伴们使用. 使用Pyinstaller将Python脚本或者项目打包,生成 ...
    
			
    7. 
						
  7. Python使用ConfigParser模块读取配置文件(config.ini)以及写入配置文件
			
    前言 使用配置文件来灵活的配置一些参数是一件很常见的事情,配置文件的解析并不复杂,在python里更是如此,在官方发布的库中就包含有做这件事情的库,那就是configParser.configPars ...
    
			
    8. 
						
  8. Java测试开发--Set、Map、List三种集合（四）
			
    1.集合类型主要有3种:set(集).list(列表)和map(映射). 2.三者关系 3.Set set接口是Collection接口的一个子接口,是无序的,set去重,也就是说set中不存在两个这 ...
    
			
    9. 
						
  9. 通俗易懂的HTML全知识梳理笔记（第一部分）
			
    文章目录 什么是HTML 块级元素和内联元素 属性 给`a`元素添加属性 布尔属性 HTML的空白 实体引用: 在HTML中包含特殊字符 head中的元数据 meta元素 在你的站点中增加自定义的图标 ...
    
			
    10. 
						
  10. Java学习（十四）
			
    玩云顶连跪一晚上,搞得心态有点崩了... 源计划5-4还是一星vn,吐了. 今天学习了伪元素: 语法是 :first-letter//元素的第一个字母的位置,如果:前不加元素,默认是#(即所有元素)  ...
    
			
    11.