首页用css3的实现鼠标经过图片旋转360度显示另一张图片

用css3的实现鼠标经过图片旋转360度显示另一张图片

时间: 2024-09-25 19:04:00 浏览: 52

要使用CSS3实现鼠标悬停时图片旋转360度并切换显示另一张图片，可以借助CSS的`transform`属性和`:hover`伪类。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { position: relative; } .image-container { width: 150px; height: 150px; display: inline-block; transition: transform 0.5s; /* 添加过渡效果，平滑变换 */ } .image-container img { width: 100%; height: auto; } .show-hover-image { transform: rotate(0deg); /* 初始状态，图像无旋转 */ } .show-hover-image:hover { transform: rotate(360deg); /* 鼠标悬停时，图像旋转360度 */ } .hidden-hover-image { transform: rotate(360deg); /* 非悬停状态下隐藏的图像初始旋转 */ } .show-hover-image:hover + .hidden-hover-image { opacity: 1; /* 当悬停时，显示隐藏图像 */ } </style> </head> <body> <div class="container"> <div class="image-container show-hover-image"> <img src="image1.jpg" alt="Image 1"> </div> <div class="image-container hidden-hover-image"> <img src="image2.jpg" alt="Image 2"> </div> </div> </body> </html> ``` 在这个例子中，我们有两个`.image-container`容器，每个都包含一张图片。当鼠标悬停在显示图像上时，它会旋转360度，并同时显示隐藏的图像。非悬停状态下，隐藏的图像一开始也是旋转360度，但其opacity设为0，所以不可见。

阅读全文