通过css实现图片放大效果
css3当中有一个是过渡属性是transition,他要配和scale来使用,transition:scale(),这个括号里面填写数字,如果大于1,就是放大,如果小于1,就是缩小。
为了实现从一种效果变成一种效果,可以不用flash或者js,transition能够在鼠标单击,离开时,发生css属性值得改变,所以放大效果使用transition很不错!!!!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{width: 300px; height: 300px; border: deepskyblue solid 1px; border-radius: 150px;/*显示圆角边框*/margin: 50px auto; overflow: hidden; /*隐藏多余溢出部分*/ } div img{transition: all 0.6s; /*所有的属性在0.6秒之内完成改变*/cursor: pointer; /*s鼠标移上去,变成一个小手的图标,这样比较美观*/} div img:hover{transform: scale(1.6);/*这个是根据图片比例放大到图片的1.6倍*//*transform: scale(0.6);同理,这个缩小0.6倍*/ } </style> </head> <body> <div> <img width="300px" src="img/哆啦A梦.jpg" /> </div> </body> </html>
这是我第一次写的blog,希望对需要的人有所帮助,O(∩_∩)O哈哈~~~