Heim >Web-Frontend >HTML-Tutorial >css3 transition 实现图片放大缩小_html/css_WEB-ITnose
css3 transition 实现图片放大缩小_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:361882Durchsuche
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .img-content{width: 500px;height: 300px;margin: 0 auto;position: relative} .img-content img{ position: absolute; cursor: pointer; transition: transform 2s; -moz-transition: -moz-transform 2s; -webkit-transition: -webkit-transform 2s; -o-transition: -o-transform 2s; } .big{ z-index: 2; transform:scale(2,2); -ms-transform:scale(2,2); /* IE 9 */ -moz-transform:scale(2,2); /* Firefox */ -webkit-transform:scale(2,2); /* Safari and Chrome */ -o-transform:scale(2,2); /* Opera */ } .normal{ transform:scale(1,1); -ms-transform:scale(1,1); /* IE 9 */ -moz-transform:scale(1,1); /* Firefox */ -webkit-transform:scale(1,1); /* Safari and Chrome */ -o-transform:scale(1,1); /* Opera */ } </style> <script src="../jquery/jquery.min.js"></script> <script> $(function(){ $('.img-content img').off().on('mouseover',function(){ $(this).addClass('big').removeClass('normal') }).on('mouseout',function(){ $(this).addClass('normal').removeClass('big') }) }) </script></head><body><div class="img-content"> <img src="../images/tags1.png" alt="" style="max-width:90%"/> <img src="../images/tags2.png" alt="" style="max-width:90%"/> <img src="../images/tags3.png" alt="" style="max-width:90%"/> <img src="../images/tags4.png" alt="" style="max-width:90%"/> <img src="../images/tags5.png" alt="" style="max-width:90%"/> <img src="../images/tags6.png" alt="" style="max-width:90%"/></div></body></html> 图片大小 128 * 128
transition 定义过度效果，1、可同时设置几个css样式，2、可定义transform（2d 3d 转换）的过度效果
transition: width 2s, height 2s, transform 2s;-moz-transition: width 2s, height 2s, -moz-transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;-o-transition: width 2s, height 2s,-o-transform 2s;
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
Vorheriger Artikel：如何利用CSS设置文字的阴影效果_html/css_WEB-ITnoseNächster Artikel：background-color属性有没有继承性_html/css_WEB-ITnose