光弧,高亮

时间:2021-07-21
本文章向大家介绍光弧,高亮,主要包括光弧,高亮使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<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{
  width: 1.12rem;
height: 1.76rem;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
.envelopeContent {
width: 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;
width: 1.12rem;
height: 1.3rem;
}
>span {
z-index: 11;
margin-top: .26rem;
font-size: .32rem;
color: #FFEDC1;
}
}
.annotation {
width: 100%;
text-align: center;
margin-top: .2rem;
font-size: .24rem;
color: #9A530C;
font-weight: 400;
}
.rolledDiv {
width: 1.12rem;
height: 1.3rem;
position: absolute;
top: 0;
overflow: hidden;
z-index: 99;
.rolled {
position: absolute;
top: 0;
z-index: 100;
width: .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;
}
}
}
}

原文地址:https://www.cnblogs.com/hlhs/p/15040419.html