光弧,高亮
时间: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
- Linux基础(day57)
- 15.2/15.3 使用vsftpd搭建ftp
- JDK容器学习之Map: HashMap,TreeMap,LinkedHashMap对比小结
- 14.4 exportfs命令
- 不用那么多,每天一点点,学习React,贵在持之以恒
- Linux基础(day56)
- android classloader双亲委托模式
- 14.3 NFS配置选项
- 14.2 NFS服务端安装配置
- React Native组件之Button
- JDK容器学习之TreeMap (二) : 使用说明
- 从React和angular看技术路线的分歧
- JDK容器学习之LinkedHashMap (一):底层存储结构分析
- Linux基础(day60)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python 技术篇-按任意格式灵活获取日期、时间、年月日、时分秒。日期格式化。
- 当删库时如何避免跑路
- Python 句法错误:"SyntaxError: invalid character in identifier",原因及解决方法
- Python3 多线程问题:ModuleNotFoundError: No module named 'thread',原因及解决办法。
- 文件传输和秒传
- 关于数据库的各种备份与还原姿势详解
- Python 技术篇-多线程的2种创建方法,多线程的简单用法,快速上手。
- Python 技术篇-调用浏览器访问指定网页,一行代码实现。非Selenium。
- 数据库热备份神器 - XtraBackup
- Python 技术篇-读取文件,将内容保存dict字典中。去掉字符串中的指定字符方法。dict字典的遍历。
- PyQt5 技术篇-plainTextEdit控件获得文本内容方法、设置文本内容方法。
- PyQt5 技术篇-鼠标移动控件显示提示,Qt Designer控件提示设置方法。
- PyQt5 技术篇-窗口名、窗口图标的设置方法。
- 101个shell脚本
- PyQt5 图片兼容性问题:"libpng warning: bKGD: invalid.",原因及解决办法。