html中过渡效果,CSS3 transition 属性过渡效果 详解

CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡。我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变 CSS 的属性值。以下是 transition 属性的浏览器支持、语法和示例。

浏览器支持:

Internet Explorer 10 及以上版本、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。Internet Explorer 9 以及更早的版本不支持 transition 属性。Chrome 25 以及更早的版本,需要前缀 -webkit-。

语法:

transition 属性主要包含四个属性值:transition-property -- 规定应用过渡的 CSS 属性的名称;transition-duration -- 定义过渡效果花费的时间,默认是 0;transition-timing-function -- 规定过渡效果的时间曲线。默认是 "ease";transition-delay -- 规定过渡效果何时开始,默认是 0。transition -- 简写属性,用于在一个属性中设置四个过渡属性。如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开。

一、改变宽度属性

div.css3-transition-test1 {

transition-property: width;

transition-duration: 1s;

transition-timing-function: ease-in;

transition-delay: 0;

/* Firefox 4 */

-moz-transition-property: width;

-moz-transition-duration: 1s;

-moz-transition-timing-function: ease-in;

-moz-transition-delay: 0;

/* Safari and Chrome */

-webkit-transition-property: width;

-webkit-transition-duration: 1s;

-webkit-transition-timing-function: ease-in;

-webkit-transition-delay: 0;

/* Opera */

-o-transition-property: width;

-o-transition-duration: 1s;

-o-transition-timing-function: ease-in;

-o-transition-delay: 0;

}

div.css3-transition-test1 {

transition: width 1s ease-in;

-moz-transition: width 1s ease-in; /* Firefox 4 */

-webkit-transition: width 1s ease-in; /* Safari and Chrome */

-o-transition: width 1s ease-in; /* Opera */

}

二、改变多个属性

p.css3-transition-test2:hover {

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

}

以上是在网上找的例子:有点问题,我自己是这样写的

.yangsheng_guan_5_1{

opacity:0; /* 0 相当于隐藏*/

display:block;

transition:0.6s; /*过渡时间*/

-webkit-transition: .6s; /*老版本火狐 浏览器*/

-moz-transition: .6s; /* Firefox 4 */

-o-transition: .2s; /*Safari Chrome 浏览器*/

}

.yangsheng_guan_5:hover .yangsheng_guan_5_1{

opacity:1; /* 1 相当于显示*/

}

CSS3 transition 属性 过渡效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值