方法一:圖片在頁面中以背景圖的方式出現css
html代碼:html
<div class="sf-panel"> <div class="sf-div"> <p>圖片是背景圖</p> </div> </div>
css代碼:web
.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倍,鼠標移出,圖片恢復;spa
方法二:圖片在頁面中以元素存在,即imgcode
html代碼:orm
<div class="sf-panel"> <img src="xxx.png"/> </div>
css代碼:htm
.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倍,鼠標移出,圖片恢復;blog
平常記錄圖片