zoukankan      html  css  js  c++  java
  • CSS文字、图片扫光效果

    我们接下来实现一个简单的扫光文字!

    .sample{
        background-color: #0E1326;
        padding-top:30px;
        overflow: hidden;
      }
      .blank_text{
        position: relative;
        width:200px;
        margin:20px auto;
        color: #fff;
        line-height: 1;
        font-size: 50px;
        font-size: 0.74074rem;
        text-align: center;
        overflow: hidden;
        font-family: "icomoon";
      }
    .blank_text:after{
        width: 300%;
        height: 100%;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(15,20,40, 0.7)), color-stop(0.4, rgba(15,20,40, 0.7)), color-stop(0.5, rgba(15,20,40, 0)), color-stop(0.6, rgba(15,20,40, 0.7)), color-stop(1, rgba(15,20,40, 0.7)));
        -webkit-animation: slide ease-in-out 2s infinite; 
    }
    @-webkit-keyframes slide{
        0%{-webkit-transform:translateX(-66.666%);}
        100%{-webkit-transform:translateX(0);}

    html代码如下:

    <div class="sample">
        <div class="blank_text">haorooms博客扫光测试</div>
    </div>
    效果:

  • 相关阅读:
    linux 常用函数
    现在什么都不是浮云
    laosao
    2012年
    工作任务
    代码整理
    如何做一个男人
    很重要的2点
    录像预录的设计及实现
    弄了一个小网站
  • 原文地址:https://www.cnblogs.com/agen-su/p/11636528.html
Copyright © 2011-2022 走看看