【Demo】CSS3 动画文字
效果图：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Concert+One);
*{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body{
background: #0a0a0a;
overflow: hidden;
text-align: center; }
figure{
animation: wobble 5s ease-in-out infinite;
-moz-animation: wobble 5s ease-in-out infinite;
-ms-animation: wobble 5s ease-in-out infinite;
-webkit-animation: wobble 5s ease-in-out infinite;
transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-webkit-transform-origin: center center;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
@keyframes wobble {
0%,100%{
transform:rotate3d(1,1,0,40deg);
-moz-transform:rotate3d(1,1,0,40deg);
-ms-transform:rotate3d(1,1,0,40deg);
-webkit-transform:rotate3d(1,1,0,40deg);
}
25%{
transform:rotate3d(-1,1,0,40deg);
-moz-transform:rotate3d(-1,1,0,40deg);
-ms-transform:rotate3d(-1,1,0,40deg);
-webkit-transform:rotate3d(-1,1,0,40deg);
}
50%{
transform:rotate3d(-1,-1,0,40deg);
-moz-transform:rotate3d(-1,-1,0,40deg);
-ms-transform:rotate3d(-1,-1,0,40deg);
-webkit-transform:rotate3d(-1,-1,0,40deg);
}
75%{
transform:rotate3d(1,-1,0,40deg);
-moz-transform:rotate3d(1,-1,0,40deg);
-ms-transform:rotate3d(1,-1,0,40deg);
-webkit-transform:rotate3d(1,-1,0,40deg);
}
}
@keyframes glow{
0%,100%{
text-shadow: 0 0 30px red;}
25%{text-shadow: 0 0 30px orange;}
50%{ text-shadow:0 0 30px forestgreen; }
75%{ text-shadow:0 0 30px cyan; }
}
h1{
display: block;
width: 100%;
padding: 40px;
color: #030303;
line-height: 1.5;
font: 900 8em 'Concert One', sans-serif;
text-transform: uppercase;
position: absolute;
animation:glow 10s ease-in-out infinite;
-moz-animation: glow 10s ease-in-out infinite;
-ms-animation: glow 10s ease-in-out infinite;
-webkit-animation: glow 10s ease-in-out infinite;
}
h1:nth-child(2){
transform:translateZ(5px);
-moz-transform:translateZ(5px);
-ms-transform:translateZ(5px);
-webkit-transform:translateZ(5px);
}
h1:nth-child(3){
transform:translateZ(10px);
-moz-transform:translateZ(10px);
-ms-transform:translateZ(10px);
-webkit-transform:translateZ(10px);
}
h1:nth-child(4){
transform:translateZ(15px);
-moz-transform:translateZ(15px);
-ms-transform:translateZ(15px);
-webkit-transform:translateZ(15px);
}
h1:nth-child(5){
transform:translateZ(20px);
-moz-transform:translateZ(20px);
-ms-transform:translateZ(20px);
-webkit-transform:translateZ(20px);
}
h1:nth-child(6){
transform:translateZ(25px);
-moz-transform:translateZ(25px);
-ms-transform:translateZ(25px);
-webkit-transform:translateZ(25px);
}
h1:nth-child(7){
transform:translateZ(30px);
-moz-transform:translateZ(30px);
-ms-transform:translateZ(30px);
-webkit-transform:translateZ(30px);
}
h1:nth-child(8){
transform:translateZ(35px);
-moz-transform:translateZ(35px);
-ms-transform:translateZ(35px);
-webkit-transform:translateZ(35px);
}
h1:nth-child(9){
transform:translateZ(40px);
-moz-transform:translateZ(40px);
-ms-transform:translateZ(40px);
-webkit-transform:translateZ(40px);
}
h1:nth-child(10){
transform:translateZ(45px);
-moz-transform:translateZ(45px);
-ms-transform:translateZ(45px);
-webkit-transform:translateZ(45px);
} </style>
</head>
<body>
<figure>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
<h1>Glowing text</h1>
</figure>
</body>
</html>
【Demo】CSS3 动画文字的更多相关文章
- CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现
前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
- 代码：css3动画效果demo
四行文字会逐次掉落: 如果要停留在最后一帧的动画,注意要用forwards,不要用both. <style type="text/css"> @-webkit-key ...
- demo: 全页面CSS3动画的一个参考例子
全页面CSS3动画的一个参考例子: http://wow.blizzard.cn/wow/wod-achievement/ 魔兽的一个活动页 第二页.第三页,文字进入页面 <script src ...
- Css3动画效果,彩色文字效果,超简单的loveHeart
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...
- CSS3动画实现高亮光弧效果,文字和图片（一闪而过）
前言 好久没有写博客啦,高亮文字和图片一闪而过的特效,用CSS3来写 先看文字吧, 就上代码了 .shadow { /* 背景颜色线性渐变 */ /* 老式写法 */ /* linear为线性渐变,也 ...
- 【Demo】CSS3 动画
CSS3 动画(@keyframes,animation) CSS3 @keyframes 规则 要创建CSS3动画,你将不得不了解@keyframes规则. @keyframes规则是创建动画. @ ...
- CSS3动画遮罩文字特效
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- CSS3火焰文字特效制作教程
原文:CSS3火焰文字特效制作教程 用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...
随机推荐
- Oracle开发 之 主-外键约束FK及约束的修改
试验环境: 1)数据库版本:oracle 11.2.0.4 2)建表脚本:以scott的dept及emp表为基础. 父表:dept -- Create table create table DEPT ...
- Linux下使用iotop检测磁盘io使用情况
介绍 Linux下的IO统计工具如iostat, nmon等大多数是只能统计到per设备的读写情况, 如果你想知道每个进程是如何使用IO的就比较麻烦. iotop 是一个用来监视磁盘 I/O 使用状况 ...
- The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path(Myeclipse添加Server Library)
网上找练习的项目导入到myeclipse项目发现每个JSP 出现错误The superclass "javax.servlet.http.HttpServlet" was not ...
- Python开发【笔记】：探索Python F-strings
F-strings 在python3.6.2版本中,PEP 498 提出一种新型字符串格式化机制,被称为“字符串插值”或者更常见的一种称呼是F-strings(主要因为这种字符串的第一个字母是f) 简 ...
- 寻找最小(最大)的k个数
题目描述:输入n个整数,输出其中最小的k个元素. 例如:输入1,2,3,4,5,6,7,8这8个数字,则最小的4个数字为1,2,3,4. 思路1:最容易想到的方法:先对这个序列从小到大排序,然后输出前 ...
- （1.1）DML增强功能-CTE
1.CTE的通用形式 WITH temp_name as ( CTE查询结果集 ) 释义: (1)with/as :关键字 (2)temp_name:为CTE临时使用名称,可以看初学者做是一个临时表 ...
- mysql 整数类型 数值类型 tinyint
1.整数类型 整数类型:TINYINT SMALLINT MEDIUMINT INT BIGINT 作用:存储年龄,等级,id,各种号码等 ============================== ...
- t检验&z检验学习[转载]
转自:https://blog.csdn.net/m0_37777649/article/details/74937242 1.什么是T检验? T检验是假设检验的一种,又叫student t检验(St ...
- 【转】Deep Learning（深度学习）学习笔记整理系列之（七）
9.5.Convolutional Neural Networks卷积神经网络 卷积神经网络是人工神经网络的一种,已成为当前语音分析和图像识别领域的研究热点.它的权值共享网络结构使之更类似于生物神经网 ...
- 【PGM】Representation--Knowledge Engineering，不同的模型表示，变量的类型，structure & parameters
Part 1. 重要的区别: Template based vs. specific Directed vs. undirected Generative vs. discrimina ...