今天刚好在做这个功能，就实现一个 预加载的动画效果，随手记录
一、预加载旋转动画
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; } }
