[CSS] Scale on Hover with Transition
生活随笔
收集整理的這篇文章主要介紹了
[CSS] Scale on Hover with Transition
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果
?
源碼
<!doctype html><html class="outline color"><head><meta charset="utf-8"><title>圖片scale動畫</title><style>.img-box {position: relative;width: 740px;height: 420px;overflow: hidden;}/* 彩色圖片縮放動畫 */.img-box>.image-scale {position: absolute;width: 900px;height: 580px;top: -80px;left: -80px;background-size: cover;transition: all 0.5s ease-in-out;}.img-box:hover>.image-scale {transform: scale(0.822);}</style></head><body><div class="img-box"><div class="image-scale" style="background-image: url(./images/1.jpg);"></div></div></body></html>img-box: 裝圖片的盒子,確保子元素超出部分隱藏起來.
image-scale: 絕對定位,并手動設置圖片居中.
?
素材
?
總結
以上是生活随笔為你收集整理的[CSS] Scale on Hover with Transition的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 谈谈一些有趣的CSS题目（十五）-- 谈
- 下一篇： CSS3 Transform、Trans