zoukankan      html  css  js  c++  java
  • 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>
    View Code
  • 相关阅读:
    FusionCharts--加载XML文件
    昌泡排序的结果从小到大
    调试javaee郑阿奇第二章出现的问题
    补充-servlet基础
    利用二维int型数组表达一个矩阵,创建该数组并将其元素打印输出
    创建字符串数组并将元素转换为小写输出
    在一个字符串中搜索虽一个字符串
    在数组中查找指定的值
    复制字符串
    补充 精通JSP开发应用 (Eclipse 平台) 第六章 基础技术:Servlet
  • 原文地址:https://www.cnblogs.com/zhengshize/p/10573588.html
Copyright © 2011-2022 走看看