跳转到主要内容
w3cplus
Menu
CSS3
Mobile
Sass
JavaScript
视频教程
译文
SVG
工具
标签云
你在这里
首页
Image Effects
css3鼠标滑过动画
作者:
结一
日期:
2012-09-01
点击:
3133
css3
transition
rgba
Image Effects
提高篇
本实例共有五个鼠标滑过的动画效果,但其实原理都是差不多。第一个是多加了一个空白的标签,来显示那个遮罩的三角形;第二,三,四都是对却是用border来生成的遮罩,至于第五个效果就比较复杂,不过原理都是一样的,实际应用也不需要那么复杂。所以只需把前面四个简单的学会了,第五个就当做欣赏吧,扩大自己的视野,以后举一反三的机会多的是。说到底,transition的动画变换来变换去,都是那么几个属性,关键在于对基本属性的把握及对动画效果的设计,多看点效果积累点,以后也可以做到得心应手。
阅读全文
css3层次堆叠效果
作者:
结一
日期:
2012-08-31
点击:
1027
css3
transition
transform
:before&:after
Image Effects
入门级
这种实例其实在css3刚出的时候就比较风靡了,也算是入门级的很好实例吧,还是很值得去练练手的。它主要是对css3的:before和:after的应用,当然再加上一些rotate的旋转及box-shadow的阴影,最后配以:hover来达到动画的效果。由于webkit内核不支持:hover之后其他元素的动画效果(如:hover:before;:hover *;:hover + *),所以该实例用webkit内核浏览器来看,鼠标滑过直接就到生硬的最后状态,没有动画过程。
阅读全文
CSS filter effects in action
作者:
大漠
日期:
2012-07-10
点击:
529
css3选择器
filter
Image Effects
入门级
这个DEMO效果是使用了几个CSS3新特性制作的,其主要由CSS3的filter特性,但这种特性到目前为止仅有webkit内核的浏览器支持,另外使用了CSS3的选择器,伪类选择器中的:nth-child()和:not()选择器的支持。同时采用inline-block布局。换句简单的话说,这个demo中使用inline-block布局,使用CSS3的filter和伪类结构选择器制作的特效。希望对大家有所帮助
阅读全文
Search this site
关注我们
合作网站
JavaScript学习案例
墨鱼前端培训
HTML5梦工场
Sass入门指南
CSS解决方案
W3ctech
前端圈
Drupal中国
友情链接
广州微信开发
在线图片压缩
java源代码学习
墨鱼前端开发培训
猪八戒网
HTML5梦工场
PHP教程
程序员客栈
imweb 前端社区
前端笔记
返回顶部