【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资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...
随机推荐
- 在CentOS7下从0开始搭建docker并发布tomcat项目
一切从0开始,我也是个小白: 1.检查你的系统是不是高于3.8的内核,如果没有请升级CentOS7或者Ubuntu 14 #uname -a 2.CentOS7下安装docker #yum -y in ...
- linux: convmv =-======pkgs.org
convmv 不同系统文件名转化 windows: gbk linux: utf8 wget--url coding. vim ---encoding,termcode, fileencoding, ...
- SDL结合QWidget的简单使用说明(2)
上篇主要讲了针对yv12流数据的渲染,但有时候我们显示视频还要求加一些信息,比如头像,昵称等等.一般的想法是在渲染窗口之上做一个小控件来负责: 但是很遗憾,你会发现你的控件被SDL的渲染完全遮住了,渲 ...
- [原创]chromium源码阅读-进程间通信IPC.消息的接收与应答
chromium源码阅读-进程间通信IPC.消息的接收与应答 chromium源码阅读-进程间通信IPC.消息的接收与应答 介绍 chromium进程间通信在win32下是通过命名管道的方式实现的 ...
- mysql 约束条件 primary key 主键
primary key字段的值不为空且唯一 约束:not null unique 存储引擎:innodb 对于innodb来说,一张表内必须有一个主键 单列做主键多列做主键(复合主键) 通常都是id字 ...
- altium designer生成gerber步骤
什么是gerber文件 Gerber文件是所有电路设计软件都可以产生的文件,在电子组装行业又称为模版文件(stencil data),在PCB制造业又称为光绘文件.可以说Ger ...
- ROS 命令学习记录
#catkin_init_workspace //just get CMakeList.txt #catkin_make //增加了信文件夹 build和devel #Catkin_creat_pk ...
- （20）Cocos2d-x中的引用计数（Reference Count）和自动释放池（AutoReleasePool）
引用计数 引用计数是c/c++项目中一种古老的内存管理方式.当我8年前在研究一款名叫TCPMP的开源项目的时候,引用计数就已经有了. iOS SDK把这项计数封装到了NSAutoreleasePool ...
- (16)Cocos2d-x 多分辨率适配完全解析
Overview 从Cocos2d-x 2.0.4开始,Cocos2d-x提出了自己的多分辨率支持方案,废弃了之前的retina相关设置接口,提出了design resolution概念. 3.0中有 ...
- echarts 饼状图 改变折线长度
$(function (){ //ups部分 var myChart = echarts.init(document.getElementById('result')) var option = { ...