现代 CSS

transform

css3加载动画1

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

纯css3有序列表

作者：结一 日期：2012-08-23 点击：1104
css3
ul/ol
:before&:after
transform
transition
提高篇
纯css3有序列表
这个前面的数字其实和ol的decimal是没有关系的。其实应用的是:before和counter-increment来生成的。而中间的那个空白的间隔其实是border。其余的一些就是圆角，动画什么的。了解了原理，实践操作下吧。
阅读全文

css3对话框设计

作者：结一 日期：2012-08-20 点击：2605
bubbles
css3
:before&:after
transform
入门级
css3对话框设计
对话框气泡，总能在一些设计中给人一种清晰的感觉，在这里我们用css3技术来设计了几种对话框。 在第一个案例中，主要使用:before&:after创建两个三角形，一个和背景色一样，一个和边框色一样；在第二个案例中主要使用:before和rotate，利用旋转来达到我们需要的效果；第三个是一个倾斜的三角其实也有两种方法一个就是两个三角形叠加一个就是demo中的旋转了；第四种比较复杂，一两句说不完，还是自己看吧
阅读全文

页面

返回顶部