【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资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...
随机推荐
- Css-浅谈如何将多个inline或inline-block元素垂直居中
一直以来,前端开发过程中本人遇到最多,最烦的问题之一是元素如何垂直居中,发现开发过程中,元素的垂直居中一直是个很大的麻烦事,经常发现PC端和电脑模拟元素都垂直居中了,但是遇到移 ...
- C#操作word之插入图片
假如我们导出一份简历到word文档,那势必可能要同时导出我们包含的简历,下面就来试一下如何和通过C#代码,将图片插入到word文档中. 为了简便起见,就简单一点.类似下面这样的 姓名 张三 照片 ...
- Ora-1157 ora-1110错误解决案例一枚
1.数据库打开报错如下: SQL> alter database open; alter database open * ERROR at line 1: ORA-01157: cannot i ...
- python基础之迭代器协议和生成器
迭代器和生成器补充:http://www.cnblogs.com/luchuangao/p/6847081.html 一 递归和迭代 略 二 什么是迭代器协议 1.迭代器协议是指:对象必须提供一个ne ...
- Spongebob and Squares---cf599D（数学公式1 + (1+2) + (1+2+3) +....）
题目链接:http://codeforces.com/contest/599/problem/D 一个3×5(m×n)的长方形,里面包含15个边长为1的正方形,有8个边长为2的正方形,有3个边长为3的 ...
- Currency Exchange---poj1860 ( spfa, 回路，最长路）
题目链接:http://poj.org/problem?id=1860 题解: 两种情况YES,一种是存在正权回路: 一种是求最长路后,实现了增值,也是YES: 用spfa来判断是否存在正权回路,其实 ...
- 【开发者笔记】c# 调用java代码
一.需求阐述 java实现的一个算法,想翻译成c#,翻译代码之后发现有bug,于是不调试了.直接将jar打包成dll拿来用. 二.原理说明 jar可以通过ikvmc工具打包成dll,然后在项目中引入该 ...
- gb28181的SPVMN测试环境搭建以及设备端和服务器的具体实现
1.GB/T28181开发1之SPVMN(1.0.0.1)环境搭建 https://blog.csdn.net/hiwubihe/article/details/82910685 2.SPVMN 视频 ...
- HDFS中的读写数据流
1.文件的读取 在客户端执行读取操作时,客户端和HDFS交互过程以及NameNode和各DataNode之间的数据流是怎样的?下面将围绕图1进行具体讲解. 图 1 客户端从HDFS中读取数据 1)客户 ...
- 自动化测试中级篇——LazyAndroid UI自动化测试框架使用指南
原文地址https://blog.csdn.net/iamhuanggua/article/details/53104345 简介 一直以来,安卓UI自动化测试都存在以下两个障碍,一是测试工具Mo ...