首頁 > web前端 > html教學 > HTML前端开发之路--Transition_html/css_WEB-ITnose

HTML前端开发之路--Transition_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:27:06
原創
1152 人瀏覽過

Transition属性简介,transition属性有三个子属性, property,duration和time-function,property指的是变化的属性,duration指的是变化时间,time-function值得是过渡动画的形式;

transition的三个自属性可以一起卸载transition当中,例如

transition: background-color 1s linear;<br />
登入後複製

也可以分开来写,例如

transition-property: background-color;<br />transition-duration: 1s;<br />transition-timing-function: linear;
登入後複製

具体实现见以下代码示例:

<!DOCTYPE html><br /><html><br /><head lang="en"><br />    <meta charset="UTF-8"><br />    <title></title><br />    <style><br />        div{<br />            background-color: #5cafa5;<br />            padding: 10px;<br />            width: 100px;<br />            height: 100px;<br />            margin: 200px auto;<br />            color: black;<br />            text-align: center;<br />            /*transition: background-color 1s linear;*/<br />            /*transition-property: background-color;*/<br />            /*transition-duration: 1s;*/<br />            /*transition-timing-function: linear;*/<br /> transition:background-color 1s linear,<br />                        height 1s linear,<br />                        transform 1s linear,<br />                        color 1s linear,<br />                        width 1s linear;<br />        }<br />        div:hover{<br />            background-color: brown;<br />            transform: rotate(360deg);<br />            height: 200px;<br />            width: 200px;<br />            color: white;<br />        }<br />    </style><br /></head><br /><body><br /><!--transition:propertiy(属性)<br />dration(整个动画执行时间)<br />timing-function(过渡动画的形式)--><br /><div>实例文字</div><br /></body><br /></html>
登入後複製


來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板