CSS3字体火焰燃烧效果
动画的CSS：
// fire
@keyframes fireDiv {
0% {
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
-2px -15px 11px #f80, 2px -25px 18px #f20;
}
25% {
text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3,
-3px -20px 11px #f80, 4px -30px 22px #f20;
}
50% {
text-shadow: 0 0 4px white, 2px -10px 8px #ff3, 2px -14px 10px #fd3,
-4px -25px 11px #f80, 4px -35px 25px #f20;
}
75% {
text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3,
-3px -20px 11px #f80, 4px -30px 22px #f20;
}
100% {
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
-2px -15px 11px #f80, 2px -25px 18px #f20;
}
}
All code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>fire</title>
<style>
.zhengshize {
font-size: 80px;
text-align: center;
font-family: "微软雅黑";
font-weight: bold;
color: #000;
margin-top: 50px;
animation: fireDiv 1s infinite;
}
@keyframes fireDiv {
0% {
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
-2px -15px 11px #f80, 2px -25px 18px #f20;
}
25% {
text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3,
-3px -20px 11px #f80, 4px -30px 22px #f20;
}
50% {
text-shadow: 0 0 4px white, 2px -10px 8px #ff3, 2px -14px 10px #fd3,
-4px -25px 11px #f80, 4px -35px 25px #f20;
}
75% {
text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3,
-3px -20px 11px #f80, 4px -30px 22px #f20;
}
100% {
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
-2px -15px 11px #f80, 2px -25px 18px #f20;
}
}
</style>
</head>
<body>
<div class="zhengshize">zhengshize</div>
</body>
</html>
CSS3字体火焰燃烧效果的更多相关文章
- CSS3文字描边 CSS3字体外部描边
给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...
- CSS3 字体
CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体. 通过 CSS3,web 设计师可以使用他们喜欢的任意字体. 当您您找到或购买到希望使用的 ...
- 收集的可以下载css3字体图标的网站
http://icomoon.io/app/ 可以选择跟简单调整图标打包成css3 字体下载, http://www.flaticon.com/categories/weapons
- css3 字体、2D转换、3D转换
学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...
- CSS3字体模块
介绍 字体提供了包含字符的视觉表现的资源.在最简单的等级中,其包含由字符编码到表示这些字符的形状(被称为字形)的映射信息.根据一组标准字体属性被分入一个字体家族的字体共享一个通用设计风格.在一个家族中 ...
- 绝对干货！！css3字体图标—丰富的阿里图标库iconfont的使用详解
在移动端Web项目开发中,我们往往需要用到一些小图标,比如搜索,返回,小菜单,小箭头等等..这如果还用切图你就OUT了.. 而这时CSS3提供的字体图标无疑是我们最好的选择,它就像字体一样,可以设置大 ...
- CSS3字体大小rem属性用法
PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较精确和固定. 只要页面某元素设置了px字体大小,其子元素/子孙元素未设置字体大小或设置的字体大小css优先级没父元素 ...
- CSS3字体图标
网址:http://icomoon.io/http://iconfont.cn/ 阿里巴巴字体库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- css3字体
1.定义个性化字体 @font-face{ font-family:字体名字; src:字体地址,可以多写几个用逗号隔开兼容浏览器 } div{ font-family:字体名字/*使用字体*/ } ...
随机推荐
- Spring表单验证
表单验证 给表单添加验证的步骤如下 1.在 pom.xml 里添加 hibernate-validator 依赖http://hibernate.org/validator/documentation ...
- 社区发现SLPA算法
社区(community)定义:同一社区内的节点与节点之间关系紧密,而社区与社区之间的关系稀疏. 设图G=G(V,E),所谓社区发现是指在图G中确定nc(>=1)个社区C={C1,C2,..., ...
- ui2-3
2016.9讲义 一．课程的主要内容和目的 二．课程所用工具软件——Photoshop CS6 1. Photoshop 的发展史 1990.2,ps1.0问世,1991.2,PS2.0发行,此后,进 ...
- P3440 [POI2006]SZK-Schools
传送门 应该是很显然的费用流模型吧... $S$ 向所有学校连边,流量为 $1$,费用为 $0$(表示每个学校要选一个编号) 学校向范围内的数字连边,流量为 $1$,费用为 $c|m-m'|$(表示学 ...
- Mac 10.12安装WebStorm
下载: (链接: https://pan.baidu.com/s/1c2o8wUG 密码: 2waz)
- LINQ入门教程之各种标准查询操作符（一）
好久之前就想系统的学习下LINQ,好久之前…… 本篇文章主要介绍LINQ等的标准查询操作符,内容取自<LINQ高级编程>,后续还会介绍LINQ to XML ,LINQ to SQL. L ...
- 祝福csdn回望2014,展望2015 大致可以这样总结和展望
祝福CSDN回望2014,展望2015 大致可以这样总结和展望 回望2014,大致可以这样总结: 从寻觅一架飞机开始,到寻觅另一架飞机结束,中间觅了几天金正恩. 全年都在寻觅收钱的人.送钱的人和带着钱 ...
- 【转】Python格式化字符串str.format()
原文地址:http://blog.xiayf.cn/2013/01/26/python-string-format/ 每次使用Python的格式字符串(string formatter),2.7及以上 ...
- Java调用C函数
一.关于JNI JNI( Java Native Interface )主要是实现Java和C/C++语言之间的通信. Java通过JNI调用本地方法,而本地方法是以库文件的形式存放的(在WINDOW ...
- JavaScript设计模式-6.封装
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...