代码如下

  1. //主要就是用css动画实现的
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         .jser_dimple{
  11.             font-size: 80px;
  12.             text-align: center;
  13.             font-family: "微软雅黑";
  14.             font-weight: bold;
  15.             color: #000;
  16.             margin-top: 50px;
  17.             animation: fireDiv 1s infinite;
  18.         }
  19.         @keyframes fireDiv {
  20.         0% {
  21.           text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
  22.             -2px -15px 11px #f80, 2px -25px 18px #f20;
  23.         }
  24.         25% {
  25.           text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3,
  26.             -3px -20px 11px #f80, 4px -30px 22px #f20;
  27.         }
  28.         50% {
  29.           text-shadow: 0 0 4px white, 2px -10px 8px #ff3, 2px -14px 10px #fd3,
  30.             -4px -25px 11px #f80, 4px -35px 25px #f20;
  31.         }
  32.         75% {
  33.           text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3,
  34.             -3px -20px 11px #f80, 4px -30px 22px #f20;
  35.         }
  36.         100% {
  37.           text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
  38.             -2px -15px 11px #f80, 2px -25px 18px #f20;
  39.         }
  40.       }
  41.     </style>
  42. </head>
  43. <body>
  44.     <div class="jser_dimple">
  45.         jser_dimple
  46.     </div>
  47. </body>
  48. </html>

本文看自:https://www.cnblogs.com/zhengshize/p/10573588.html

CSS实现火焰效果的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. css简单实现火焰效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 简单说 通过CSS的滤镜 实现 火焰效果

    说明 上次我们了解了一些css滤镜的基础知识, 简单说 CSS滤镜 filter属性 这次我们就来用css的滤镜实现一个 火焰的效果. 解释 要实现上面的火焰效果,我们先来了解一些必要的东西. 上次我 ...

  4. CSS自学笔记（12）:CSS3文字特效

    在CSS3中新增了多个文本属性,同样有了这些属性我们在进行问题特效处理时,就尽可能少的用到其他软件去制作特效文字了. 在以前使用CSS进行web开发的时候,必须使用计算机上安装好的字体,如果有些用户的 ...

  5. 你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...

  6. CSS 火焰？不在话下

    正文从下面开始. 今天的小技巧是使用纯 CSS 生成火焰,逼真一点的火焰. 嗯,长什么样子?在 CodePen 上输入关键字 CSS Fire,能找到这样的: 或者这样的: 我们希望,仅仅使用 CSS ...

  7. 如何用 CSS 和 D3 创作火焰动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xJdVxx 可交互视频 ...

  8. CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？

    最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段. 目前对应的 ...

  9. Three.js 火焰效果实现艾尔登法环动态logo 🔥

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 <艾尔登法环>是最近比较火的一款游戏,观察可以发现它的 Log ...

随机推荐

  1. ubuntu挂载和挂载NTFS分区命令

    1.挂载 首先安装NTFS-3g,不过Ubuntu一般自带: sudo apt install ntfs-3g 查看分区信息: sudo fdisk -l 结果类似: /dev/sda1  *     ...

  2. c# 删除空文件夹

    https://www.cnblogs.com/vikimono/p/11066778.html

  3. fastjson过滤字段

    1.注解(字段上添加) @JSONField(serialize=false) 2.过滤器 PropertyFilter propertyFilter = new PropertyFilter() { ...

  4. 05-3-style标签属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. ES6之主要知识点（十）Proxy

    Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程. Proxy 可以理解成,在目标对象之前架设一层“拦 ...

  6. HBase 面向列的存储

  7. 如何在终端编译C++代码

    C++语言从编写-->执行整个过程.一般来讲,开发一个C++程序需要经过以下几步1. 编写代码,2. 编译器进行编译,compile    生成.o的可执行的二进制目标文件3. 连接器进行连接. ...

  8. win8 风格框架

    http://metroui.org.ua/挺不错 bootstrap 系列的.

  9. walle(瓦力)部署系统的安装和简单使用

    Walle(瓦力):一套软件开发的部署系统.提供了清晰的日志记录,支持数据的回滚.用于解决大型团队在软件开发中的测试.预测试和上线的统一部署管理. 系统环境:CentOS6.8-A CentOS-6. ...

  10. SQL中distinct 和 row_number() over() 的区别及用法

    1 前言 在咱们编写 SQL 语句操作数据库中的数据的时候,有可能会遇到一些不太爽的问题,例如对于同一字段拥有相同名称的记录,我们只需要显示一条,但实际上数据库中可能含有多条拥有相同名称的记录,从而在 ...