CSS
炫酷的CSS 作图web组件 – css-doodle
Javan
今天不写代码，就看看人家是如何写代码的。 什么是css-doodle 官方地址： https://css-doodle.com/ <css-doodle />是一个Web组件。其基于Shadow DOM V1和Custo…
CSS 3D世界，360°旋转水晶魔方
你家有类似的水晶魔方吗？我第一次见到它的时候，就觉得这个东西真不错，所以我家现在有2个。不过一个已经坏掉了，坐车放在箱子里面，颠簸导致水晶的四个角都破损了，大家如果要携带一定要小心哦。 现在我们来制作一个永远不会破损的水晶魔方，用代…
CSS3D世界，纯CSS如何绘制三棱锥
非常抱歉，断更了半年，原因也是有很多，疫情期间在老家也是没有电脑，上班后非常的忙，种种原因吧。 让小伙伴们久等了，非常抱歉！后续还是保持正常更新，不辜负小伙伴们的信任。 下面还是回归今天的主题：CSS如何制作三棱锥？ 结构 三棱锥，…
CSS基础知识学习：CSS绘制铅笔
铅笔，距今已有四百多年的历史，其中，绘画素描的铅笔分为诸多类型，它分成三个发展阶段，分为石墨、木制笔杆、带帽铅笔。 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小节进行一…