效果展示
代码实现
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>一颗不甘坠落的流星</title></head><style type="text/css">.bth {background-color: white;border-radius: 10px;border: 1px solid aquamarine;color: aquamarine;padding: 10px 20px;font-weight: bold;position: relative;transition: all 1s;overflow: hidden;}.bth::before {content: '';width: 0;height: 100%;position: absolute;left: -30px;top: 0;background-color: aquamarine;transform: skewX(45deg);transition: all 0.5s;opacity: 0.2;}.bth:hover::before {width: 180%;color: white;}</style><body><button type="button" class="bth">悬浮动画</button></body><script type="text/javascript"></script>
</html>
