CSS3 Transitions 小试牛刀
经常写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知识可以看这里.
