<!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. vue中v-if 和 v-show的区别

    简单来说,v-if 的初始化较快,但切换代价高:v-show 初始化慢,但切换成本低 1.共同点 v-if 和 v-show 都可以动态地显示DOM元素 2.区别 (1)手段: v-if 是动态的向D ...

  2. JavaScript实现选项卡（三种方法）

    本文实例讲述了js选项卡的实现方法. 一.html代码: <div id="div1"> <input class="active" type ...

  3. [LOJ#6066]. 「2017 山东一轮集训 Day3」第二题[二分+括号序列+hash]

    题意 题目链接 分析 首先二分,假设二分的答案为 \(mid\),然后考虑利用括号序列来表示树的形态. 点 \(u\) 的 \(k-\) 子树的括号序列表示实际上是刨去了 \(u\) 子树内若干个与 ...

  4. 【源码】进入ASP.NET MVC流程的大门 - UrlRoutingModule

    UrlRoutingModule的功能 在ASP.NET MVC的请求过程中,UrlRoutingModule的作用是拦截当前的请求URL,通过URL来解析出RouteData,为后续的一系列流程提供 ...

  5. FastDFS教程Ⅰ-文件服务器安装与Nginx配置

    1.简介     FastDFS是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了大容量存储和负载均衡的问题.特别适合以文件为载 ...

  6. linux centos 中Tomcat的安装和自启动配置

    Tomcat的安装和自启动配置将tomcat添加为linux系统服务,网上找到了很多方法,其中比较简单的如下:方法一:(亲测有效)1. 首先需要将$Tomcat_HOME/bin目录下的catalin ...

  7. manjaro安装软件

    fcitx 安装以下包 fcitx-googlepinyin kcm-fcitx 安装了输入法之后,还要在/etc/profile或~/.xprofile里添加如下内容: export GTK_IM_ ...

  8. Unity协程Coroutine使用总结和一些坑

    原文摘自 Unity协程Coroutine使用总结和一些坑 MonoBehavior关于协程提供了下面几个接口: 可以使用函数或者函数名字符串来启动一个协程,同时可以用函数,函数名字符串,和Corou ...

  9. Shell 基础 -- 总结几种括号、引号的用法

    Shell 脚本中经常需要用到一些括号.引号表达式,功能各不相同,本文详细介绍一下. 1.双引号 " " 双引号常用于包含一组字符串,在双引号中,除了 "$". ...

  10. vector读入指定行数但不指定列数的数字

    #include <iostream> #include <vector> #include <cstdio> #include <cstring> # ...