html - 带有过渡的加载按钮(两个旋转的箭头)

<分区>

我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。

关闭 7 年前。

我想在提问后创建类似此加载按钮的内容。使用纯 CSS 加载任何内容的旋转按钮会很不错(不算它会在单击时旋转的事实，它将通过 JS 完成)。也许有人做过那样的事情？或者至少知道如何去做。我只知道这可能可以通过 transition 实现。

更新。没有图像和图标。我的问题是，如何创建这种边框(两个箭头)，并在点击时旋转它们(可以用 JS 完成)。

这是这个按钮的例子:

最佳答案

使用 FontAwesome 和内置的 CSS3 旋转

jsBin demo

i.fa-refresh{ color: #a05; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<i class="fa fa-refresh fa-spin fa-2x"></i>

https://fortawesome.github.io/Font-Awesome/icons/
https://fortawesome.github.io/Font-Awesome/examples/

加载图标(使用纯 CSS 和 CSS3 `动画`)

.loading{
  display:inline-block;
  position:relative;
  vertical-align:middle;
  width:  24px;
  height: 24px;
  border:2px solid transparent;
  border-top-color:#a05;
  border-bottom-color:#a05;
  border-radius:50%;
  animation: rotate 3s linear infinite;
}
.loading:after,
.loading:before{
  position:absolute;
  content: "";
  width:0; height:0;
  border:6px solid transparent;
  border-bottom-color:#a05;
}
.loading:after{
  top:1px;
  right:-7px;
  transform: rotate(135deg);
}
.loading:before{
  top:11px;
  left:-7px;
  transform: rotate(-45deg);
}
@keyframes rotate{
   to { transform: rotate(360deg); }
}