用原生CSS编写动态字体
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编写动态字体的更多相关文章
- canvas ：原生javascript编写动态时钟
canvas :原生javascript编写动态时钟 此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...
- 用原生CSS编写-怦怦跳的心
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML+CSS编写规范
在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...
- 原生 Javascript 编写五子棋
原文地址:原生 Javascript 编写五子棋 博客地址:http://www.extlight.com 一.背景 近一个月没写 Javascript 代码,有点生疏.正好浏览网页时弹出五子棋的游戏 ...
- css加载字体跨域问题
刚才碰到一个css加载字体跨域问题,记录一下.站点的动态请求与静态文件请求是不同的域名的.站点的域名为 www.domain.com,而静态文件的域名为 st.domain.com.问题:页面中加载c ...
- 原生css 中变量的使用
前两天看到阮大神的一篇在css中使用变量的文章,整理了一下. 这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明 ...
- CSS编写指导规范和建议
在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 易于维护 保持代码清晰易懂 保持 CSS 的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一 ...
- 使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式
查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
随机推荐
- 探索Mybatis之JDK动态代理：探究Proxy.newProxyInstance()生成的代理类解析
Mybatis的Mapper接口UserMapper 1 package com.safin.Mapper; 2 3 import com.safin.Pojo.User; 4 5 import ja ...
- 从零开始的DIY智能家居 - 基于 ESP32 的土壤湿度传感器
前言 自从上次做了那个 甲醛传感器 和 水浊度传感器 之后开始尝到智能家居的甜头了,这两东西有没有用我不知道,但是没事的时候掏出手机瞄两眼,看着就让人很安心(￣︶￣). 于是懒惰的我开始琢磨把给植物浇 ...
- populating-next-right-pointers-in-each-node-ii leetcode C++
Follow up for problem "Populating Next Right Pointers in Each Node". What if the given tre ...
- python进阶（22）pydantic--数据类型校验
pydantic库的作用 pydantic库是一种常用的用于数据接口schema定义与检查的库. Pydantic 在运行时强制执行类型提示,并在数据无效时提供用户友好的错误信息. pydantic安 ...
- VMware vSphere中三种磁盘：精简置备/厚置备置零/厚置备延迟置零
VMware磁盘格式分类. 厚置备延迟置零.厚置备置零和精简置备1.厚置备延迟置零(zeroed thick) 以默认的厚格式创建虚拟磁盘.创建过程中为虚拟磁盘分配所需空间.创建时不会擦除物理设备上保 ...
- Chapter 1:Create You First 3D Scene With Three.js
1,各浏览器对WebGL的支持 手机浏览器对WebGL的支持: 书的源码:https://github.com/josdirksen/learning-threejs 第一次用浏览器打开代码可能无法正 ...
- [源码解析] PyTorch分布式(5) ------ DistributedDataParallel 总述&如何使用
[源码解析] PyTorch 分布式(5) ------ DistributedDataParallel 总述&如何使用 目录 [源码解析] PyTorch 分布式(5) ------ Dis ...
- 使用bs4中的方法爬取星巴克数据
import urllib.request # 请求url url = 'https://www.starbucks.com.cn/menu/' # 模拟浏览器发出请求 response = urll ...
- [atAGC052F]Tree Vertices XOR
结论 注意到如果$x$周围有偶数个1,对$x$操作显然不会改变$a_{x}$,因此不妨强制操作的点周围要有奇数个1,不难发现此时恰好会改变该点,即令$a_{x}=a_{x}\oplus 1$ 称$\{ ...
- [loj6254]最优卡组
特殊处理$c_{i}=1$的$i$,显然对这些$a_{i,1}$求和即可,以下都假设$c_{i}\ge 2$ 对于每一个$i$,将$a_{i,j}$从大到小排序:接下来,对于所有$i$,按照$a_{i ...