动画主要靠这个部分实现
@keyframes LeftToRight {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
//使用
{
animation: LeftToRight 3s infinite;
}
具体代码如下
<div class="text">
<p>设备接入</p>
<div>
<img src="../../../assets/image/icon_equip.png" />
<span class="number">
<p class="unit">个</p>
<span class="num">12.8</span>
万
</span>
</div>
</div>
</el-button>
<style>
.el-button {
position: relative;
width: 28%;
height: 45%;
padding: 0;
background: rgba(255, 255, 255, 0.08);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.16);
color: #fff;
margin: 2% 1.5% 0 1.5%;
font-size: 12px;
.text {
width: 76%;
font-size: 12px;
color: #fff;
text-align: left;
position: absolute;
z-index: 2;
top: 12%;
left: 10%;
p {
margin: 0 auto 30% 0;
line-height: 20px;
text-align: left;
}
.unit {
text-align: right;
margin-bottom: 12px;
}
.number {
font-size: 12px;
position: absolute;
bottom: 2px;
right: -2px;
}
.num {
font-size: 15px;
}
img {
height: 28px;
}
img.large {
height: 34px;
margin-bottom: -3px;
}
}
}
.el-button::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
transition: 0.3s;
opacity: 0.3;
background: rgba(0, 0, 0, 0.8);
transform-origin: left;
animation: LeftToRight 3s infinite;
}
.el-button:hover::after {
transform: scaleX(1);
}
@keyframes LeftToRight {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
</style>