css 的标签存档

CSS简笔画logo系列:纯CSS绘制“Adidas” Logo

CSS简笔画logo系列:纯CSS绘制“Adidas” Logo

本节你能get到什么前端知识 1、CSS Flex垂直居中对齐 2、CSS clip 剪裁 3、CSS box-shadow 多阴影 看图解构 看图很简单咯,Adidas Logo就是用3个“梭形”组成,然后添加3条和底色一样颜色的…
CSS简笔画:纯CSS绘制一艘邮轮

CSS简笔画:纯CSS绘制一艘邮轮

本节你能get到什么前端知识 1、CSS 变量 2、CSS 伪类的灵活使用 3、CSS 绘制 梯形、箭头、转发箭头 4、CSS 相对定位和绝对定位 5、CSS transform 变形 6、CSS box-shadow 7、CSS …
CSS简笔画:纯CSS绘制一辆婴儿车

CSS简笔画:纯CSS绘制一辆婴儿车

专栏也更新了一小半了,不知道大家都学到了吗?CSS学习其实不难,难的是动手实践,当你看到一个效果是,觉得这个实现起来很难、很难,但是你一旦动手,一步一步分解实现,会发现也没有想象中的那么难。 下面我们动手写一个纯CSS婴儿车,你将学…
CSS简笔画:纯CSS绘制一顶帽子

CSS简笔画:纯CSS绘制一顶帽子

夏天,人人都希望有一顶漂亮的帽子吧?来,我送给你。 看图解构 帽子结构很简单,分为帽檐、帽冠、饰带、饰带上面有花朵 html帽子结构 <div class="cap"> <!-- 帽冠 --> <div…
CSS 3D世界,360°旋转水晶魔方

CSS 3D世界,360°旋转水晶魔方

你家有类似的水晶魔方吗?我第一次见到它的时候,就觉得这个东西真不错,所以我家现在有2个。不过一个已经坏掉了,坐车放在箱子里面,颠簸导致水晶的四个角都破损了,大家如果要携带一定要小心哦。 现在我们来制作一个永远不会破损的水晶魔方,用代…
CSS3D世界,纯CSS如何绘制三棱锥

CSS3D世界,纯CSS如何绘制三棱锥

非常抱歉,断更了半年,原因也是有很多,疫情期间在老家也是没有电脑,上班后非常的忙,种种原因吧。 让小伙伴们久等了,非常抱歉!后续还是保持正常更新,不辜负小伙伴们的信任。 下面还是回归今天的主题:CSS如何制作三棱锥? 结构 三棱锥,…
CSS基础知识学习:CSS绘制铅笔

CSS基础知识学习:CSS绘制铅笔

铅笔,距今已有四百多年的历史,其中,绘画素描的铅笔分为诸多类型,它分成三个发展阶段,分为石墨、木制笔杆、带帽铅笔。 1564年,在英格兰一个叫巴罗代尔的地方,人们发现了一种黑色矿物——石墨。很快,当地的一些牧羊人发现,可以用石墨在羊…
CSS爱心:把你的心我的心串一串

CSS爱心:把你的心我的心串一串

前面几个小节都要提到Box-Shadow,这个小节让我们来真正感受它的强大吧。话不多说,直接看图: 这个扑通扑通跳动的心,就是Box-Shadow制作的。如果你看过前面小节《CSS3 Box-Shadow Loading,创造无限可…
Box-Shadow Loading,可以创造无限可能

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

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