实现加载中图片旋转

原创于 2022-12-22 11:27:55 发布 · 627 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用CSS3创建一个简单的加载动画，通过一个旋转的环形图片展示加载过程。关键代码展示了如何应用关键帧动画来实现无缝循环效果。

一、代码展示

<template>
　　　　...
　　　　<div class="loading-animation-box" >
　　　　　　<img class="loading-animation" width="26" height="28" src="../../../static/images/balabla.png" />
　　　　</div>
             ...
      </templeate>
 
　　<style>
　　　　.loading-animation-box{
　　　　　　margin: 0;
　　　　　　padding: 0;
　　　　　　.loading-animation{
　　　　　　　　animation:loading 0.75s linear infinite forwards;
　　　　　}
　　　　@keyframes loading{
　　　　　　0%{
　　　　　　　　transform:rotate(0deg)
　　　　　　}
　　　　　　　　100%{
　　　　　　　　　　transform:rotate(360deg)
　　　　　　　　}
　　　　　　}
　　　　}
      </style>

二、效果展示