代码之家 › 专栏 › 技术社区 › ptrcao

如何识别负责转动车轮动画的代码并设置其样式

animation css html javascript

ptrcao · 技术社区 · 7 年前

兴趣样本是位于 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>

如果我没有提供一些结果的细节,请在投票前询问——这不是因为懒惰,而是因为我太深了,我是一个非编码人员,正在尽力应对。

2 回复 | 直到 7 年前

Xoog 7 年前

我设法帮你找到了。要更改颜色,应更改以下内容。

.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;
}

希望这有帮助。

ProgrammerAdept 7 年前

人们通常在保存数据或需要通过ajax与服务器对话时添加微调器图像或gif,我看到在单击“添加到购物车”时使用了ajax。

 $.ajax({
  // your ajax code
  beforeSend: function(){
       $('.loader').show()
   },
  complete: function(){
       $('.loader').hide();
  }
 });

因此,您可以查找loading或loader类,或者查看ajax javascript本身,以了解调用它的位置。