Heim > Web-Frontend > HTML-Tutorial > HTML前端开发之路--Transition_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:27:06
Original
1159 Leute haben es durchsucht

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

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

transition: background-color 1s linear;<br />
Nach dem Login kopieren

也可以分开来写,例如

transition-property: background-color;<br />transition-duration: 1s;<br />transition-timing-function: linear;
Nach dem Login kopieren

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

<!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>
Nach dem Login kopieren


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage