當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

hover时候缓慢切换两张图片

發布時間：2023/12/31 编程问答 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 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时候缓慢切换两张图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。