利用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给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
随机推荐
- 部署AlwaysOn第二步:配置AlwaysOn,创建可用性组
AlwaysOn是在SQL Server 2012中新引入的一种高可用技术,从名称中可以看出,AlwaysOn的设计目标是保持数据库系统永远可用.AlwaysOn利用了Windows服务器故障转移集群 ...
- SpringMVC RestTemplate的几种请求调用
转载:https://blog.csdn.net/ThinkingLink/article/details/45366777 1.用统一的方法模板进行四种请求:POST,PUT,DELETE,GET ...
- 利用fiddler core api 拦截修改 websocket 数据
一般的中间人攻击基本都是拦截修改普通的http协议里面的内容,而对于怎么拦截修改websocket协议传输的内容好像都没有多少介绍. talk is cheap show me the code us ...
- Webpack学习-Webpack初识
一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...
- visual studio-2013之单元测试
安装个vs把一个寝室搞得欲仙欲死的,,已经安装好了vs2013,那些欲仙欲死的事就都不说了.开始我们的正式作业——单元测试. 要做单元测试前提有: 1.要有Unit Test Generator工具 ...
- (第三周)c#程序理解
阅读下面程序,请回答如下问题: 问题1:这个程序要找的是符合什么条件的数? 问题2:这样的数存在么?符合这一条件的最小的数是什么? 问题3:在电脑上运行这一程序,你估计多长时间才能输出第一个结果?时间 ...
- 第四次WBS
分解原则 1.将主体目标逐步细化分解,最底层的日常活动可直接分派到个人去完成: 2.每个任务原则上要求分解到不能再细分为止: 3.日常活动要对应到人.时间和资金投入. 二.任务分解的方法 1.采用树状 ...
- Winform设置托盘程序,托盘显示
1.拖一个NotifyIcon,一个ContextMenuStrip控件到主窗体中 2.设置notifyIcon1,一个contextMenuStrip1(如下图) Icon为托盘图标,Text托盘显 ...
- CI框架 default_controller 如何设置为:'目录/Controller' 转
闲谈 前几天,我的室友发现了一个问题:CI框架的Router.php文件的default_controller设置为application\controllers文件下的 一级PHP文件名 就可以,设 ...
- OneZero第四周第一次站立会议(2016.4.11)
1. 时间: 15:10--15:25 共计15分钟. 2. 成员: X 夏一鸣 * 组长 (博客:http://www.cnblogs.com/xiaym896/), G 郭又铭 (博客:http ...