web前端

Box-Shadow Loading,可以创造无限可能

Box-Shadow Loading,可以创造无限可能

Box-Shadow 通常,我们都是用作弹框阴影、需要层次的的元素等。但是它有更强大的功能,多层阴影,制作一些非常有趣的动画。 box-shadow: h-shadow v-shadow blur spread color inse…
你可能从未使用过的11+个JavaScript特性

你可能从未使用过的11+个JavaScript特性

⚠重要 这篇文章中描述的大多数功能已被暂停使用。 它们仍然在许多图书中很常见,因此值得学习。 一、逗号运算符 , 是用于分隔表达式并返回链中最后一个表达式的运算符。 let oo = (1, 2, 3) console.log(oo…
CSS机械齿轮Loading,爱的魔力转圈圈

CSS机械齿轮Loading,爱的魔力转圈圈

前言 “爱的魔力转圈圈,想你想到心花怒放黑夜白天,可是我害怕爱情只是一瞬间,转眼会不见...”,嗨起来,小伙伴们,跟我一起来! 干啥玩意?这节是计算机课,不是音乐课。 确定不是机械课? 额,差不太多吧,总之就是玩儿个轮子。 看图,怎…
CSS伪类:CSS3鼠标滑过按钮动画第三节

CSS伪类:CSS3鼠标滑过按钮动画第三节

前言 有了之前的两章,小伙伴们对按钮悬浮动画是否又有了新的认识呢? 前面两章主要是从背景着手,而本章主要是围绕边框动画做效果。并且,本章节(按钮组:有趣的CSS按钮动画,带你进入CSS世界)也就到此结束了,本章结尾会对前3小节进行一…
CSS伪类:CSS3鼠标滑过按钮动画第二节

CSS伪类:CSS3鼠标滑过按钮动画第二节

前言 有了第一小节的经验,我们可以对直接的动画效果做一些升级效果,如果组合:before、:after,效果有更酷。 请先看一下效果示例吧: 下面一个一个示例讲解 示例一 <button class="btn-1">按钮…
高质量前端快照方案:来自页面的「自拍」

高质量前端快照方案:来自页面的「自拍」

1. 背景 将网页保存为图片(以下简称为快照),是用户记录和分享页面信息的有效手段,在各种兴趣测试和营销推广等形式的活动页面中尤为常见。 快照环节通常处于页面交互流程的末端,汇总了用户最终的参与结果,直接影响到用户对于活动的…
圣诞快乐:纯CSS绘制圣诞老人头像

圣诞快乐:纯CSS绘制圣诞老人头像

前言 圣诞来临前夕,为小伙伴们加更一个有趣的CSS3效果,CSS3圣诞老人,同时祝大家圣诞快乐。 也预示这2019接近尾声,还有心愿和目标没有实现的要加油哦。 下面看看示例图: 图例解析 看了上图,我们先分解一下图形,一步一步实现 …
CSS伪类:CSS3鼠标滑过按钮动画

CSS伪类:CSS3鼠标滑过按钮动画

前言 按钮,对开发者而言,是非常常见的一个功能。前端通常会对按钮加入一些操作交互样式,增加一些用户体验。 比如:hover样式、点击样式、loading样式等。下面我们通过简单示例在学习一下css3动画和css伪类。 示例一 <…