zoukankan      html  css  js  c++  java
  • 字体颜色渐变(当遇到需要js改变HTML内容时)

    我之前遇到过一个情况,字体颜色渐变的效果其中一种代码会影响到js重新赋值该div的的值重读或者混乱的情况:

    style样式:

    .normal{
      background: -webkit-linear-gradient(top, #b5339d, #e8096f);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .button,.button2{
      display: inline-block;border: 1px solid #999;color: #999;font-size: 12px;
      padding: 2px;
    }

    body内容:

    <div class="normal">正常文档内容</div>
    <div class="button">点击改变内容</div>

    js代码:

    $(".button").unbind("click").click(function(){
      $(".normal").html("改变之后的内容")
    })

    这种情况可能会出现赋值混乱的情况。

    另外还可以用另外一种css样式实现字体颜色渐变:

    style样式:

    .normal2{
      position: relative;
      height: 21px;
    }
    .normal2:after{
      content: attr(text);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      color: #e8096f;
      -webkit-mask: -webkit-gradient(
        linear,
        left top,
        right top,
        from(rgba(232,9,111,1)),
        to(rgba(232,9,111,0.7)));
      );
    }

    body内容:

    <div class="normal2" text="正常文档内容2"></div>
    <div class="button2">点击改变内容2</div>

    js代码:

    $(".button2").unbind("click").click(function(){
      $(".normal2").html("改变之后的内容")
    })

    如果有伙伴们遇到赋值混乱的情况,建议选择第二种样式实现字体颜色渐变

  • 相关阅读:
    memcached注意事项与应用范围、应用条件、限制
    memcached系列之二
    Memcached系列之一
    memcached监控工具
    memcached能获取所有的key吗
    数据库数据处理性能提升技术
    memcached Java Client
    衡量企业应用数据库性能的6大指标
    objelement = event.target || event.srcElement;
    com.alibaba.com.caucho.hessian.io.SerializerFactory getDeserializer
  • 原文地址:https://www.cnblogs.com/Andrea-Li/p/9025967.html
Copyright © 2011-2022 走看看