Web秀
首页
专栏
文章
问答
热点
导航
实例
首页
登录
首页
前端
JavaScript
Vue.js
CSS
Uni-App
专栏
问答
工具
全网热点
导航
前端
设计
实例
登录
#css3#
共找到
css3
相关内容
69
条
优先问答
优先文章
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
4年前
圣诞快乐:纯CSS绘制圣诞老人头像
前言圣诞来临前夕,为小伙伴们加更一个有趣的CSS3效果,CSS3圣诞老人,同时祝大家圣诞快乐。也预示这2019接近尾声,还有心愿和目标没有实现的要加油哦。下面看看示例图:图例解析看了上图,我们先分解一下图形,一步一步实现1、整个头像用一个圆形包裹2、头像分为上下两部分,头和身体3、头有分为帽子,脸部,胡子,耳朵;身体上还有扣子4、脸上有眼睛,鼻子,嘴巴ok,分解细致后,我们就把大致的结构画出来,动画先忽略。html结构分解身体部分<divclass="window"><divclass=
553452
3692
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
4年前
CSS 3D世界,3D 透视照片墙
有了前面2章内容,大家应该对CSS3D的构建,都有了一定认知了,动手能力强的小伙伴可能已经开始自己做好看的效果了。今天我们就来滚固一下前面学的知识,下面有一个"3D照片墙"示例来加深一下我们所学的知识。结构用一个容器div.photo,装六个面<divclass="photo"><divclass="example"></div><divclass="example"></div><divclass="example"></di
547524
3381
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
4年前
CSS 3D世界,360°旋转水晶魔方
你家有类似的水晶魔方吗?我第一次见到它的时候,就觉得这个东西真不错,所以我家现在有2个。不过一个已经坏掉了,坐车放在箱子里面,颠簸导致水晶的四个角都破损了,大家如果要携带一定要小心哦。现在我们来制作一个永远不会破损的水晶魔方,用代码实现,要不代码出bug,永远不坏。CSS3实现水晶魔方效果。结构水晶是一个正方体,所以有6个面,用html表示如下:<ulclass="cube-inner"><liclass="top"></li><liclass="bottom"&
548856
3276
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
4年前
CSS3D世界,纯CSS如何绘制三棱锥
非常抱歉,断更了半年,原因也是有很多,疫情期间在老家也是没有电脑,上班后非常的忙,种种原因吧。让小伙伴们久等了,非常抱歉!后续还是保持正常更新,不辜负小伙伴们的信任。下面还是回归今天的主题:CSS如何制作三棱锥?结构三棱锥,大家看图,应该能看到它共有4个面,分别是3个侧面,1个底面。我们将其细分为,前面、左面、右面和底面。用html表示如下:<ulclass="cones-inner"><liclass="front"></li><liclass="right"&
548559
3350
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
4年前
CSS基础知识学习:CSS绘制铅笔
铅笔,距今已有四百多年的历史,其中,绘画素描的铅笔分为诸多类型,它分成三个发展阶段,分为石墨、木制笔杆、带帽铅笔。1564年,在英格兰一个叫巴罗代尔的地方,人们发现了一种黑色矿物——石墨。很快,当地的一些牧羊人发现,可以用石墨在羊身上画上记号。受此启发,人们把石墨块切成小条拿来写字和绘画。但石墨条很容易弄脏手,而且容易折断。1761年,德国化学家法伯尔解决了这个问题:他先把石墨矿石研磨成粉末,用水冲洗去杂质,获得纯净的石墨粉;接着,他又在石墨粉中掺入硫磺、锑、松香等物质;然后再将这种混合物加热凝固,并压制
552674
3654
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
4年前
Box-Shadow Loading,可以创造无限可能
Box-Shadow通常,我们都是用作弹框阴影、需要层次的的元素等。但是它有更强大的功能,多层阴影,制作一些非常有趣的动画。box-shadow:h-shadowv-shadowblurspreadcolorinset;属性值描述h-shadow指阴影水平偏移量,其值可正可负,正值,则阴影在对象的右边,负值,阴影在对象的左边v-shadow指阴影的垂直偏移量,其值也可以是正负值,正值,阴影在对象的底部,负值时,阴影在对象的顶部blur阴影模糊半径,此参数是可选,只能为正值,如果其值为0时,表示阴影不具有模
555226
3678
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
4年前
CSS爱心:把你的心我的心串一串
前面几个小节都要提到Box-Shadow,这个小节让我们来真正感受它的强大吧。话不多说,直接看图:这个扑通扑通跳动的心,就是Box-Shadow制作的。如果你看过前面小节《CSS3Box-ShadowLoading,创造无限可能》,应该看到这个效果,就可以自己动手做了。下面我们一起动手试试吧绘制心形<divclass="heart"></div>css.heart{font-size:30px;width:1em;height:1em;color:red;background-co
552931
3599
2
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
4年前
CSS机械齿轮Loading,爱的魔力转圈圈
前言“爱的魔力转圈圈,想你想到心花怒放黑夜白天,可是我害怕爱情只是一瞬间,转眼会不见...”,嗨起来,小伙伴们,跟我一起来!干啥玩意?这节是计算机课,不是音乐课。确定不是机械课?额,差不太多吧,总之就是玩儿个轮子。看图,怎么都是机械课啊,但是我们本次课程,只需要将其效果用HTML+CSS实现,所以还是计算机课,想上音乐课、机械课的可以先离开一下。下面回归正题,对示例讲解先来个轮子大家肯定想,齿轮的锯齿如何实现呢?其实很简单就可以画出来,大家看下方代码<divid="loading"><d
554984
3641
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
4年前
CSS伪类:CSS3鼠标滑过按钮动画第三节
前言有了之前的两章,小伙伴们对按钮悬浮动画是否又有了新的认识呢?前面两章主要是从背景着手,而本章主要是围绕边框动画做效果。并且,本章节(按钮组:有趣的CSS按钮动画,带你进入CSS世界)也就到此结束了,本章结尾会对前3小节进行一定的总结。下面继续本小节的主题,请先看一下效果示例:看过前两小节的小伙伴,可能不需要看下面的源码,就知道如何实现了,大家可以先自己动手试试,然后再回头来看看。或许实现方式不一样,但只要能实现,都是好方法。下面对示例讲解示例一<buttonclass="btn-1">按钮
554685
3676
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
4年前
炫酷的CSS 作图web组件 - css-doodle
今天不写代码,就看看人家是如何写代码的。什么是css-doodle官方地址:https://css-doodle.com/<css-doodle/>是一个Web组件。其基于ShadowDOMV1和CustomElementsV1来构建的。该组件可以帮助轻松的使用CustomElements、ShadowDOM和CSSGrid创建任何你想要的图案(CSS图案)。创建出来的图案你可以运用于Web页面中。当你看到CustomElements、ShadowDOM和CSSGrid的时候,一定很担忧兼容问
548892
3401
0
下拉加载更多