技巧

  • 使用纯 CSS 的方法,能否暂停、播放纯 CSS 动画?看起来不可能,至少很麻烦。

    我们知道,在 CSS3 animation 中,有这样一个属性可以播放、暂停动画:

    {
        animation-play-state: paused | running;
    }

    animation-play-state: 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外,它的值可以被设置为暂停和恢复的动画的重放。

    如果借助 Javascrip,我们可以实现控制 CSS 动画的运行和播放,下面列出部分关键代码:

    <div class="btn">stop</di
  • 问,CSS 中 position 属性的取值有几个?
    大部分人的回答是,大概是下面这几个吧?

    {
        position: static;
        position: relative;
        position: absolute;
        position: fixed;
    }

    额,其实,我们还可以有这 3 个取值:

    {
        /* 全局值 */
        position: inherit;
        position: initial;
        position: unset;
    }

    没了吗?偶然发现其实还有一个处于实验性的取值,position:sticky戳我查看MDN解释):

    {
    

  • 奇妙的 CSS shapes(CSS图形)

    CSS 发展到今天已经越来越强大了。其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能:

    • clip-path
    • shape-outside

    shape 的意思是图形,CSS shapes 也就是 CSS 图形的意思,也就是使用 CSS 生成各种图形(圆形、矩形、椭圆、多边形等几何图形)。

    CSS3之前,我们能做的只有矩形,四四方方,条条框框。

    CSS3

    CSS3出来后,我们有了更广阔的施展空间,通过

    • border-radius
    • border
    • transform
    • 伪元素配合
    • grad
  • 1、前言

    观察者模式( 又叫发布-订阅者模式 )应该是最常用的模式之一,在很多语言里都得到大量应用。包括我们平时接触的 dom 事件,也是 js 和 dom 之间实现的一种观察者模式。

    document.body.addEventListener("click", function() {
        alert("Hello World");
    });
    document.body.click();
    

    在这里需要监控用户点击 document.body 的动作,但是我们没办法预知用户将在什么时候点击。所以我们订阅了 document.body 的 click 事件,当 body 节点被点击时,bod

  • 起始

    同许多初学 Javascript 的菜鸟一样,起初,我也是采用拼接字符串的形式,将 JSON 数据嵌入 HTML 中。开始时代码量较少,暂时还可以接受。但当页面结构复杂起来后,其弱点开始变得无法忍受起来:

    • 书写不连贯。每写一个变量就要断一下,插入一个 + 和 "。十分容易出错。
    • 无法重用。HTML 片段都是离散化的数据,难以对其中重复的部分进行提取。
    • 无法很好地利用 <template> 标签。这是 HTML5 中新增的一个标签,标准极力推荐将 HTML 模板放入 <template> 标签中,使代码更简洁。

    当时我的心情就是这样的:
    这TMD是在逗我吗。