Maison >interface Web >tutoriel HTML >HTML前端开发之路--Transition_html/css_WEB-ITnose
HTML前端开发之路--Transition_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:27:061153parcourir
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> Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Fluent HTML Tag Builder_html/css_WEB-ITnoseArticle suivant：网页入门_html/css_WEB-ITnose