现代 CSS

transition

css3动画——垃圾桶

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

css3 3D旋转正方体

作者：结一 日期：2012-09-11 点击：3969
css3
3D
preserve-3d
transition
animation
提高篇
css3 3D旋转正方体
再来一个3D的案例，本实例自谷歌，技术自然不用说了，那是一级棒。个人能力有限，我就挑简单的分析下呵呵。说下这个正方体的实现吧，先设置父级元素的transform-style:preserve-3d，然后定义各个面的宽高及绝对定位并设置scale3D为1.2倍，最后就是把各个面分别运用rotateX，rotateY，再运用translateZ拉开距离。至于旋转的运动则是设置父元素的animation从0到360deg的旋转。既然是google的案例，那肯定不支持火狐啊，不过只要换个前缀火狐也不是问题吧。
阅读全文

css3树形导航

作者：结一 日期：2012-09-10 点击：1546
css3
Menu/Navigation
:target
gradient
transition
入门级
css3树形导航
本实例主要是比较好看哈哈，然后使用了css3初级学习者一般不理解的:target这个伪元素，所以收纳。运用的css3有gradient生成渐变背景，:before生成前面的图标及二级菜单的箭头，:target来实现折叠效果，同时还应用了个transition来改变opacity的动画。当然这个案例其实左边的小图标还可以用font-face来制作，那样就更好了。
阅读全文

css3 icon导航

作者：结一 日期：2012-09-09 点击：513
css3
transition
font-face
Buttons/Icons
入门级
css3 icon导航
本实例主要应用了border-radius，transition，font-face。先设置一个宽度并设置overflow为hidden，然后鼠标滑过用transition来改变其宽度，以显示文字信息部分。至于三个icon，前面两个为font-face做的，后面一个为图片。
阅读全文

css3 download按钮设计

作者：大漠 日期：2012-09-09 点击：177
css3
Buttons/Icons
gradient
transition
提高篇
css3 download按钮设计
本实例主要应用gradient，然后使用box-shadow和border-raidus生成一个看起来很酷的按钮。然后download文字和版本文字分为两层，download文字层的z-index大于版本文字的z-index，鼠标滑过的时候改变download文字的宽度，露出下面的版本文字层。
阅读全文

纯css3列表切换动画

作者：结一 日期：2012-09-05 点击：2701
css3
transition
:checked
box-shadow
提高篇
纯css3列表切换动画
本实例的思路和之前说的用radio来控制手风琴效果有异曲同工之效。主要应用radio单选按钮来确认状态，然后对这个状态下的兄弟元素进行css控制。当然这里不比手风琴有几个radio就有几个内容，这里是一个内容，所以所有的radio应该和这个内容是兄弟元素，以便使用兄弟元素选择器~。然后对各个状态下的内容进行css控制，或显示或隐藏或浮动等。
阅读全文

css3鼠标滑过动画

作者：结一 日期：2012-09-01 点击：4454
css3
transition
rgba
Image Effects
提高篇
css3鼠标滑过动画
本实例共有五个鼠标滑过的动画效果，但其实原理都是差不多。第一个是多加了一个空白的标签，来显示那个遮罩的三角形；第二，三，四都是对却是用border来生成的遮罩，至于第五个效果就比较复杂，不过原理都是一样的，实际应用也不需要那么复杂。所以只需把前面四个简单的学会了，第五个就当做欣赏吧，扩大自己的视野，以后举一反三的机会多的是。说到底，transition的动画变换来变换去，都是那么几个属性，关键在于对基本属性的把握及对动画效果的设计，多看点效果积累点，以后也可以做到得心应手。
阅读全文

css3层次堆叠效果

作者：结一 日期：2012-08-31 点击：2836
css3
transition
transform
:before&:after
Image Effects
入门级
css3层次堆叠效果
这种实例其实在css3刚出的时候就比较风靡了，也算是入门级的很好实例吧，还是很值得去练练手的。它主要是对css3的:before和:after的应用，当然再加上一些rotate的旋转及box-shadow的阴影，最后配以:hover来达到动画的效果。由于webkit内核不支持:hover之后其他元素的动画效果（如:hover:before；:hover *；:hover + *），所以该实例用webkit内核浏览器来看，鼠标滑过直接就到生硬的最后状态，没有动画过程。
阅读全文

纯css3手风琴效果3

作者：结一 日期：2012-08-29 点击：585
css3
Accordion
:target
transition
入门级
纯css3手风琴效果3
本实例主要是对css3的:target这个选择器的应用，通过:target这个状态来改变需要改变的元素。主要就是在设计html结构的时候得想一下，各个点击的href值对应各自要展开内容的id值。最有可能迷惑的就是:target这个选择器的运用，刚接触的时候还是有些晕的，多看看理解理解就好了。
阅读全文

纯css3手风琴效果1

作者：结一 日期：2012-08-29 点击：781
css3
Accordion
:checked
transition
提高篇
纯css3手风琴效果1
本实例通过对radio按钮的状态判断来实现折叠效果。主要应用的是兄弟元素选择器~，注意这个兄弟元素选择器只选择后面的兄弟元素，对于同级的前面的兄弟元素css3还没有响应的选择器。然后综合应用:before和transition来实现前面图标的切换及高度的伸展动画。这个高度的伸展变化必须设置一个具体的值，如为auto则没有transition动画效果，只是切换而已。
阅读全文

页面

返回顶部