zoukankan      html  css  js  c++  java
  • 光弧,高亮

    <div class="random">
      <div class="envelopeContent" @click="timeClick">
        <img class="envelopeBJ" src="../static/image/ic_rp_default.png" />
        <span>随机</span>
      </div>
      <div class="annotation">{{ countDownTime }}</div>
      <div class="rolledDiv">
        <div class="rolled"></div>
      </div>
    </div>
    .random{
       1.12rem;
    height: 1.76rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    .envelopeContent {
    1.12rem;
    height: 1.3rem;
    position: relative;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    //justify-content: center;
    align-items: center;
    .envelopeBJ {
    position: absolute;
    z-index: 10;
    1.12rem;
    height: 1.3rem;
    }
    >span {
    z-index: 11;
    margin-top: .26rem;
    font-size: .32rem;
    color: #FFEDC1;
    }
    }
    .annotation {
    100%;
    text-align: center;
    margin-top: .2rem;
    font-size: .24rem;
    color: #9A530C;
    font-weight: 400;
    }
    .rolledDiv {
    1.12rem;
    height: 1.3rem;
    position: absolute;
    top: 0;
    overflow: hidden;
    z-index: 99;
    .rolled {
    position: absolute;
    top: 0;
    z-index: 100;
    .24rem;
    height: 1.3rem;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, .4)50%, rgba(255, 255, 255, 0)100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, .4)), color-stop(100%, rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, .4)50%, rgba(255, 255, 255, 0)100%);
    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
    -webkit-animation: rolled 1.5s .2s ease both infinite;
    -moz-animation: rolled 1.5s .2s ease both infinite;
    -o-animation: rolled 1.5s .2s ease both infinite;
    -ms-animation: rolled 1.5s .2s ease both infinite;
    }
    @-webkit-keyframes rolled {
    0% {
    left: -.36rem;
    }
    100% {
    left: 1.24rem;
    }
    }
    }
    }
  • 相关阅读:
    core--线程同步(用户模式)
    Android-Kotlin-Activity直接的跳转
    Android-Kotlin-枚举enum
    Android-Kotlin-单例模式
    Android-Kotlin-代理和委托
    Android-Kotlin-接口与多态的表现
    Android-Kotlin-set/get方法的使用
    Android-Kotlin-继承
    Android-Kotlin简单计算器功能
    CentOS 6.5 X64 U盘启动盘制作
  • 原文地址:https://www.cnblogs.com/hlhs/p/15040419.html
Copyright © 2011-2022 走看看