zoukankan      html  css  js  c++  java
  • CSS使文字部分变色

    思路很简单,就是一个字写两遍,一个字只显示部分,不过不能真的把一个字写两遍。这里就需要用到CSS伪元素:before和:after,记住这个“伪元素”的“伪”字,表明它本来是不存在的。我们的方法就是在伪元素里放置相同的字符,只显示半个,而原字符显示另外一半,最后把它们拼成一个字。幼儿园设计

    CSS Code

    [css].hf {
    display: inline-block;
    font-size: 80px;
    line-height:80px;
    color: #000;
    position: relative;
    overflow: hidden;
    white-space: pre;/* 处理空格 */
    }
    .hf:before {
    position: absolute;
    left: 0;
    top: 0;
    color: #f00;
    display: block;
    30%;/*如果想变色一半文字,就设置50%*/
    content: attr(data-content);/* 伪元素的动态获取内容 */
    overflow: hidden;
    }
    [/css]

    HTML Code

    [html] <span class="hf" data-content="W">W</span>
    <span class="hf" data-content="e">e</span>
    <span class="hf" data-content="b">b</span>
    <span class="hf" data-content="前">前</span>
    <span class="hf" data-content="端">端</span>
    [/html]

  • 相关阅读:
    正则表达式
    爬虫原理和网页构造
    简单的博客系统之二
    配置编辑器geany
    linux删除多文件
    eNSP交换路由基础
    NTP centOS6.5
    shell脚本之lftp上传
    进度条
    maketrans与translate函数
  • 原文地址:https://www.cnblogs.com/furuihua/p/13169354.html
Copyright © 2011-2022 走看看