现代 CSS

css3

css3动画——垃圾桶

css3动画——垃圾桶
首先非常感谢丸子大师(http://i.wanz.im/)提供这个案例的DEMO源码。这是一个使用CSS3的transform和transition制作的一个动画效果,当鼠标处于悬停状态时,垃圾桶会打开,有一个小卡通被丢进垃圾桶。创意很有意思,实现很简单。如果丸子在花点时间将demo中的图片换成用css3写,就是一个纯CSS3的动画DEMO了,还有一个地方可以改变的,就是不用三个标签,使用CSS3的":before"和":after"来代替里面的子元素。这样就省去两个标签,有兴趣的同学可以尝试一下,在丸子的基础上进行修改,做成后,你会有一种成就感的。

CSS3制作日历备忘录

CSS3制作日历备忘录
在发这个案例前,首先非常感谢藤藤加入w3cplus,今天开始w3cplus又多了一员猛将,我们会继续为大家制作一些实际可用的CSS3案例,帮助喜欢CSS3的同学一起学习和成长。今天这个案例就是藤藤(本来是要用藤藤的名发布,但由于我们设置还出了问题,所以先放上来让大家看看效果吧)制作的,将两张psd图转换到一个CSS3案例中。在这个案例中主要使用了:CSS3渐变制作日期的头部渐变效果;使用box-shadow制作了多层纸张的效果。

css3复选框

css3复选框
本实例主要应用了checkbox的:checked状态来设置其同级后面的label元素的样式及:before&:after生成的内容。所以我们看到的样式其实不是checkbox的,而是其同级后面的label元素的。

css3圆环形旋转

css3圆环形旋转
本实例看起来有点像太极,其实更如一块环形的玉佩,设计比较好看。先设计一个圆形填充一个135deg的两个颜色的渐变,各位一半。然后设计三个子元素为上中下的小圆,一个为浅色的与渐变背景的浅色的一样,一个为黑色的充当中间的孔,一个为深色的与渐变背景的深色一样,为了表现更佳,给这三个小圆各自应用了box-shadow生成阴影。然后就是父元素的animate转动360deg。

CSS3 Share Button

CSS3 Share Button

首先非常感谢藤藤提供的代码,是她用CSS3写的一个分享按钮的效果,而且写得非常不错。结过她的同意,我稍加做了点点的修改,增加了ICON图标上去,让效果看上去更清晰一些。在这个效果中主要使用了:CSS3的伪类选择器(伪元素)、box-shadow和@font-face三个属性,结过颜色细腻的搭配,制作了这么一个完美的分享按钮。

CSS3 Loading Bar

CSS3 Loading Bar
CSS3制作一个类似于文件Loading的效果,在这里没有写动画效果,主要考虑文件加载对应的文本,css实现效果会有难度。在这个DEMO中主要运用了四个知识点:第一是google font api,用来制作特殊的英文字体效果;第二个是使用CSS的渐变,制作了渐变的面板效果;第三使用box-shadow,制作面板之类的描边效果;第四就是使用border-radius制作圆角效果。

CSS3制作凤凰网导航

CSS3制作凤凰网导航
今天在群讨论一个导航制作(凤凰网娱乐),看过同学发来的gif动画图,想将此图转画为CSS3导航,动手试了一下,还是可以实现的。在这个实例中中要运用了以下知识点:box-shadow,CSS制作图形,旋转,动画。感兴趣的同学可以来围观。

CSS3 Menu

CSS3 Nav Menu
导航是WEB页面中不可或缺的一部分,以前制作渐变、圆角类型的导航,都需要使用背景图片来制作,今天给大家介绍一个使用CSS3制作的导航效果,在这个实例中主要运用了CSS3的渐变和box-shadow。

css3时钟

css3 clock
本实例纯css3打造,因为没有获取当前时间,所以初始化时间为12点,打开即开始走动。圆盘使用border-radius做成,然后一个:before生成中间的圆点,一个:after生成倒影。至于三个指针就是关键了,其高度及宽度不等,绝对定位于中间的同一圆点,然后以这点为坐标旋转,旋转使用动画一样,只是旋转一周的持续时间不一样,秒针为60s,分针为3600s,时钟为84600s。

CSS3制作3D立体分页导航

CSS3制作3D立体分页导航
收集了很多DEMO和相关的PSD,于是想能不能通过自己学的CSS3相关技巧,将有关PSD图效果转换成CSS3效果。灵光的冲动,让我开始做起了这件事情,今天开始我会开始制作一些CSS3的DEMO效果,而这些DEMO效果都是由对应的PSD转换过来的,换句话说,如果你不考虑兼容IE低版本的话,这些DEMO你都可以使用。那我们开始吧

页面

返回顶部