css3

css3加载动画1

css3加载动画1
这是第一个纯css3的loading动画。这个demo的技巧在于先通过:before生成一个外围,这样就形成了两个圆圈,还是以前虚线框里面说的通过上下左右定位为-20px来扩大的外围的圆圈,这些都是静止的。正在运动的其实是一个空span标签设计出来的一个三角形,这里设置的颜色与背景色一直,所以看不出来,其实你可以设置为红色方便观察,就明白了。最后就是animation的运用了。

纯css3 lavalamp 菜单效果

纯css3 lavalamp 菜单效果

曾经我们对于jquery实现的lavalamp那是极度热爱啊,现在不用借助jquery,我们用纯css3实现了,过瘾啊。技术的关键在于在菜单的li最后先增加一个空元素来承载那个滑动的东西,再使用css3的兄弟元素选择器~,然后对于不同的li滑过的时候,设置承载滑动的那个元素的left位置。

纯css3有序列表

纯css3有序列表
这个前面的数字其实和ol的decimal是没有关系的。其实应用的是:before和counter-increment来生成的。而中间的那个空白的间隔其实是border。其余的一些就是圆角,动画什么的。了解了原理,实践操作下吧。

css3内部虚线框设计

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

css3标签设计

css3标签设计
设计了三种常用的文章标签,第一个是圆角效果比较简单,主要思路就是非等的对称的圆角;第二个主要应用了ribbon,使用:before生成;第三个就稍微麻烦点,三角加上一个小圆点,使用:before和:after生成,看来不错啊。

css3背景运动

css3背景运动
两个css3背景运动实例,一个是图片,一个是渐变。关键点就在于定义背景的位置,使之可以循环往复,注意衔接地方不要出现中断啊。这个对不支持的浏览器降级也可以很优雅,第一个就是背景的平铺,至于第二个也可以设置一个背景,或者直接设置一个border-top什么的都可以。

css3对话框设计

css3对话框设计
对话框气泡,总能在一些设计中给人一种清晰的感觉,在这里我们用css3技术来设计了几种对话框。 在第一个案例中,主要使用:before&:after创建两个三角形,一个和背景色一样,一个和边框色一样;在第二个案例中主要使用:before和rotate,利用旋转来达到我们需要的效果;第三个是一个倾斜的三角其实也有两种方法一个就是两个三角形叠加一个就是demo中的旋转了;第四种比较复杂,一两句说不完,还是自己看吧

页面

返回顶部