<!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. Notes of Daily Scrum Meeting（12.19）

    今天工作进展的速度别昨天稍有提高,希望大家再接再厉!加油! 团队任务总结如下: 团队成员 今日团队工作 陈少杰 重新尝试使用get等方法进行网络连接的调试 王迪 调试搜索功能中测出的问题 金鑫 测试已 ...

  2. Notes of Daily Scrum Meeting（12.3）

    这个月大家的课业任务很重啊,加上软工有三个课程设计要完成了,感觉亚历山大的说,而且我们alpha阶段完成度低一些, 所以任务更多了,今天做的东西就不多,希望大家加油吧! 团队成员 今日团队工作 陈少杰 ...

  3. Alpha阶段_团队分数分配

    小组成员 分数分配 薄霖 74 徐越 65 赵庶宏 65 赵铭 41 武鑫 39 卞忠昊 36 叶能端 30

  4. DeepID1,DeepID2

    1.DeepID1 (Deep Learning Face Representation from Predicting 10,000 Classes) Step1:构建网络框架 DeepConvNe ...

  5. “耐撕”团队 2016.03.25 站立会议

    1.时间:2016.3.23  2.成员: Z 郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客:http://www.cnblo ...

  6. [转帖]"微信支付"勒索病毒制造者被锁定 传播、危害和疫情终极解密 --- 可以学习下一年火绒团队的分析原理的精神.

    "微信支付"勒索病毒制造者被锁定 传播.危害和疫情终极解密 https://www.cnbeta.com/articles/tech/794851.htm 12月1日,首个要求&q ...

  7. [转载]Docker 完全指南

    Docker 完全指南 原作者地址: https://wdxtub.com/2017/05/01/docker-guide/  发表于 2017-05-01 |  更新于 2017-08-03 |   ...

  8. Redis Cluster机器内存充爆处理

    机器配置 系统:CentOS6.7 配置:4C8G 应用:Redis Cluster,实例化 现象 1.无法启动redis,启动后系统OOM,直接杀死 2.Redis: OOM command not ...

  9. Influxdb安装部署

    1.下载Influxdb并解压 2.下载上图中的nssm(辅助性工具) 3.  在安装目录执行cmd 输入 nssm install influxdb,其中Path选择安装文件中的influxd,Ar ...

  10. requestMapping设置客户端访问地址