css实现鼠标移上黑白图片变成彩色的特效

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。通过CSS，可以实现网页的布局和美化。

类型

CSS特效可以通过多种方式实现，包括：

伪类：如:hover、:active等。
动画：如@keyframes。
过渡：如transition。

应用场景

这种鼠标移上图片变色的特效常用于网站导航、按钮、图片展示等，以增强用户交互体验。

实现方法

以下是一个简单的示例，展示如何使用CSS实现鼠标移上黑白图片变成彩色的特效：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Hover Effect</title>
    <style>
        .image-container {
            position: relative;
            display: inline-block;
        }
        .image-container img {
            width: 300px;
            height: 200px;
            transition: filter 0.5s ease;
        }
        .image-container:hover img {
            filter: grayscale(0%);
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="path/to/your/image.jpg" alt="Black and White Image">
    </div>
</body>
</html>

解释

HTML结构：使用一个div容器包裹图片，方便应用CSS样式。
CSS样式：
- .image-container：设置容器为相对定位，并使用inline-block使其只占用必要的空间。
- .image-container img：设置图片的宽度和高度，并添加transition属性，使滤镜效果平滑过渡。
- .image-container:hover img：当鼠标移上容器时，图片的filter属性变为grayscale(0%)，即去掉灰度效果，恢复彩色。