<!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实现简书中点击“喜欢”时的动画的更多相关文章

  1. 【Web】解决简书图片不显示问题“系统维护中，图片暂时无法加载”

    简书不显示图片的解决方法 首次编辑于2019-6-6 最近几天在浏览简书上的文章时,发现图片显示不出来,提示"系统维护中,图片暂时无法加载". 猜测应该是简书由于某种原因暂时屏蔽了 ...

  2. Android 中点击返回键弹出“在按一次退出程序”的做法

    在很多应用中都有这种做法,连续点击两次才退出程序,目的是为了防止用户不小心点击到了返回键而退出程序了,添加了一次用户确认的过程. 其实做法很简单,只需要做一个延时的消息处理就可以了. 首先在我们在一个 ...

  3. iOS实现简书的账号识别方式(正则表达式)

    通过简书iOS客户端登录,我们会看到请输入手机号或者邮箱登录,但是我们随机输入1234567的时候,便会弹出手机格式不正确,同样也会识别我们的邮箱格式,那么我们在项目中怎么实现这种判断呢? 0E471 ...

  4. [开源,学习,分享]UWP第三方简书客户端分享

    简介 Windows10正式版发布到现在,我利用零零碎碎的一些时间对UWP进行一些学习,也基于这门技术开发了一个第三方的简书App. 基本界面 优酷视频: http://v.youku.com/v_s ...

  5. jsoup爬虫简书首页数据做个小Demo

    代码地址如下:http://www.demodashi.com/demo/11643.html 昨天LZ去面试,遇到一个大牛,被血虐一番,发现自己基础还是很薄弱,对java一些原理掌握的还是不够稳固, ...

  6. 利用CSS3实现图片无间断轮播图的实现思路

    前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...

  7. swift调用oc语言文件，第三方库文件或者自己创建的oc文件——简书作者

    Swift是怎样调用OC的第三方库的呢?请看下面详情: 情况一: 1.首先打开Xcode,iOS->Application->Single View Application, 选Next. ...

  8. 仿简书、淘宝等等App的View弹出效果

    昨天用简书App的时候觉得这个View的弹出效果特别好,而且非常平滑,所以我就尝试写了一个,和简书App上的效果基本一致了: 下面开始讲解: 1.首先我们要知道这个页面有几个View?这个页面其实有四 ...

  9. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

随机推荐

  1. [SDOI2010]地精部落[计数dp]

    题意 求有多少长度为 \(n\) 的排列满足 \(a_1< a_2> a_3 < a_4 \cdots\) 或者 $a_1> a_2 < a_3 > a_4\cdo ...

  2. 使用DOS工具修复数据库

    当SQL Server 实例出现异常,无法远程链接时,数据库管理员需要登陆到SQL Server实例机器上,通过命令行工具,修复异常. 一,使用net命令行启动数据库 通过net start 命令启动 ...

  3. 蓝牙学习笔记二（Android连接问题）

    可以通过以下两点加速蓝牙连接: 1.更新连接参数 interval:连接间隔(connection intervals ),范围在 7.5 毫秒 到 4 秒. latency:连接延迟 ... 还有一 ...

  4. JavaScript快速入门-ECMAScript运算符

    1.逻辑运算符 逻辑与:&&(and) 逻辑或:||(or) 逻辑非:!(not) 逻辑 AND 运算符(&&) 逻辑 AND 运算的运算数可以是任何类型的,不止是 B ...

  5. C#_备份sqlserver数据库

    C# 代码备份数据库 ,不需要 其他 DLL protected void Button1_Click(object sender, EventArgs e)    {        ///     ...

  6. Js_图片轮换

    本文介绍用javascript制作图片轮换效果,原理很简单,就是设置延时执行一个切换函数,函数里面是先设置下面的缩略图列表的白框样式,再设置上面大图的src属性,在IE中显示很正常,可是在FF中会有变 ...

  7. java 软件开发面试宝典

    一. Java 基础部分........................................................................................ ...

  8. 复习下VLAN的知识

    转载:来自百度百科 VLAN一般指虚拟局域网 VLAN(Virtual Local Area Network)的中文名为"虚拟局域网". 虚拟局域网(VLAN)是一组逻辑上的设备和 ...

  9. linux一切皆文件之tcp socket描述符（三）

    一.知识准备 1.在linux中,一切皆为文件,所有不同种类的类型都被抽象成文件(比如:块设备,socket套接字,pipe队列) 2.操作这些不同的类型就像操作文件一样,比如增删改查等 二.环境准备 ...

  10. Notes of Daily Scrum Meeting（12.21）

    今天的燃尽图把周六的进度加了进来,由于我的失误没有及时更新TFS,所以出现了一些错误,向大家道歉. 下面是今天的任务总结: 团队成员 今日团队工作 陈少杰 继续进行网络连接的调试 王迪 测试搜索的功能 ...