CSS
2 分钟搞定 3 个现代 CSS 特性
Javan
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伪类。 示例一 <…
纯CSS实现简单骨骼动画
背景 某天设计师来找我说，“这个心愿牌傻傻地挂在那不好看，加个动效呗，就左右摆动一下就行，很简单的！”，我一想，行呀，提升用户视觉体验，开搞。 十分钟后，🥶不对呀，这个左右摆动好假，不像现实中风吹的效果。 注：此处加快了动画的速度和…
学习CSS的正确打开方式：8款游戏带你学习CSS
前言 css的属性是非常的多，如果全靠大脑来记，相信没有几位能够做到，只能通过反复编写，增加熟练度，知道有哪些属性，然后根据编辑器或者浏览器等工具提示，得心应手的完成样式开发。 比如，flex布局。flex的属性justify-co…