VimMing
2017-10-01 15:53 湖南农业大学 C++
关注
<!doctype html>
<html>
<head>
<style>
@keyframes blink {
0% {
background-position: 0;
}
100% {
background-position: -1020px;
}
}
.likeNum{ padding: 1px;
font-size: 20px; }
.like-container{
display: flex; align-items: center;
}
.like-container > *{
display: inline-block;
}
a.like{
pointer: cursor;
}
.like > span{
display: inline-block;
width: 64px;
height: 64px;
background: url(http://oncn5i9yi.bkt.clouddn.com/downloadxxx.png) left no-repeat;
background-position: 0 0;
}
.blink{
animation: blink steps(17) 0.5s 1 both;
}
</style>
</head>
<body>
<div class="like-container">
<a class="like"><span></span></a>
<span class="likeNum">赞</span>
</div>
<script>
</script>
<script>
document.addEventListener("DOMContentLoaded", function(e) {
let node = document.querySelector("a.like");
node && node.addEventListener("click", (event) => {
event.stopPropagation(); event.preventDefault(); let target = event.target.tagName.toUpperCase() == "SPAN" ? event.target : event.target.parentNode; target.classList.toggle("blink");
});
});
</script>
</body>
</html>
查看原帖
点赞 2
相关推荐
查看7道真题和解析 11-25 17:03
门头沟学院 Java 点赞 评论 收藏
分享
牛客热帖
更多
正在热议
更多
# mt对你说过最有启发的一句话 #
6443次浏览 93人参与
# 市场营销人求职交流聚集地 #
165318次浏览 1224人参与
# 被上班搭子“传染”了哪些习惯 #
2031次浏览 54人参与
# 找工作有哪些冷知识 #
199997次浏览 2544人参与
# 工作后，你落下了哪些病根 #
4649次浏览 106人参与
# 打工人的精神状态 #
120491次浏览 1383人参与
# 今年秋招你收到了多少封邮件？ #
5018次浏览 101人参与
# 工作中遇到的歹人 #
7959次浏览 131人参与
# 互联网公司评价 #
463091次浏览 4044人参与
# 秋招特别不鸣谢 #
4097次浏览 58人参与
# 工作后明白的那些道理 #
37492次浏览 518人参与
# 选实习，你更看重哪方面？ #
3971次浏览 76人参与
# 什么是优秀的实习经历 #
1798次浏览 60人参与
# 摸鱼被leader发现了怎么办 #
77932次浏览 454人参与
# 考研失败就一定是坏事吗？ #
161896次浏览 1149人参与
# 提前批过来人的忠告 #
141724次浏览 1322人参与
# 携程求职进展汇总 #
828043次浏览 5234人参与
# 上班到公司第一件事做什么？ #
116091次浏览 814人参与
# 工作两年想退休了 #
210661次浏览 1870人参与
# 硬件人的简历怎么写 #
318301次浏览 3065人参与