Home > Article > Web Front-end > css3 transition to realize image zooming_html/css_WEB-ITnose
css3 transition to realize image zooming_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:361825browse
<!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="top: 10px;left: 50px;"/> <img src="../images/tags2.png" alt="" style="top: 10px;left: 200px;"/> <img src="../images/tags3.png" alt="" style="top: 10px;left: 350px;"/> <img src="../images/tags4.png" alt="" style="top: 150px;left: 50px;"/> <img src="../images/tags5.png" alt="" style="top: 150px;left: 200px;"/> <img src="../images/tags6.png" alt="" style="top: 150px;left: 350px;"/></div></body></html> Image size 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;
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn