【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资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...
随机推荐
- loading图标modal弹窗 和jquery ajax的关系
在ajax配置中 ,async:false,非异步,modal窗口会失效,只有重新设置为async:true,或者删除async的设置,则loading的模态框才能展示出来 loading图标的模态框 ...
- codeforces#505--C Plasticine Zebra
C. Plasticine zebra time limit per test 1 second memory limit per test 256 megabytes input standard ...
- Android USER 版本与ENG 版本的差异
Android USER 版本与ENG 版本的差异 [Keyword] USER ENG user eng 用户版本 工程版本 差异 [Solution] Google 官方描述: USER/USER ...
- Windows中的DNS服务——正向解析&反向解析配置 分类： AD域 Windows服务 2015-07-16 20:21 19人阅读 评论(0) 收藏
坚信并为之坚持是一切希望的原因. DNS服务是AD域不可或缺的一部分,我们在部署AD域环境时已经搭建了DNS服务(windows server 2008 R2域中的DC部署),但是DNS服务的作用还是 ...
- 浅谈Java中的equals和==(转载)
在初学Java时,可能会经常碰到下面的代码: 1 String str1 = new String("hello"); 2 String str2 = new String(&qu ...
- 【Linux学习 】Linux使用Script命令来记录并回放终端会话
一背景 二script命令简介 1 什么script命令 2 script命令操作 21 file选项 22 options选项 23 退出script 三Script命令结合实际使用场景 1 先在终 ...
- mysql 数据操作 单表查询 简单查询 避免重复DISTINCT
创建数据库company create database company charset=utf8; use company; company.employee 员工id id int 姓名 emp_ ...
- [py]python的深拷贝和浅拷贝
Python深复制浅复制or深拷贝浅拷贝 简单点说 copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象. copy.deepcopy 深拷贝 拷贝对象及其子对象 用一个简单的例子说明 ...
- Swagger2 生成 Spring Boot API 文档
Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.本文主要介绍了在 Spring Boot 添加 Swagger 支持, 生成可自动维护的 A ...
- cookie、session、sessionid ，jsessionid 的区别
本文是转载虫师博客的文章http://www.cnblogs.com/fnng/archive/2012/08/14/2637279.html cookie.session.sessionid 与js ...