用css3 tranistions实现平滑过渡
副问题[/!--empirenews.page--]
Css tranistions应承元素的属性在单元时刻内产生滑腻的过渡,在阅读完《CSS Transitions Module Level 3》之后,我已经被其所吸引。尽量今朝只有chrome和safari赏识器支持该属性(不外今朝还得行使-webkit内核要害字作为前缀),但信托在不久的未来,各主流赏识器会全面支持该属性。 凡是环境下,当css属性产生改变时,元素会立即产生改变。Css transtions提供一种要领使得元素从原始状态滑腻的过渡到新的状态。只必要对元素界说要行使transition结果的属性(transition-property)、transition结果的过渡时刻(transition-duration)、transition结果的过渡方法(transition-timing-function)以及transition结果何时开始(transition-delay)。在具体相识这些属性之后,我作了一个简朴的测试(如下),虽说简朴,但总能鼓感民气。
我只是界说一个绝对居中的盒子,在鼠标滑过期将其放大,在chrome中我们会看到滑腻的过渡结果。Css法则如下: Copy to Clipboard![]() opacity:0.2; position:absolute; left:-65px; top:-65px; left:50%; top:50%; border:1px solid #000; background-color:#f00; padding:30px; width:100px; height:100px; -webkit-transition-property:opacity,width,height,margin-left,margin-top,padding,border-width; -webkit-transition-duration:1s; -webkit-transition-timing-function:ease-in-out; } .transition:hover{ width:300px;height:300px;border-width:3px;margin-top:-195px;margin-left:-195px;opacity:1;padding:90px; } 在-webkit-transition-property界说了行使过渡结果的属性,-webkit-transition-duration界说过渡一连的时刻,这里我界说的1s。W3c的法则中声名,当把-webkit-transition-duration的属性值界说为0时,将不会呈现滑腻的过渡。-webkit-transition-timing-function界说了过渡的方法,这里是ease-in-out,关于其余方法,可以参看文档声名。有了这样一个属性之后,用户可以获得精采的体验,我们也不须要在为实现这样的滑腻的结果而去写大量的js。下面我构建一个Image gallery,来看看该属性所带来的用户体验。 ![]() .imageGallery li img{ width:200px; height:136px; border:1px solid #000; position:relative; z-index:1000; -webkit-transition-property:width,height,margin-left,margin-top,border,left,top,z-index; -webkit-transition-duration:1s; -webkit-transition-timing-function:ease-in-out; .} .imageGallery li a:hover{_background-color:#fff;_z-index:5000;_position:relative;} .imageGallery li a:hover img{ border:2px solid #000; width:600px; height:408px; margin-left:-301px; margin-top:-255px; left:50%; top:50%; z-index:5000; } 在-webkit-transition-property界说了行使过渡结果的属性,-webkit-transition-duration界说过渡一连的时刻,这里我界说的1s。W3c的法则中声名,当把-webkit-transition-duration的属性值界说为0时,将不会呈现滑腻的过渡。-webkit-transition-timing-function界说了过渡的方法,这里是ease-in-out,关于其余方法,可以参看文档声名。有了这样一个属性之后,用户可以获得精采的体验,我们也不须要在为实现这样的滑腻的结果而去写大量的js。下面我构建一个Image gallery,来看看该属性所带来的用户体验。 ![]() .imageGallery li img{ width:200px; height:136px; border:1px solid #000; position:relative; z-index:1000; -webkit-transition-property:width,height,margin-left,margin-top,border,left,top,z-index; -webkit-transition-duration:1s; -webkit-transition-timing-function:ease-in-out; } .imageGallery li a:hover{_background-color:#fff;_z-index:5000;_position:relative;} .imageGallery li a:hover img{ border:2px solid #000; width:600px; height:408px; margin-left:-301px; margin-top:-255px; left:50%; top:50%; z-index:5000; } (编辑:河北网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |