Question

在 http://demo.thbthemes.com/blaine/?fixed

当你将鼠标悬停在一个按钮上时，它们会有一个非常简洁的动画，它会得到一个 - ＆gt; 此外，介绍文本在页面加载时动画一点。

有关如何使用动画库重现这些清晰度的想法？ html源代码很难弄清楚

它似乎使用了动画的过渡，并添加了一个带有css内容指令的fontaswsome图标非常棒，无法在任何地方找到任何信息。

Answer 1

使用CSS动画/过渡以及before或after等伪类来存储箭头。

如果您放置transition: all 0.15s ease-out;它将为:hover状态设置动画（在此示例中），我建议您研究CSS过渡。

此外，您可能需要添加供应商特定的前缀（例如-moz-或-webkit-），以便它可以在可能不支持它的浏览器版本中运行。

（如果你研究它，它会告诉你它是用css过渡完成的，只需选择一些并制作你的例子）。

这里有一些让你入门的东西（在代码片段中悬停＆＃34;视图＆＃34;链接）：

＆＃13;

.thb-read-more {
  display: inline-block;
  float: none;
  text-align: left;
  float: left;
  font-size: 14px;
  width: 70px;
  margin-left: 0px;
  line-height: 1;
  opacity: 1;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
.thb-read-more:hover {
  margin-left: -4px;
}
.thb-read-more::after {
  content: "arrow";
  display: inline-block;
  float: right;
  width: 40px;
  opacity: 0;
  transition: all 0.15s ease-out;
}
.thb-read-more:hover::after {
  content: "arrow";
  opacity: 1;
  width: 20px;
}

＆＃13;

<a class="thb-read-more" href="#" rel="permalink">View</a>

＆＃13;

如何生成动画和＆＃34;按钮动画＆＃34;像这样？

1 个答案: