<!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. NodeJS旅程 : module 不可忽略的重点

    modules 模块的简介 Module 是Node.js中最重要的一个部分也是进行深度开发前的必修课.掌握Module才能真正理解NodeJS的精髓,你会发现从思路上会有极大的扩展.  学会写mod ...

  2. 带WIFI模块布局布线要点。

    带WIFI模块布局布线要求: 1: RF底部不能铺铜要挖空不能有GND否则RF信号会被耦合掉从而无法发送出去. 2:WIFI模块下方不能打孔尽量不走线不打孔避开其他信号穿过下方,要整体的铺铜 3:连接 ...

  3. Frida----安装

    介绍 它是本机应用程序的 Greasemonkey,或者更多技术术语,它是一个动态代码检测工具包.它允许您将JavaScript或您自己的库的片段注入Windows,macOS,GNU / Linux ...

  4. DICOM 协议学习笔记之 How Does DICOM Work ?

    How Does DICOM Work ? DICOM有一套自己自己的模型体系,在进行具体介绍之前,首先讲解下DICOM模型: 在DICOM世界当中,所有的包括患者.检查.医学设备等都可以被视为具有不 ...

  5. mui框架（一）

    1.界面初始化 初始化就是把一切程序设为默认状态,把没准备的准备好. mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支 ...

  6. android开发之使用SQLite数据库存储

    http://blog.csdn.net/jason0539/article/details/16360835 SQLite 介绍 SQLite 一个非常流行的嵌入式数据库,它支持 SQL 语言,并且 ...

  7. Mysql设置允许外网访问（图文）

    1.打开mysql.exe(MySQL Command Line Client),输入密码 2.输入:use mysql; 3.查询host输入: select user,host from user ...

  8. JDBC的编码步骤

    0.前提:拷贝数据库的驱动到构建路径中(classpath) 1.注册驱动 2.获取与数据库的链接 3.创建代表SQL语句的对象 4.执行SQL语句 5.如果是查询语句,需要遍历结果集 6.释放占用的 ...

  9. Linux命令（一） pwd ，cd

    1.pwd命令 以绝对路径的方式显示当前所处的工作目录,从根目录 / 开始,每一级目录用 / 分隔.第一个 / 表示根目录,最后一个目录是当前目录.当不知道当前处于哪个目录的时候,使用 pwd 命令就 ...

  10. android 权限

    1.开发的apk如果想要使用其他组件提供的功能,需要获取对应的权限.android提供了一些权限,在Manifest.permission类中定义. 比较常用的权限: