作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以这是 steemit.com 的投票按钮:
<span class="Icon chevron-up-circle" style="display: inline-block; width: 1.12rem; height: 1.12rem;">
<svg enable-background="new 0 0 33 33" version="1.1" viewBox="0 0 33 33" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Chevron_Up_Circle"><circle cx="16" cy="16" r="15" stroke="#121313" fill="none"></circle>
<path d="M16.699,11.293c-0.384-0.38-1.044-0.381-1.429,0l-6.999,6.899c-0.394,0.391-0.394,1.024,0,1.414 c0.395,0.391,1.034,0.391,1.429,0l6.285-6.195l6.285,6.196c0.394,0.391,1.034,0.391,1.429,0c0.394-0.391,0.394-1.024,0-1.414 L16.699,11.293z" fill="#121313"></path>
</g>
</svg>
</span>
现在我想知道鼠标悬停动画是如何工作的?用鼠标悬停在按钮上时,我没有看到上述任何代码发生变化。
最佳答案
span
正在发生。它有悬停动画。 Fiddle
a.Voting__button-up, path, circle {
transition: opacity, fill, stroke .3s ease 0s;
}
a.Voting__button-up:hover circle{
fill: #06D6A9;
stroke: #06D6A9;
}
.Voting__button-up .Icon:hover {
box-shadow: 0 0 0 #4ba2f2;
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;
}
.Voting__button-up .Icon {
margin-left: 0;
border-radius: 50%;
}
.Voting__button .Icon {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
@keyframes pulse{
0% {
box-shadow: 0 0 0 0 #06d6a9;
}
70% {
box-shadow: 0 0 0 10px rgba(6, 214, 169, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(6, 214, 169, 0);
}
}
<a href="" class="Voting__button-up">
<span class="Icon chevron-up-circle" style="display: inline-block; width: 1.12rem; height: 1.12rem;">
<svg enable-background="new 0 0 33 33" version="1.1" viewBox="0 0 33 33" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Chevron_Up_Circle"><circle cx="16" cy="16" r="15" stroke="#121313" fill="none"></circle>
<path d="M16.699,11.293c-0.384-0.38-1.044-0.381-1.429,0l-6.999,6.899c-0.394,0.391-0.394,1.024,0,1.414 c0.395,0.391,1.034,0.391,1.429,0l6.285-6.195l6.285,6.196c0.394,0.391,1.034,0.391,1.429,0c0.394-0.391,0.394-1.024,0-1.414 L16.699,11.293z" fill="#121313"></path>
</g>
</svg>
</span>
</a>
关于javascript - steemit.com upvote 按钮的动画效果如何?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47793494/
所以这是 steemit.com 的投票按钮: 现在我想知道鼠标悬停动画是如何工作的?用鼠标悬停在按钮上时,我没有看到上述任何代码发生变化。
我是一名优秀的程序员,十分优秀!