利用CSS3实现简书中点击“喜欢”时的动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Like</title>
<style>
#like {
background: #EA6F5A;
color: #fff;
padding: 13px 0 15px 0;
font-size: 19px;
border: 1px solid #EA6F5A;
border-radius: 40px;
width: 100px;
position: relative;
padding-left: 20px;
cursor: pointer;
text-align: center;
}
.like::before {
content: '';
position: absolute;
left: 5px;
top: 2px;
width: 50px;
height: 50px;
background-image: url(https://cdn2.jianshu.io/assets/web/like_animation_steps-62a00a7b52377d3069927cdb8e61fd34.png);
background-position: left;
background-repeat: no-repeat;
background-size: 1000px 50px;
background-position: right;
animation: like 0.6s 1 steps(19);
}
@keyframes like{
0% {
background-position: left;
}
100% {
background-position: right;
}
}
</style>
</head>
<body>
<div class="like" onclick="like()" id="like">喜欢</div> <script>
function like() {
let like = document.querySelector('#like');
console.log(like.classList);
if (like.classList.length == 0) {
like.className = 'like';
} else {
like.className = '';
}
}
</script>
</body>
</html>
利用CSS3实现简书中点击“喜欢”时的动画的更多相关文章
- 【Web】解决简书图片不显示问题“系统维护中,图片暂时无法加载”
简书不显示图片的解决方法 首次编辑于2019-6-6 最近几天在浏览简书上的文章时,发现图片显示不出来,提示"系统维护中,图片暂时无法加载". 猜测应该是简书由于某种原因暂时屏蔽了 ...
- Android 中点击返回键弹出“在按一次退出程序”的做法
在很多应用中都有这种做法,连续点击两次才退出程序,目的是为了防止用户不小心点击到了返回键而退出程序了,添加了一次用户确认的过程. 其实做法很简单,只需要做一个延时的消息处理就可以了. 首先在我们在一个 ...
- iOS实现简书的账号识别方式(正则表达式)
通过简书iOS客户端登录,我们会看到请输入手机号或者邮箱登录,但是我们随机输入1234567的时候,便会弹出手机格式不正确,同样也会识别我们的邮箱格式,那么我们在项目中怎么实现这种判断呢? 0E471 ...
- [开源,学习,分享]UWP第三方简书客户端分享
简介 Windows10正式版发布到现在,我利用零零碎碎的一些时间对UWP进行一些学习,也基于这门技术开发了一个第三方的简书App. 基本界面 优酷视频: http://v.youku.com/v_s ...
- jsoup爬虫简书首页数据做个小Demo
代码地址如下:http://www.demodashi.com/demo/11643.html 昨天LZ去面试,遇到一个大牛,被血虐一番,发现自己基础还是很薄弱,对java一些原理掌握的还是不够稳固, ...
- 利用CSS3实现图片无间断轮播图的实现思路
前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...
- swift调用oc语言文件,第三方库文件或者自己创建的oc文件——简书作者
Swift是怎样调用OC的第三方库的呢?请看下面详情: 情况一: 1.首先打开Xcode,iOS->Application->Single View Application, 选Next. ...
- 仿简书、淘宝等等App的View弹出效果
昨天用简书App的时候觉得这个View的弹出效果特别好,而且非常平滑,所以我就尝试写了一个,和简书App上的效果基本一致了: 下面开始讲解: 1.首先我们要知道这个页面有几个View?这个页面其实有四 ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
随机推荐
- github添加ssh连接用户
最近打算用flask写一个自己的博客网站,打算把代码放在GitHub上,使用ssh访问.记录下GitHub配置ssh用户的流程. 1.在本地电脑或云服务器上生成ssh公钥和私钥,window下可以进入 ...
- CentOS7使用winbind加入AD
https://ishm.idv.tw/?p=336 CentOS 7 使用 winbind 加入 AD 需求:已經熟悉 CentOS 6 的 AD 加入方式,CentOS 7 已將 winbind ...
- Codejam Qualification Round 2019
本渣清明节 闲里偷忙 做了一下codejam 水平不出意外的在投稿之后一落千丈 后两题的hidden test竟然都挂了 A. Foregone Solution 水题,稍微判断一下特殊情况(比如10 ...
- Backbone.js源码浅介
终于看到一个只有一千多行的js框架了,于是抱着一定可以看懂他的逻辑的心态,查看了他的整个源码,进去之后才发现看明白怎么用容易,看懂怎么写的就难了,于是乎有了这篇博客的标题:浅介,只能粗浅的介绍下Bac ...
- Alpha版本发布时间安排
Alpha版本发布截止时间:2014年11月23日 第一轮迭代M1报告时间:2014年11月27日课上 - 每个团队5分钟时间汇报,5分钟时间提问 第一轮迭代M1事后分析报告时间:2014年11月29 ...
- windows8/10+Ubuntu Kylin(优麒麟)双系统
1.参考资料:http://www.jianshu.com/p/2eebd6ad284d 中第三种U盘启动方式安装完成 2.安装过程: (1)首先将一个盘空出来,做好其中数据的备份.启动win+X磁盘 ...
- SCRUM站立会议模拟
项目名称:连连看游戏 小组名称:计信F4 开会时间 :2016年10月11日 20:20~20:40 组长:张政 成员:张金生,武志远,李权 会议流程: 四个人模拟了一次的小组站立会议. 小组成员和组 ...
- 原生 JS 中 延迟脚本和异步脚本
一.延迟脚本 defer HTML4.0中为<script> 标签添加了个defer属性.属性的用途是表民脚本在执行时不会影响页面的构造. 脚本会被延迟到页面加载完毕的时候,执行.也就是当 ...
- Linux命令(七)查找文件或目录 find
find 命令可以根据给定的路劲和表达式查找指定的文件或目录.find 参数选项很多,并且支持正则表达式,功能强大. 和管道结合使用可以实现复杂的功能,是系统管理和普通用户必须掌握的命令. 一.fin ...
- 插入排序的C、C++实现
一.插入排序 有一个已经有序的数据序列,要求在这个已经排好的数据序列中插入一个数,但要求插入后此数据序列仍然有序,这个时候就要用到一种新的排序方法--插入排序法,插入排序的基本操作就是将一个数据插入到 ...