使用纯 CSS 向背景图像（加载器/加载屏幕）添加旋转动画？答案

【问题标题】：Add a rotating animation to a background image (loader/loading screen) using pure CSS?使用纯 CSS 向背景图像（加载器/加载屏幕）添加旋转动画？
【发布时间】：2022-07-19 21:41:17
【问题描述】：

我有一个加载器（当有长时间运行的 ajax 请求时显示）

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
    /*url('FhHRx.gif')*/
    url('logotip1.png')
    50% 50%
    no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

&lt;div class="modal"&gt;&lt;!-- Place at bottom of page --&gt;&lt;/div&gt;

如何使用 css 使 url('logotip1.png') 旋转？

我不想创建 GIF 或其他东西。

我如何在这个模态屏幕的中间添加文本？

【问题讨论】：

标签： javascript html css loading

【解决方案1】：

您很可能想研究 CSS 动画。您可以使用不同类型的属性来控制方向、旋转或转换图像的能力。

这是另一个使用文本的类似帖子。 CSS endless rotation animation

基本概念是使用keyframes 来控制您的元素。

一个简单的例子是创建一个名为 rotate 的关键帧，然后将其添加到模态 div

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.modal {
width: 50px;
height: 50px;
background-image: url("https://icon-library.com/images/loading-icon-transparent-background/loading-icon-transparent-background-14.jpg");
background-size: 50px;
animation: rotate 2s linear infinite;
}

<div class="modal">
</div>

【讨论】：