Rumah > hujung hadapan web > html tutorial > 过渡_html/css_WEB-ITnose

过渡_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:22:38
asal
972 orang telah melayarinya

 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>
Salin selepas log masuk

 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>
Salin selepas log masuk

 

transition-timing-function

 

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan