CSS3 - web秀

#CSS3#

共找到 CSS3 相关内容 69 条

4年前

圣诞快乐：纯CSS绘制圣诞老人头像

圣诞快乐：纯CSS绘制圣诞老人头像

前言圣诞来临前夕，为小伙伴们加更一个有趣的CSS3效果，CSS3圣诞老人，同时祝大家圣诞快乐。也预示这2019接近尾声，还有心愿和目标没有实现的要加油哦。下面看看示例图：图例解析看了上图，我们先分解一下图形，一步一步实现1、整个头像用一个圆形包裹2、头像分为上下两部分，头和身体3、头有分为帽子，脸部，胡子，耳朵；身体上还有扣子4、脸上有眼睛，鼻子，嘴巴ok，分解细致后，我们就把大致的结构画出来，动画先忽略。html结构分解身体部分<divclass="window"><divclass=

553446 3692 0

4年前

CSS 3D世界，3D 透视照片墙

CSS 3D世界，3D 透视照片墙

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

547518 3381 0

4年前

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

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

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

548853 3276 0

4年前

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

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

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

548551 3350 0

4年前

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

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

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

552668 3654 0

4年前

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

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

Box-Shadow通常，我们都是用作弹框阴影、需要层次的的元素等。但是它有更强大的功能，多层阴影，制作一些非常有趣的动画。box-shadow:h-shadowv-shadowblurspreadcolorinset;属性值描述h-shadow指阴影水平偏移量，其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边v-shadow指阴影的垂直偏移量，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部blur阴影模糊半径，此参数是可选，只能为正值，如果其值为0时，表示阴影不具有模

555221 3678 0

4年前

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

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

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

552924 3599 2

4年前

CSS机械齿轮Loading，爱的魔力转圈圈

CSS机械齿轮Loading，爱的魔力转圈圈

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

554974 3641 0

4年前

CSS伪类：CSS3鼠标滑过按钮动画第三节

CSS伪类：CSS3鼠标滑过按钮动画第三节

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

554677 3676 0

4年前

炫酷的CSS 作图web组件 - css-doodle

炫酷的CSS 作图web组件 - css-doodle

今天不写代码，就看看人家是如何写代码的。什么是css-doodle官方地址：https://css-doodle.com/<css-doodle/>是一个Web组件。其基于ShadowDOMV1和CustomElementsV1来构建的。该组件可以帮助轻松的使用CustomElements、ShadowDOM和CSSGrid创建任何你想要的图案（CSS图案）。创建出来的图案你可以运用于Web页面中。当你看到CustomElements、ShadowDOM和CSSGrid的时候，一定很担忧兼容问

548887 3401 0

下拉加载更多