Heim  >  Artikel  >  Web-Frontend  >  过渡_html/css_WEB-ITnose

过渡_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:22:38937Durchsuche

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style>  5 div 6 { 7 width:100px; 8 height:100px; 9 background:yellow;10 transition:width 2s;11 -moz-transition:width 2s; /* Firefox 4 */12 -webkit-transition:width 2s; /* Safari and Chrome */13 -o-transition:width 2s; /* Opera */14 }15 16 div:hover17 {18 width:300px;19 }20 </style>21 </head>22 <body>23 24 <div></div>25 26 <p>请把鼠标指针放到黄色的 div 元素上,来查看过渡效果。</p>27 28 <p><b>注释:</b>本例在 Internet Explorer 中无效。</p>29 30 </body>31 </html>

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style>  5 div 6 { 7 width:100px; 8 height:100px; 9 background:yellow;10 transition:width 2s, height 2s;11 -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */12 -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */13 -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */14 }15 16 div:hover17 {18 width:200px;19 height:200px;20 transform:rotate(180deg);21 -moz-transform:rotate(180deg); /* Firefox 4 */22 -webkit-transform:rotate(180deg); /* Safari and Chrome */23 -o-transform:rotate(180deg); /* Opera */24 }25 </style>26 </head>27 <body>28 29 <div>请把鼠标指针放到黄色的 div 元素上,来查看过渡效果。</div>30 31 <p><b>注释:</b>本例在 Internet Explorer 中无效。</p>32 33 </body>34 </html>

 

transition-timing-function

 

Stellungnahme:
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