CSS
CSS基础知识学习：CSS绘制铅笔
Javan
铅笔，距今已有四百多年的历史，其中，绘画素描的铅笔分为诸多类型，它分成三个发展阶段，分为石墨、木制笔杆、带帽铅笔。 1564年，在英格兰一个叫巴罗代尔的地方，人们发现了一种黑色矿物——石墨。很快，当地的一些牧羊人发现，可以用石墨在羊…
CSS爱心：把你的心我的心串一串
前面几个小节都要提到Box-Shadow，这个小节让我们来真正感受它的强大吧。话不多说，直接看图： 这个扑通扑通跳动的心，就是Box-Shadow制作的。如果你看过前面小节《CSS3 Box-Shadow Loading，创造无限可…
2 分钟搞定 3 个现代 CSS 特性
Clip Paths Clip Paths 能把元素元素“裁剪”成特定形状，使用 CSS 提供的 polygon、circle、ellipse 等这些函数实现。举个例子： div { background-image: url(ba…
Box-Shadow Loading，可以创造无限可能
Box-Shadow 通常，我们都是用作弹框阴影、需要层次的的元素等。但是它有更强大的功能，多层阴影，制作一些非常有趣的动画。 box-shadow: h-shadow v-shadow blur spread color inse…
CSS进度条式Loading，加载到100%我们的距离就近了
进度条，大家应该都看到过，一个定宽的容器，里面按百分比展示进度，这就是进度条。 CSS + HTML可以很简单的实现进度条功能，下面我们看一个简单示例 示例一 <div class="progress" id="progres…
CSS机械齿轮Loading，爱的魔力转圈圈
前言 “爱的魔力转圈圈，想你想到心花怒放黑夜白天，可是我害怕爱情只是一瞬间，转眼会不见...”，嗨起来，小伙伴们，跟我一起来！ 干啥玩意？这节是计算机课，不是音乐课。 确定不是机械课？ 额，差不太多吧，总之就是玩儿个轮子。 看图，怎…
CSS伪类：CSS3鼠标滑过按钮动画第三节
前言 有了之前的两章，小伙伴们对按钮悬浮动画是否又有了新的认识呢？ 前面两章主要是从背景着手，而本章主要是围绕边框动画做效果。并且，本章节（按钮组:有趣的CSS按钮动画，带你进入CSS世界）也就到此结束了，本章结尾会对前3小节进行一…
CSS伪类：CSS3鼠标滑过按钮动画第二节
前言 有了第一小节的经验，我们可以对直接的动画效果做一些升级效果，如果组合:before、:after，效果有更酷。 请先看一下效果示例吧： 下面一个一个示例讲解 示例一 <button class="btn-1">按钮…
圣诞快乐：纯CSS绘制圣诞老人头像
前言 圣诞来临前夕，为小伙伴们加更一个有趣的CSS3效果，CSS3圣诞老人，同时祝大家圣诞快乐。 也预示这2019接近尾声，还有心愿和目标没有实现的要加油哦。 下面看看示例图： 图例解析 看了上图，我们先分解一下图形，一步一步实现 …
CSS伪类：CSS3鼠标滑过按钮动画
前言 按钮，对开发者而言，是非常常见的一个功能。前端通常会对按钮加入一些操作交互样式，增加一些用户体验。 比如：hover样式、点击样式、loading样式等。下面我们通过简单示例在学习一下css3动画和css伪类。 示例一 <…