- 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/
我有一个 jQuery up vote 插件。除了错误处理,一切都工作正常。我的投票插件在 foreach 循环中。像下面这样 if($RES['counter'] === '1'){
我正在努力为数据库中的某些项目添加赞成票和反对票,并按最高赞成票的顺序显示它们。这个查询会是什么样子? 我怎样才能在 SQL 中做这样的事情? SELECT col1 col2 FROM some_t
所以我的投票链接正在替换所有链接而不是单个链接的投票计数器。帮忙? Controller def upcount @category = Category.find(params[:id]
解决这个问题我真的很迷茫。目前我的项目中有一个 jQuery upvote 插件。因此,每次我单击 upvote 时,它都会将数据库中的值保存为 true,每次收回投票时,它都会将数据库中的值保存
所以这是 steemit.com 的投票按钮: 现在我想知道鼠标悬停动画是如何工作的?用鼠标悬停在按钮上时,我没有看到上述任何代码发生变化。
我正在尝试使用这个 jquery 包:https://github.com/janosgyerik/jquery-upvote 但是,在我看来,投票只对第一个帖子有效,其余的都无法点击。我已经包含了所
我有三个模型:User、Comment 和 Upvote。 User-to-Comment 是一对多的关系,Comment-to-Upvote 是一对多的关系,而 User-to-Upvote 是一对
我看到了 HTML up vote 但是我没有看到提交回服务器的操作是如何执行的。我希望看到 JavaScript 或表单提交。 CSS 类是否以某种方式执行此操作? 最佳答案 StackOverfl
我有一个使用 acts_as_votable 运行良好的 Rails 应用程序。 “赞”按钮会为帖子计数投票,然后切换为“不喜欢”按钮,这会为帖子计数投票。 我的问题是,自从我开始使用 Public
我已经使用 php 和 jquery 创建了投票系统。 这是我的 index.php: $(document).ready(function() { //####### on page l
我正在使用 reddit api 获取评论、赞成票、反对票等。当我点击“https://www.reddit.com/user/{username}/comments.json”时,它工作正常。当我点
好吧,我开始在这个问题上大费周章了。我是 Rails 的新手,正在学习制作 pinterest 风格应用程序的教程。我完成了它,但对投票系统不满意。 每次我点击投票时都会刷新页面。所以我找到了一些关于
如何在toggleClass之间找到这个元素。这是我到目前为止尝试过的。这是我的 JSFIDDLE http://jsfiddle.net/8rrctstf/12/ 我应该得到元素 vote_coun
尝试为 Crowducate.me 的特定类(class)添加“upvoting”。 从图中可以看出,该方法已正确调用。但是,我认为更新方法(mongo)不被理解。这是我的个人源代码 all comm
我的 Rails 应用程序中有一个点赞系统,允许用户点赞 Pin 图。但我想限制一个 Pin 只能投票一次的能力。 app/controllers/pins_controller.rb def u
我正在尝试为 帖子 获得赞成和反对票,其中 答案 表关联和单独的 投票 表关联到 答案 const posts = await Posts.findAll({ include: [{
我已按照 here 的指示进行操作 我已经完成了以下操作: 我已将 jquery.upvote.js、jquery.upvote.css 和 images 文件夹上传到 WordPress 主题文件夹
我正在为我的应用程序使用 MEAN 堆栈,我在我的应用程序中为每个问题都有一个投票部分,试图投票一个问题说 TypeError: Cannot read property 'upvote' of un
我正在尝试在 HTML 表单中创建一个简单的赞成按钮,该表单使用 PHP 来更新 MySQL 数据库。我知道 Ajax 等有更好的实现,但我只想使用简单的 HTML 和 PHP。 我已经能够使用 in
这里是新手开发人员,使用 wordpress 作为平台制作一个网站。我希望用户能够单击“赞成”按钮并在不刷新页面的情况下对帖子进行赞成。我想我应该使用 JavaScript 来突出显示单击后的按钮并更
我是一名优秀的程序员,十分优秀!