hover时候缓慢切换两张图片
生活随笔
收集整理的這篇文章主要介紹了
hover时候缓慢切换两张图片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果：
hover的時候想讓兩張圖片翻轉的時候速度慢一點，而不是瞬間變成另一張圖片，我們可以采用淡入淡出的效果。
實例：
<!DOCTYPE html> <html><head><style>#hover {position: relative;margin: 0 auto;}#hover img {position: absolute;left: 0;-webkit-transition: opacity 2s ease-in-out;-moz-transition: opacity 2s ease-in-out;-o-transition: opacity 2s ease-in-out;transition: opacity 2s ease-in-out;}#hover img.top:hover {opacity: 0;}img {width: 200px;height: 200px;object-fit: contain;}</style> </head><body><div id="hover"><img class="bottom"src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589358848975&di=a0be55c3e691b2cd83afb9b665b5f8a6&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201610%2F27%2F20161027232236_z2QBA.jpeg"><img class="top"src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589358848975&di=9007477ddcdcadca25c2b0da2bea293e&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F16%2F20150916122607_Jvk5U.jpeg"></div> </body></html>
總結
以上是生活随笔為你收集整理的hover时候缓慢切换两张图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 诧异的意思是什么
- 下一篇： led广告宣传词233个