太原做网站

网站维护托管

css3过渡属性transition

css3与之前的css最大的一个区别就是:创建很多新的css属性来完成以前只有javascript才能完成或不能完成的动画,比如我们今天说的这个transition过渡属性,我的这个博客中就有应用。在web前端开发栏目中,有三个二级栏目,分别是html5、css3和javascript,鼠标滑过其中一个的时候,他会以Z轴为中心旋转360度,但是旋转的时候并不是在瞬间发生的,整个过程用了1s的时间,这个时间就是在transition过渡属性中进行设置。


transiton主要有以下几个属性:


transition-property /*规定设置过渡效果的 CSS 属性的名称。*/

transition-duration /*规定完成过渡效果需要多少秒或毫秒。*/

transition-timing-function /*规定速度效果的速度曲线。*/

transition-delay /*定义过渡效果何时开始。*/

比如下面这个效果:原来的div是宽高都是100px,并且背景是红色,鼠标滑过之后,变成宽1000px,高100px,背景还是红色。


<style type="text/css">

*{margin:0px;padding:0px}

.box{

width:100px;

height:100px;

background:red;

transition-duration:5s;

-webkit-transition-duration:5s;

-moz-transition-duration:5s;

-o-transition-duration:5s;

transition-delay:2s;

-webkit-transition-delay:2s;

-moz-transition-delay:2s;

-o-transition-delay:2s;

transition-timing-function:linear;

-webkit-transition-timing-function:linear;

-moz-transition-timing-function:linear;

-o-transition-timing-function:linear

}

.box:hover{width:1000px}

</style>

<div class="box"></div>

目前各个版本的旧浏览器还不能完全支持所有的css3属性,所以需要写上向下兼容的代码!


发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

«   2020年10月   »
1234
567891011
12131415161718
19202122232425
262728293031
网站分类
搜索
最新留言
    文章归档
    友情链接