css转圈圈加载动画

你可以使用CSS来创建一个转圈圈的加载动画。以下是一个简单的示例：

HTML代码：

<div class="spinner"></div>

CSS代码：

.spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

这段代码会创建一个宽高为40像素的圆形元素，然后使用边框设置圆圈的边框样式。通过`@keyframes`和`animation`属性，我们定义了一个名为"spin"的动画，让圆圈旋转起来。最后，将该动画应用到圆圈元素上。

你可以将这段代码复制到HTML文件中，在浏览器中打开，就能看到圆圈加载动画了。你也可以根据需要调整样式和动画的细节。

相关问题

CSS转圈圈特效样式

CSS中的转圈圈效果，也称为加载动画或者进度条动画，通常通过使用伪元素`:before`或`:after`结合`animation`属性来实现。以下是一个基本的圆形旋转动画的例子：

.circle-loading {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background-color: #ccc; /* 或者你喜欢的颜色 */
}

.circle-loading:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff; /* 内部圆颜色 */
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

在这个例子中，`.circle-loading`是一个容器，内部有一个白色的圆心点，使用`animation`属性使其绕中心点进行顺时针旋转，创建了转圈的效果。你可以调整`width`, `height`, `border-radius`等样式来自定义形状，以及`animation-duration`（动画持续时间）和`animation-timing-function`（动画速度曲线）来改变效果。

写个js 转圈圈 加载事件

在JavaScript中创建一个转圈圈的加载动画通常涉及到HTML、CSS和JavaScript的结合使用。下面是一个简单的例子：

首先，在HTML中创建一个用于显示加载动画的元素：

<div id="loadingSpinner"></div>

然后，使用CSS来设置这个元素的基本样式以及动画效果：

#loadingSpinner {
  border: 16px solid #f3f3f3; /* 轻灰色背景 */
  border-top: 16px solid #3498db; /* 蓝色加载线条 */
  border-radius: 50%; /* 边框圆形 */
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite; /* 旋转动画 */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

最后，使用JavaScript来控制加载动画的显示与隐藏：

// 显示加载动画
function showLoadingSpinner() {
  document.getElementById('loadingSpinner').style.display = 'block';
}

// 隐藏加载动画
function hideLoadingSpinner() {
  document.getElementById('loadingSpinner').style.display = 'none';
}

// 调用显示加载动画的函数
showLoadingSpinner();

// 假设在某个操作完成后隐藏加载动画
setTimeout(hideLoadingSpinner, 2000); // 2秒后自动隐藏加载动画

这个例子中，我们首先定义了一个旋转动画`spin`，然后在HTML中有一个用于显示加载动画的`div`元素。通过JavaScript的`showLoadingSpinner`函数来显示这个动画，然后在特定的操作完成后（例如页面数据加载完成），使用`hideLoadingSpinner`函数来隐藏它。