今天刚好在做这个功能，就实现一个 预加载的动画效果，随手记录
一、预加载旋转动画
Html
<view class="concentric_round"></view>
css
body {background-color: #e9967a;}.concentric_round {width: 200rpx;height: 200rpx;position: relative;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -100%);}.concentric_round::after,.concentric_round::before {content: '';display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #fff;opacity: 0.4;border-radius: 100%;}.concentric_round::before {width: 50%;height: 50%;animation: beform_round 0.6s ease-in-out infinite alternate;}.concentric_round::after {width: 100%;height: 100%;animation: after_round 0.6s ease-in-out infinite alternate;}/* 外圆 */@-webkit-keyframes after_round {0% {transform: translate3d(-50%, -50%, 0) scale(1.3);}100% {transform: translate3d(-50%, -50%, 0) scale(1);}}@keyframes after_round {0% {transform: translate3d(-50%, -50%, 0) scale(1.3);}100% {transform: translate3d(-50%, -50%, 0) scale(1);}}/* 内圆 */@-webkit-keyframes beform_round {0% {transform: translate3d(-50%, -50%, 0) scale(0.7);}100% {transform: translate3d(-50%, -50%, 0) scale(1);}}@keyframes beform_round {0% {transform: translate3d(-50%, -50%, 0) scale(0.7);}100% {transform: translate3d(-50%, -50%, 0) scale(1);}}
二、流光字体动画
html
<view class="preload">F-REWARD</view>
css
.preload {width: 100%;font-weight: bold;font-family: 'Arial', 'Microsoft YaHei', '黑体', '宋体', sans-serif;font-size: 2.5rem;text-align: center;background-image: -webkit-linear-gradient(left, black, transparent 25%, black 50%, transparent 75%, black);-webkit-text-fill-color: transparent;-webkit-background-clip: text;-webkit-background-size: 200% 100%;-webkit-animation: masked-animation 2s infinite linear;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -100%);}@-webkit-keyframes masked-animation {0% {background-position: 0 0;}100% {background-position: -100% 0;}}
