|
通过css实现图片放大效果
css3当中有一个是过渡属性是transition，他要配和scale来使用，transition:scale(),这个括号里面填写数字，如果大于1，就是放大，如果小于1，就是缩小。 为了实现从一种效果变成一种效果，可以不用flash或者js，transition能够在鼠标单击，离开时，发生css属性值得改变，所以放大效果使用transition很不错！！！！
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倍*/
}
这是我第一次写的blog，希望对需要的人有所帮助，O(∩_∩)O哈哈~~~
|