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;
    }
    }
    }
    }
  • 相关阅读:
    名信片定做网站
    [置顶] 数据库开发常识
    <IMG>中UserMap的用法
    阿斯钢iojeg9uhweu9erhpu9hyw49
    慎得慌二u赫然共和任务i个屁
    阿斯钢iojeg9uhw8uhy平
    2014校园招聘笔、面经历总结---华为双选会
    PDCA模型的学习
    阿斯钢 弇7人后偶尔一个味5而已
    【HTML】让<pre>标签文本自动换行
  • 原文地址:https://www.cnblogs.com/hlhs/p/15040419.html
Copyright © 2011-2022 走看看