javascript - 如何识别负责转轮动画的代码并设计其样式

Question

感兴趣的标本是在 https://store.ashenglowgaming.com/ 的实时网页

当客户点击主页上的“添加到购物车”按钮时，会触发转动进度轮的动画，我想将其作为样式的目标，因为我需要使用颜色 #d53600 覆盖其默认颜色 并使用任何可用的方法为转动的轮子添加光晕。

这个例子超越了一个简单的最小例子；这是一个真正的应用程序问题，坦率地说，我不知道转轮是如何实现的，我是否可以通过 CSS 设置样式，或者我必须在某处重写一些 JavaScript。

问题是，首先，如何识别负责转轮的代码？我知道如何从浏览器开发工具中提取的所有信息都是 HTML 和 CSS，提供如下:

HTML 和 CSS:

  button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.widget a.button,
.site-header-cart .widget_shopping_cart a.button {
  background-color: #eeeeee;
  border-color: #eeeeee;
  color: #333333;
}

1516799947index.css:2 .added_to_cart,
.button,
button,
input[type=button],
input[type=reset],
input[type=submit] {
  border: 0;
  background: 0 0;
  background-color: #43454b;
  border-color: #43454b;
  color: #fff;
  cursor: pointer;
  padding: .6180469716em 1.41575em;
  text-decoration: none;
  font-weight: 600;
  text-shadow: none;
  display: inline-block;
  outline: 0;
  -webkit-appearance: none;
  border-radius: 0;

<a rel="nofollow" href="/?add-to-cart=116" data-quantity="1" data-product_id="116" data-product_sku="" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>

如果我没有提供一些后果的细节，请在否决之前询问 - 这不是出于懒惰，而是我只是超出了我的能力范围，我是一个非编码人员，我正在尽我最大的努力在这里应付。

Answer 1

我已经帮你找到了。要更改颜色，您应该更改以下内容。

.button.loading:after {
color: #FFFFFF; /* This is the default color */
}

如果你想玩弄动画的细节，那么你应该玩弄

button.loading:after, input[type="button"].loading:after, 
input[type="reset"].loading:after, input[type="submit"].loading:after, 
.button.loading:after, .added_to_cart.loading:after {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
content: "\f110";
-webkit-animation: fa-spin .75s linear infinite;
animation: fa-spin .75s linear infinite;
height: 20px;
width: 20px;
line-height: 20px;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
}

要在加载处于事件状态时更改按钮的背景颜色，您应该更改以下内容

.button.loading:hover {
background-color: #eeeeee;
}

希望这对您有所帮助。