方法一:图片在页面中以背景图的方式出现
html代码:
<div class="sf-panel"> <div class="sf-div"> <p>图片是背景图</p> </div> </div>
css代码:
.sf-panel{ overflow: hidden; width:100%; height:100%; .img{ width:100%; height:100%; background-size:100% 100%; transition: all 0.7s ease; &:hover{ background-size:105% 105%; transition: all 0.7s ease; } } }
鼠标放上去之后,图片在0.7s的时间内放大至原先的1.05倍,鼠标移出,图片恢复;
方法二:图片在页面中以元素存在,即img
html代码:
<div class="sf-panel"> <img src="xxx.png"/> </div>
css代码:
.sf-panel{ overflow: hidden; width:100%; height:100%; .img{ width:100%; height:100%; transform: scale(1.0,1.0); -ms-transform:scale(1.0,1.0); -moz-transform:scale(1.0,1.0); -webkit-transform:scale(1.0,1.0); -o-transform:scale(1.0,1.0); -webkit-transition: transform 0.7s ease; transition: transform 0.7s ease; &:hover{ transform: scale(1.05,1.05); -ms-transform:scale(1.05,1.05); -webkit-transform:scale(1.05,1.05); -o-transform:scale(1.05,1.05); -webkit-transition: transform 0.7s ease; transition: transform 0.7s ease; } } }
鼠标放上去之后,图片在0.7s的时间内放大至原先的1.05倍,鼠标移出,图片恢复;
日常记录