<!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. SpringBoot整合EHcache学习笔记

    为了提高系统的运行效率,引入缓存机制,减少数据库访问和磁盘IO.下面说明一下ehcache和SpringBoot整合配置 前言介绍 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特 ...

  2. 【转载】SSD断电保护原理

    异常掉电的隐患 若没有合理的掉电保护机制,而异常掉电的发生又不可避免,当发生异常掉电,会引发很多问题. (1)丢盘 异常掉电,会使得映射表来不及保存,丢失逻辑地址到物理地址的映射,待重新上电后,SSD ...

  3. OpenGL学习（2）——绘制三角形（补）

    对上一篇的补充,通过绘制三角形来完成矩形的绘制.此外,完成章节后练习. 绘制矩形 一个矩形由两个三角形组成,因此绘制矩形需要绘制两个三角形,一共6个顶点,其中2个顶点重复画了两次. 为了减小开销,仅储 ...

  4. LintCode——筛子求和

    描述:扔n个骰子,向上面的数字之和为 S .给定 Given n,请列出所有可能的 S 值及其相应的概率. 样例:给定n=1,返回 [ [1, 0.17], [2, 0.17], [3, 0.17], ...

  5. VGGNet论文翻译-Very Deep Convolutional Networks for Large-Scale Image Recognition

    Very Deep Convolutional Networks for Large-Scale Image Recognition Karen Simonyan[‡] & Andrew Zi ...

  6. unity上传app store遇到的一些问题

    记录ios发布时遇到的一些问题 注:如果你是用mac开发,那就在Unity里直接BuildAndRun就直接可以导到XCode里,如果是win,那就先打包成ios包,在传导Xcode里打开,不过可能会 ...

  7. VC++ MFC程序设置以管理员权限运行

    1.引入资源文件 (.manifest文件),文件中的 name 值为程序全称.exe:文件内容如下: <?xml version="1.0" encoding=" ...

  8. C++ new和delete 堆和栈

    一.new和delete基本用法 程序开发中内存的动态分配与管理永远是一个让C++开发者头痛的问题,在C中,一般是通过malloc和free来进行内存分配和回收的,在C++中,new和delete已经 ...

  9. LeetCode 70. Climbing Stairs爬楼梯 (C++)

    题目: You are climbing a stair case. It takes n steps to reach to the top. Each time you can either cl ...

  10. Spring之c3p0连接池配置和使用

    1.导入包:c3p0和mchange包 2.代码实现方式: package helloworld.pools; import com.mchange.v2.c3p0.ComboPooledDataSo ...