现代 CSS

css3 slideup box

作者：结一 日期：2012-08-27 点击：972
css3
transition
transform
入门级
css3 slideup box
本实例主要是对css3的transition属性的应用，同时应用了rotate旋转和nth-child子元素选择器。原理是先设置容器为一定的高度并overflow为hidden，然后标题的高度为整个高度且opacity为1，而内容为一定的rotate角度且opacity为0。当鼠标滑过的时候标题margin为负的容器高度，opacity为0，而内容的rotate为0，opacity为1。当然最关键的是我们的transition的应用，把这些变化动画化。而内容的背景图片就充分应用了nth-child子元素选择器。
阅读全文

css3进度条动画

作者：结一 日期：2012-08-23 点击：1908
css3
progress bar
animation
gradient
入门级
css3进度条动画
这个进度条是应用css3的渐变背景做出来的，然后应用background-size属性设置大小，然后以这个size为单位平铺。分析的时候你可以先禁用animation这个动画，然后可以用firebug设置background-repeat:no-repeat;来查看它一个单元的渐变背景。得到非动画的原理，我们再来研究动画部分，背景图片的运动，当然是用background-position了。
阅读全文

css3加载动画1

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

纯css3 lavalamp 菜单效果

作者：结一 日期：2012-08-23 点击：966
css3
Menu/Navigation
transition
提高篇
纯css3 lavalamp 菜单效果

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

阅读全文

纯css3有序列表

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

css3内部虚线框设计

作者：结一 日期：2012-08-23 点击：3122
css3
dashed
outline
box-shadow
:before&:after
入门级
css3内部虚线框设计
第一个使用的是border为虚线，再加上box-shadow来模拟外面的框；第二个使用的:before方法生成一个虚线框，这里注意的是生成的内容定位上下左右各为3px，确定了这个生成内容的大小,另外需要注意的是注意before内容的层级，小心覆盖了你里面的内容，你可以设置background为一个颜色，就知道层级了；第三个是使用的是border和outline方法。outline不支持单边设置，也不支持圆角，所以比起border来outline很是不足啊。
阅读全文

css3标签设计

作者：结一 日期：2012-08-22 点击：564
css3
tags
:before&:after
入门级
css3标签设计
设计了三种常用的文章标签，第一个是圆角效果比较简单，主要思路就是非等的对称的圆角；第二个主要应用了ribbon，使用:before生成；第三个就稍微麻烦点，三角加上一个小圆点，使用:before和:after生成，看来不错啊。
阅读全文

css3背景运动

作者：结一 日期：2012-08-21 点击：1664
css3
background
bgmove
gradient
animation
入门级
css3背景运动
两个css3背景运动实例，一个是图片，一个是渐变。关键点就在于定义背景的位置，使之可以循环往复，注意衔接地方不要出现中断啊。这个对不支持的浏览器降级也可以很优雅，第一个就是背景的平铺，至于第二个也可以设置一个背景，或者直接设置一个border-top什么的都可以。
阅读全文

css3对话框设计

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

页面

返回顶部