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
立即学习“前端免费学习笔记（深入）”；
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
581
收藏
取消收藏
