学到一个火焰特效

看字里面的火焰的字体里面出现火焰

首先呢就是前端的页面

    <div class="cons">  
        <img src="../images/huoyan.gif"></img>
        <div class="text"><span>火云邪神</span></div>
    </div>

然后就是css，给盒子cons添加熟悉position: relative;方便text进行定位，然后将text居中在展示 mix-blend-mode属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合 其值包括：normal(正常) multiply(正片叠底) screen(滤色) overlay(叠加) darken(变暗) lighten(变亮) color-dodge(颜色减淡) color-burn(颜色加深) hard-light(强光) soft-light(柔光) difference(差值) exclusion(排除) hue(色相) saturation(饱和度) color(颜色) luminosity(亮度) initial(初始) inherit(继承) unset(复原)

    .cons{
      width: 470px;
      height: 311px;
      position: relative;
      font-size:100px;
    }
    .text{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: #fff;
      display: flex;
      justify-content: center;   /*横向居中*/
      align-items: center;    /*纵向居中*/
      mix-blend-mode: screen;  /*元素颜色叠加，显示底层颜色*/
    }

来看看效果吧