web秀

今天不写代码，就看看人家是如何写代码的。什么是css-doodle<css-doodle />是一个Web组件。其基于Shadow DOM V1和Custom Elements V1来构建的。该组件可以帮助轻松的使用Custom Elements、Shadow DOM和CSS Grid创建任何你想要的图案（CSS 图案）。创建出来的图案你可以运用于Web页面中。当你看到Custom Elements、Shadow DOM和CSS Grid的时候，一定很担忧兼容问题。事实上你的担忧是正常的

原文地址：http://www.javanx.cn/20191224/buttonhover/前言按钮，对开发者而言，是非常常见的一个功能。前端通常会对按钮加入一些操作交互样式，增加一些用户体验。比如：hover样式、点击样式、loading样式等。下面我们通过简单示例在学习一下css3动画和css伪类。示例一<button class="btn-1">按钮一</button><style>button{ position: relative; w

原文地址：http://www.javanx.cn/20191225/buttonhover-2-1/前言有了第一小节的经验，我们可以对直接的动画效果做一些升级效果，如果组合:before、:after，效果有更酷。请先看一下效果示例吧：下面一个一个示例讲解示例一<button class="btn-1">按钮一</button><style>button{ position: relative; width: 100px; height:

原文地址：http://www.javanx.cn/20191226/buttonhover-2-2/前言有了之前的两章，小伙伴们对按钮悬浮动画是否又有了新的认识呢？前面两章主要是从背景着手，而本章主要是围绕边框动画做效果。并且，本章节（按钮组:有趣的CSS按钮动画，带你进入CSS世界）也就到此结束了，本章结尾会对前3小节进行一定的总结。下面继续本小节的主题，请先看一下效果示例：看过前两小节的小伙伴，可能不需要看下面的源码，就知道如何实现了，大家可以先自己动手试试，然后再回头来看看。或许实现方式

原文地址：http://www.javanx.cn/20191224/css0/前言下面看看示例图：图例解析看了上图，我们先分解一下图形，一步一步实现1、整个头像用一个圆形包裹2、头像分为上下两部分，头和身体3、头有分为帽子，脸部，胡子，耳朵；身体上还有扣子4、脸上有眼睛，鼻子，嘴巴ok，分解细致后，我们就把大致的结构画出来，动画先忽略。html结构分解身体部分<div class="window"> <div class="santa"> &l

进度条，大家应该都看到过，一个定宽的容器，里面按百分比展示进度，这就是进度条。CSS + HTML可以很简单的实现进度条功能，下面我们看一个简单示例示例一<div class="progress" id="progress1"></div>css#progress1{ position: relative; width: 200px; height: 20px; background: #dfdfdf;}#progress1:before{ p.

前言“爱的魔力转圈圈，想你想到心花怒放黑夜白天，可是我害怕爱情只是一瞬间，转眼会不见…”，嗨起来，小伙伴们，跟我一起来！干啥玩意？这节是计算机课，不是音乐课。确定不是机械课？额，差不太多吧，总之就是玩儿个轮子。看图，怎么都是机械课啊，但是我们本次课程，只需要将其效果用HTML + CSS实现，所以还是计算机课，想上音乐课、机械课的可以先离开一下。下面回归正题，对示例讲解先来个轮子大家肯定想，齿轮的锯齿如何实现呢？其实很简单就可以画出来，大家看下方代码<div id="loadin

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TPZgs4eQ-1597887470974)(http://cdn.javanx.cn/wp-content/themes/lensnews2.2/images/201912/7/1.gif)]Box-Shadow 通常，我们都是用作弹框阴影、需要层次的的元素等。但是它有更强大的功能，“多层阴影”，制作一些非常有趣的动画。box-shadow: h-shadow v-shadow blur spread color ins

有了前面2章内容，大家应该对CSS 3D的构建，都有了一定认知了，动手能力强的小伙伴可能已经开始自己做好看的效果了。今天我们就来滚固一下前面学的知识，下面有一个"3D照片墙"示例来加深一下我们所学的知识。结构用一个容器div.photo，装六个面<div class="photo"> <div class="example"></div> <div class="example"></div> <div class="ex

铅笔，距今已有四百多年的历史，其中，绘画素描的铅笔分为诸多类型，它分成三个发展阶段，分为石墨、木制笔杆、带帽铅笔。1564年，在英格兰一个叫巴罗代尔的地方，人们发现了一种黑色矿物——石墨。很快，当地的一些牧羊人发现，可以用石墨在羊身上画上记号。受此启发，人们把石墨块切成小条拿来写字和绘画。但石墨条很容易弄脏手，而且容易折断。1761年，德国化学家法伯尔解决了这个问题：他先把石墨矿石研磨成粉末，用水冲洗去杂质，获得纯净的石墨粉；接着，他又在石墨粉中掺入硫磺、锑、松香等物质；然后再将这种混合物加热凝固，并压.

前面几个小节都要提到Box-Shadow，这个小节让我们来真正感受它的强大吧。话不多说，直接看图：这个扑通扑通跳动的心，就是Box-Shadow制作的。如果你看过前面小节《CSS3 Box-Shadow Loading，创造无限可能》，应该看到这个效果，就可以自己动手做了。下面我们一起动手试试吧绘制心形<div class="heart"></div>css.heart { font-size: 30px; width: 1em; height: 1em;

非常抱歉，断更了半年，原因也是有很多，疫情期间在老家也是没有电脑，上班后非常的忙，种种原因吧。让小伙伴们久等了，非常抱歉！后续还是保持正常更新，不辜负小伙伴们的信任。下面还是回归今天的主题：CSS如何制作三棱锥？结构三棱锥，大家看图，应该能看到它共有4个面，分别是3个侧面，1个底面。我们将其细分为，前面、左面、右面和底面。用html表示如下：<ul class="cones-inner"> <li class="front"></li> <li c

你家有类似的水晶魔方吗？我第一次见到它的时候，就觉得这个东西真不错，所以我家现在有2个。不过一个已经坏掉了，坐车放在箱子里面，颠簸导致水晶的四个角都破损了，大家如果要携带一定要小心哦。现在我们来制作一个永远不会破损的水晶魔方，用代码实现，要不代码出bug，永远不坏。CSS3实现水晶魔方效果。结构水晶是一个正方体，所以有6个面，用html表示如下：<ul class="cube-inner"> <li class="top"></li> <li c

前面文章有制作水晶魔方，这次我们升级一下它的功能，通过鼠标控制魔方旋转。大家先看效果这酷炫的效果，你怎么看？鼠标事件这次效果，咱们需要用JS实现。主要是监听鼠标事件，计算鼠标滑动距离，改变魔方的rotateX、rotateYJS有哪些鼠标事件呢？1、click：单击事件。2、dblclick：双击事件。3、onmousedown：鼠标按下时触发事件，不管按住左键/右键还是滑轮都可以4、onmousemove：鼠标移动实时触发事件5、onmouseup：鼠标松开时触发事件6、mous

专栏也更新了一小半了，不知道大家都学到了吗？CSS学习其实不难，难的是动手实践，当你看到一个效果是，觉得这个实现起来很难、很难，但是你一旦动手，一步一步分解实现，会发现也没有想象中的那么难。下面我们动手写一个纯CSS婴儿车，你将学习到下列知识：你能get到1、CSS Flex水平垂直居中2、CSS 变量（前面小节已经讲过）3、CSS 伪类的灵活使用4、CSS 相对定位和绝对定位5、CSS 绘制 半圆形 扇形 三角形6、CSS transform 变形看图解构婴儿车结构很简单，从下至上，.

好可爱一只小狗狗！睡觉憨憨的样子，听到细微的声音，立马竖起他的耳朵，看向远方。你是不是想拥有这样一只忠实而又可爱的狗狗呢？可爱的你值得拥有！上图是用什么软件制作的呢？用纯CSS+HTML你信吗？不信的，让我们拭目以待吧！看图解构看上图，狗狗有圆圆头，2只小小的眼睛和2只长长的耳朵，鼻子，嘴巴，4只脚，身体、尾巴组成。细节：1、地上有阴影，狗狗抬头时阴影会缩小2、狗狗是趴着在，所有只能看到3只脚3、狗狗睡觉时，呼吸会让身体上下起伏4、狗狗抬头时，耳朵会上扬有了结构思路，我们可以先来画出.

夏天，人人都希望有一顶漂亮的帽子吧？来，我送给你。看图解构帽子结构很简单，分为帽檐、帽冠、饰带、饰带上面有花朵html帽子结构<div class="cap"> <!-- 帽冠 --> <div class="top"> <!-- 饰带 --> <div class="lace"> <!-- 花朵 --> <div class="flower"> &l.