Question

使用Wordi的Divi主题

我尝试做的是为蒲公英图片制作动画（参见片段）。动画在IE和FireFox中运行良好，但在Chrome中无效。

图片正在替换字体图标，即＆＃39; 7＆＃39;包含在span元素中。我最初使用蒲公英图片替换了span的内容，但content网址不会显示在Firefox中。我必须有＆＃34;点击滚动＆＃39; :before伪元素中的文本，这就是我必须使用:after伪元素的原因。

我应该注意，我无法手动更改span元素中的内容，我必须使用CSS来覆盖它的内容。

如何让动画在Chrome中运行？

实时版：http://gardenviewcare.wpengine.com/adult-day-center/

＆＃13;

.et_pb_fullwidth_header .et_pb_fullwidth_header_scroll a:before {
  content: "click to scroll";
  display: block;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  width: 80px;
  line-height: 1;
  margin-bottom: 10px;
}

span.scroll-down.et-pb-icon {
  display: none;
}

.et_pb_fullwidth_header .et_pb_fullwidth_header_scroll a:after {
  content: url('http://gardenviewcare.wpengine.com/wp-content/uploads/2017/07/dandelion-icon.png') !important;
  animation: swing 15s linear infinite;
  transform: rotate(0);
  transform-style: preserve-3d;
}

@keyframes swing {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotateX(15deg) rotateY(15deg) rotateZ(15deg);
  }
  50% {
    transform: rotateX(-15deg) rotateY(-20deg);
  }
  75% {
    transform: rotateX(15deg) rotateY(10deg) rotateZ(-15deg);
  }
  100% {
    transform: rotateX(-10deg) rotateY(-5deg);
  }
}


/** just for snippet sake so you can see the icon, as it is white **/

body {
  background: #60bb46;
}

＆＃13;

<link href="http://gardenviewcare.wpengine.com/wp-content/themes/Divi-child-01/style.css" rel="stylesheet" />
<link href="http://gardenviewcare.wpengine.com/wp-content/themes/Divi/style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="et_pb_fullwidth_header et_pb_section_parallax et_pb_module et_pb_bg_layout_dark et_pb_text_align_center  et_pb_fullwidth_header_0">

  <div class="et_pb_fullwidth_header_scroll" style="opacity: 1;"><a href="#"><span class="scroll-down et-pb-icon">7</span></a></div>
</section>

＆＃13;

Answer 1

将display: block添加到::after元素。

official W3 specifications将transformable element定义为：

一个元素，其布局由CSS框模型控制块级或原子内联级元素，或者其中 'display'属性计算'table-row'，'table-row-group'， 'table-header-group'，'table-footer-group'，'table-cell'或 'table-caption'[CSS21]

（借此SO回答：https://stackoverflow.com/a/14883287/4573410）

.et_pb_fullwidth_header .et_pb_fullwidth_header_scroll a:before {
  content: "click to scroll";
  display: block;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  width: 80px;
  line-height: 1;
  margin-bottom: 10px;
}

span.scroll-down.et-pb-icon {
  display: none;
}

.et_pb_fullwidth_header .et_pb_fullwidth_header_scroll a:after {
  content: url('http://gardenviewcare.wpengine.com/wp-content/uploads/2017/07/dandelion-icon.png') !important;
  animation: swing 15s linear infinite;
  transform: rotate(0);
  transform-style: preserve-3d;
  display: block;
}

@keyframes swing {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotateX(15deg) rotateY(15deg) rotateZ(15deg);
  }
  50% {
    transform: rotateX(-15deg) rotateY(-20deg);
  }
  75% {
    transform: rotateX(15deg) rotateY(10deg) rotateZ(-15deg);
  }
  100% {
    transform: rotateX(-10deg) rotateY(-5deg);
  }
}


/** just for snippet sake so you can see the icon, as it is white **/

body {
  background: #60bb46;
}

<section class="et_pb_fullwidth_header et_pb_section_parallax et_pb_module et_pb_bg_layout_dark et_pb_text_align_center  et_pb_fullwidth_header_0">

  <div class="et_pb_fullwidth_header_scroll" style="opacity: 1;"><a href="#"><span class="scroll-down et-pb-icon">7</span></a></div>
</section>

：在IE＆amp; Firefox，而不是Chrome

1 个答案: