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你都可以使用。那我们开始吧

纯css3列表切换动画

纯css3列表切换动画
本实例的思路和之前说的用radio来控制手风琴效果有异曲同工之效。主要应用radio单选按钮来确认状态,然后对这个状态下的兄弟元素进行css控制。当然这里不比手风琴有几个radio就有几个内容,这里是一个内容,所以所有的radio应该和这个内容是兄弟元素,以便使用兄弟元素选择器~。然后对各个状态下的内容进行css控制,或显示或隐藏或浮动等。

css3选项卡标题样式设计3

css3选项卡标题样式设计3
这是第三个tabs的标题设计了,这次应用的又跟上两个不是一样的技术。这里用了:after来生成了,然后对生成的内容水平方向上扭曲skewX来达到斜切的效果。当然li的margin距离要刚好等于生成a:after生成内容的宽度。然后就是注意box-shadow了。注意火狐14.0更新后,skew得写成skewX或skewY分别表示水平方向和竖直方向偏移,这里它的demo用的是skew,所以火狐下并没有斜切的效果,我们可以firebug手动添加。

css3选项卡标题样式设计2

css3选项卡标题样式设计2
本实例的tabs斜角效果跟border没有一毛钱关系了,呵呵也跟:before和:after没有关系,却是运用了渐变背景制作的。给了一个角度的渐变,由transparent到红色的220度渐变。然后设置了一个box-shadow的左右偏移为负,使右侧看起来颜色比较深。

CSS3 Full Background Slider

CSS3 Full Background Slider
今天在365psd上看到一个psd效果,很有意思,想着能不能转成web页面,这问题想得太SB了,然后接着想,转成带有css3的动画效果。那转成什么呢?思来想去做了一个全屏背景图的幻灯片效果。虽然是一个简单的demo,但里面集合了CSS3众多属性,从伪结构选择器,到圆角,阴影以及动画等。

纯css3手风琴效果2

纯css3手风琴效果2
这三个案例实际上就是用了两种技术,一个是radio来控制,一个是checkbox来控制,用radio表示只有一个可以展开(radio的只有一个是选中状态),而checkbox则表示可以同时展开多个(checkbox可以多个选中)。其实道理都是一样的,对radio或者checkbox的选中状态进行判断,然后决定其下面的兄弟元素的高度。

css3加载动画2

css3加载动画2
其实分析每个css3的案例动画,首先做的应该是先把动画停下来,了解下初始是怎么样的。如这个我们一开始看到这么绚的动画加载效果,一般都认为比较难,但是先把animation这个属性通过firebug禁用后,发现原来原理并不是很复杂,只是运用了border,border-radius和box-shadow,然后给就是rotate的animation。第二个和第一个原理一样,只是设置的border-color四个值不一样罢了。而第三个则是使用不同的延迟时间引发scale的动画。至于暂停按钮则是通过js来添加stop这个class,stop则设置了animation-play-state:paused;

css3内部虚线框设计

css3内部虚线框设计
第一个使用的是border为虚线,再加上box-shadow来模拟外面的框;第二个使用的:before方法生成一个虚线框,这里注意的是生成的内容定位上下左右各为3px,确定了这个生成内容的大小,另外需要注意的是注意before内容的层级,小心覆盖了你里面的内容,你可以设置background为一个颜色,就知道层级了;第三个是使用的是border和outline方法。outline不支持单边设置,也不支持圆角,所以比起border来outline很是不足啊。

页面

返回顶部