前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

前端集合 RSS订阅
Home » 前端集合 » CSS3 Transitions 小试牛刀

CSS3 Transitions 小试牛刀

发布者:前端集合 // 发布时间:2011-08-05 09:55:00 // 分类:前端集合 // 访问: 3,497 次 // 热度:

浏览Demo查看实际效果

经常写CSS的朋友知道,:hover是我们经常要打交道的,比如鼠标hover变个色神马的.

今天我们学习一下CSS3中的一些类似用法,效果很不错的哦.

1. CSS3 transitions在链接中的妙用

首先看代码

a, a:link, a:visited { 

color:#4a4a4a; 

    -webkit-transition: color .4s linear; 

    -moz-transition: color .4s linear; 

    -o-transition: color .4s linear; 

    -ms-transition: color .4s linear; 

    transition: color .4s linear; 

a:hover { 

color: #E06C1F; 

说明一下:

(1). webkit是针对Chrome和Safari的, Moz是针对Firefox的, o是针对opera的, ms是针对IE 10的. 对, 没错, 就是IE10, IE10 一下版本暂时不支持CSS3 Transitions;

(2). color是transitions的属性, 即transition-property, 它还可以是width等,

.4s是transitions持续的时间, 默认是0,

linear是transitions的类型, 它还可以是ease | ease-in | ease-out | ease-in-out等

2. CSS3 transitions在输入文本框中的妙用

首先看代码

input, textarea { 

width: 280px; 

    -webkit-transition: width 1s ease; 

    -moz-transition: width 1s ease; 

    -o-transition: width 1s ease; 

    -ms-transition: width 1s ease; 

    transition: width 1s ease; 

input:focus, textarea:focus { 

width: 340px; 

代码意思就不解释了, 和上面类似. 更多有关CSS3 transition知识可以看这里.

浏览Demo查看实际效果

Tags: CSS, css3, CSS3 Transitions

Mozilla建议的CSS书写顺序>>  << 豆瓣FM: 挖掘好音乐
Top