动画主要靠这个部分实现
@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>
