开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

基础概念

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

相关优势

易于维护：CSS将样式与HTML分离，便于管理和更新。
提高性能：CSS文件可以被浏览器缓存，减少重复加载。
灵活性：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%)，即去掉灰度效果，恢复彩色。

参考链接

通过这种方式，你可以轻松实现鼠标移上黑白图片变成彩色的特效，提升网页的交互性和视觉效果。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS 实现卡片以及鼠标移入特效

CSS 实现卡片以及鼠标移入特效 0、效果预览默认鼠标移入后在本篇博客中，我们将探讨如何使用 CSS 来实现卡片组件，并添加鼠标移入特效，使你的界面更具吸引力。...1、创建卡片组件首先，我们通过 Vue 的模板语法创建一个简单的卡片组件。在这里，我们使用了Element Plus的滚动条组件（el-scrollbar）来包裹我们的卡片。...border-radius: 10px; transition: box-shadow 0.3s ease 0s, border-color 0.3s ease 0s; // 鼠标悬停效果...卡片组件，并为其添加了鼠标移入特效。...这使得用户在浏览你的页面时能够获得更好的交互体验。

1081 0

CSS 3.0实现的悬停菜单特效

今天给大家分享一个用CSS 3.0实现的悬停菜单特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。 CSS...3.0实现的悬停菜单特效 * { font-family: '微软雅黑', sans-serif;

1.2K2 0

CSS 3.0实现酷炫的按钮特效

给大家分享一个用CSS 3.0实现酷炫按钮特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。 CSS...3.0实现酷炫的按钮特效 * { margin: 0; padding: 0;

1.8K2 0

CSS 3.0扭曲实现的滚动倾斜背景特效

今天给大家分享一个用CSS 3.0扭曲实现的滚动倾斜背景特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。 CSS...3.0扭曲实现的滚动倾斜背景特效 * { font-family: '微软雅黑', sans-serif;

1.4K1 0

纯CSS实现的圆角折叠菜单特效代码

CSS圆角折叠菜单 css"> #menu { font-size:12px; height:380px; margin... PHP CODE 网页特效

2.2K4 0

如何又好又快地把信息媒体变黑白

展开来讲就是你打开手机、电脑等设备浏览的图片、视频、音频、网页等等它们不是承载了一定信息嘛，从视觉的角度我们今天要做的事就是把彩色的图片、视频、网页搞成黑白颜色的。...一行代码搞定它直接公布答案吧，用css的filter属性下的grayscale可以实现楼上这些需求效果。...filter: grayscale(100%); 关于这个css的兼容问题请看下图实践一下网页这位网友你看，它是彩色的对吧，我们要做的事就是给它变黑白，这个示例本身没有什么意义，但是这种思考方式希望能够带给你好不好...图片你看，原先它是很鲜艳的，这个是我在大学设计的LOGO，当我们重复楼上的动作，它就变成黑白图片了你看它变成了黑白色，然后这边是一些浏览器兼容前缀的介绍我写在屏幕上了我有个想法，我打算把黑白图片截图接下来...都2023年了，你还在用IE啊，那你要不用人肉一个个改颜色吧，我没有什么别的好方法给到你 B.比如你拍出来一张彩色的照片，但是你想让它变黑白色，你可以这么试一下，当然你用手机相册自带的APP也可以 C.

2073 0

不可思议的纯 CSS 实现鼠标跟随效果

而鼠标跟随这种效果属于行为，要实现通常都需要借助 JS。当然，本文的重点，就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些鼠标跟随的行为动画效果。...原理以上面的 Demo 为例子，要使用 CSS 实现鼠标跟随，最重要的一点就是：如何实时监测到当前鼠标处于何处？ OK，其实很多 CSS 效果，都离不开障眼法二字。...CSS 实现鼠标跟随的效果就实现了，方便大家理解，看看下面这张图就明白了： ?...完整的DEMO，你可以戳这里看看：CodePen Demo -- CSS实现鼠标跟随存在的问题就上面的 Demo 来看，还是有很多瑕疵的，譬如精度太差只能控制元素运动到 div 所在空间，而不是精确的鼠标所在位置...但是我们还是可以使用上述介绍的方法实现鼠标跟随利用 CSS 滤镜 filter: blur() contrast() 模拟元素融合，具体可以看看这篇文章：你所不知道的 CSS 滤镜技巧与细节好，看看仅仅使用

4.6K1 0

如何又好又快地把信息媒体变黑白

图片展开来讲就是你打开手机、电脑等设备浏览的图片、视频、音频、网页等等它们不是承载了一定信息嘛，从视觉的角度我们今天要做的事就是把彩色的图片、视频、网页搞成黑白颜色的。...一行代码搞定它直接公布答案吧，用css的filter属性下的grayscale可以实现楼上这些需求效果。...filter: grayscale(100%);关于这个css的兼容问题请看下图图片实践一下网页这位网友你看，它是彩色的对吧，我们要做的事就是给它变黑白，这个示例本身没有什么意义，但是这种思考方式希望能够带给你好不好...图片图片你看，原先它是很鲜艳的，这个是我在大学设计的LOGO，当我们重复楼上的动作，它就变成黑白图片了图片你看它变成了黑白色，然后这边是一些浏览器兼容前缀的介绍我写在屏幕上了图片我有个想法，我打算把黑白图片截图接下来...都2023年了，你还在用IE啊，那你要不用人肉一个个改颜色吧，我没有什么别的好方法给到你B.比如你拍出来一张彩色的照片，但是你想让它变黑白色，你可以这么试一下，当然你用手机相册自带的APP也可以C.比如你把视频设成黑白色

3362 0

一个有趣的鼠标移上去的动画-整理

3 鼠标移上来试试 4 5 6...鼠标移上来试试 7 8 9 鼠标移上来试试 10 11 样式 1 .animate li{ 2 margin-right: 10px; 3 display...至于border-color 0s ease-out 0.4s这段，是在after的宽高刚好变完后，before的border瞬间变成彩色，然后同时起步的是宽度也开始变化。。。...剩下的套路都是上一句的了于是就看到before的border变了色，也就是边框的右边快速变成了蓝色。鼠标移除后的套路就是这个顺序再反过来回去，也就是延迟反过来，按照退出的顺序，一个比一个长点。

8746 0

添加鼠标滑过图片闪烁的js特效-jquery-opacity-rollover

添加鼠标滑过图片闪烁的js特效-jquery-opacity-rollover 作者：matrix 被围观: 1,771 次发布时间：2013-09-20 分类：Wordpress 兼容并蓄 |...onamae.com的25号免费域名没抢到，倒是看到onamae上的一个图片闪光特效好奇，这就扒了。...当鼠标移到图片上的瞬间，图片被蒙上一层白色的半透明层，并且这时白色的半透明层开始以300（代码第5行）毫秒的倒计时自行消失。...这里是class为post的 img标签加载特效，也就是文章内容的图片，鼠标移上去就会与闪烁的效果。当然这里的.post img也可以改为css中的id或者其他的class和标签等都可以的。...第5行中还有wink(300)，其中300指300毫秒，是单次闪烁的时间。也就是当鼠标移到图片上的瞬间，图片被蒙上一层白色的半透明层，并且白色的半透明层开始以300毫秒的倒计时自行消失。

2.5K3 0

用HTML和CSS实现酷炫的文字特效

前言马上我们就要进入下一个阶段，也就是HTML和CSS实现前端界面的阶段了，想必很多小伙伴都想给自己的页面加点酷炫的特效，今天，我就给大家整理了一些非常酷炫的文字特效来装点你的页面！...有些是从网络上找的，有些是自己写出来的相关属性介绍这里介绍一点写这些特效时需要用到的属性，（带-webkit- 开头的是只有Safari和Chrome等使用webkit或chromium内核的浏览器才可以使用...同时也可以写多个参数用逗号隔开来实现更强的效果（下方有多个效果都运用到了这个技巧） -webkit-background-clip 将背景按照设定的参数裁切，一般书写text（即按照文本的样式裁切，仅保留文本的部分...webkit-text-fill-color: transparent; /* -webkit-text-stroke: 1px #000000; */ } 渐变字体后记以上就是全部内容了，灵活运用css...的属性，就能创造出很多你想得到的和想都想不到的特效，甚至一些连写脚本都很难实现的特效，所以，努力探索css吧，冲冲冲！

3K1 1

酷炫的css之csshake----跳动的div

前言碎语今天要介绍的是一个叫做csshake的css样式库，项目托管在github上了，目前已收获两千多个星星了，这个css库能够提供丰富的可以让div以鼠标经过跳动、无限抖动、鼠标悬停跳动等多种...css样式，可玩性极强鼠标移上去先感受下 div> div> div> div> 更多特效

1932 0

纯CSS实现水波纹的电池充电动画特效

前置知识：要想完成这个特效，就必须要知道一些前置的属性，简单介绍一下吧： animation 、 transform 和 filter 这三个就不多做介绍了，基本上所有的动画都会用到这两个属性...可设置四个值，与 margin、padding 的使用方法一样也就是每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。...如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。...box-shadow: 0 14px 28px rgba(7, 93, 104, 0), 0 10px 10px rgba(31, 3, 68, 0.4); } } 水波纹特效...这个特效相信大家都见过，其思想就是在上面的大概位置上设置背景颜色，用相同的底色覆盖，然后用到 translate 这个属性，通过转化 x 、 y 值，然后通过不停的旋转角度，至于数值为啥是这个值，我也搞不清楚

4101 0

添加CSS3图片呼吸灯特效-鼠标悬浮还有放大效果

添加CSS3图片呼吸灯特效-鼠标悬浮还有放大效果作者：matrix 被围观: 4,949 次发布时间：2013-10-13 分类：Wordpress 零零星星 | 一条评论 » 这是一个创建于...测试是用于NGRO主题的首页文章列表上，配合起之前的窗口小列表不错~ 带8px白色边框鼠标停留后还有放大效果，如图： .Indexpost img { padding: 8px;...1.05); transform: scale(1.05); box-shadow: 0px 0px 18px rgba(0,0,0,.5); } 说明：这是笔者自己主题的css...6行.3s为放大过程的时间0.3秒 17行1.05为放大的值。其他的参数我也不清楚，不管谦虚还是其他的来说我很菜。我这原本首页样式是post的，改成.Indexpost样式也为了独立修改的方便。...如果你也感觉到此效果不错，不嫌弃的话可以参考我这的css代码。建议参考：图片呼吸灯，CSS3图片阴影+鼠标移上放大图片

1.3K2 0

《JavaScript DOM 编程艺术》小记

在HTML中的Script块中可以使用HTML注释，甚至可以不写结尾。如，以下代码都是可以正常运行的。...= func; } else { window.onload = function() { oldonload(); func(); } } } 6.实现一个...final_x+","+final_y+","+interval+")"; elem.movement = setTimeout(repeat,interval); } 9.使用JavaScript实现把指定图片设置为黑白图片...，鼠标经过时候图片变成彩色的效果： function convertToGS(img) { // 存储原始图片 img.color = img.src; // 存储黑白图片 img.grayscale...= createGSCanvas(img); // 鼠标经过和移除时候切换图片 img.onmouseover = function() { this.src = this.color

1211 0

Typecho主题Handsome修改记录---（持续更新）

本博文持续更新～有问题请在本博留言～美化记录本博一键美化插件展开看本博客效果～只要安装后就不需要手动修改了目前实现的功能 iframe视频文章嵌入优化 iframe视频短代码插入...响应耗时和访客总数（全站字数放弃，减少服务器压力）右侧边栏时光流逝模块顶部导航显示心知天气左侧目录彩色图标右侧彩色标签和彩色标签云鼠标经过头像旋转放大鼠标点击特效文章标题居中 LOGO扫光...展开开发者设置 ➡️ 自定义输出body 尾部的HTML代码 <!...) { start(); }, 500) } }else { start(); } })(); 鼠标点击特效...开发者设置->自定义尾部html中添加代码点击展开 /* 鼠标特效 */ var a_idx = 0; jQuery(document

1.2K2 0

使用CSS3 box-shadow实现的7个按钮悬停动画特效

2973 0

学习 canvas 的 globalCompositeOperation 做出的神奇效果

好的，下来实现一个水滴扩散的效果效果图 ?...实现思路在一个 canvas 上先画出黑白色的图片，然后设置背景是一张彩色的图片，鼠标点击时，设置 canvas 的 globalCompositeOperation 属性值为 destination-out...，根据鼠标在 canvas 中的坐标，用一个不规则的图形逐渐增大，来擦除掉黑白色的图片，就可以慢慢显示彩色的背景了。...也就是说我们需要三张图片黑白的图片 ? 彩色的图片 ? 不规则形状的图片 ? 代码的效果和水滴扩散的效果，在开始的时候几乎是一样的，不过水滴扩散效果，用的是一张不规则形状的图片来清除黑白图片，而刮刮卡效果，是通过画线的方式，线比较粗而已，来清除上面的灰色。

1.6K2 0

html——css基础

我们看一下天猫：这个手机二维码只有我们将光标移动上去的时候二维码才会显示，我们看一下它的代码：当我们把光标移上去的时候发现这个display: none不见了。这就是这个属性的作用了。...solid #bbbbbb; /*设置图片边框*/ display: none; /*设置图片不显示*/ } 到目前为止显示：看一下代码，其实图片已经存在，知识不显示：现在我们要完成鼠标移上去后再显示图片...，其实这里可以用js实现，但现在还没讲，所以我们用css的方式，为了达到效果，我们把上面代码里的div标签放到a标签里： lesson3.html <!...*/ a.des:hover div.qrcode{ display: block; } 鼠标不移上去：鼠标移上去以后：我们接着写一些样式，类似： lesson3.html <!...div.menu ul.items li{ height: 33px; background-color: #666; color: #fff; } /*当鼠标移上去以后文字背景变色

4K5 0

HTML第三课——css【3】

这个手机二维码只有我们将光标移动上去的时候二维码才会显示，我们看一下它的代码： ? 当我们把光标移上去的时候发现这个display: none不见了。这就是这个属性的作用了。...现在我们要完成鼠标移上去后再显示图片，其实这里可以用js实现，但现在还没讲，所以我们用css的方式，为了达到效果，我们把上面代码里的div标签放到a标签里： lesson3.html <!...*/ a.des:hover div.qrcode{ display: block; } 鼠标不移上去： ?...鼠标移上去以后： ? 我们接着写一些样式，类似： ? lesson3.html <!...div.menu ul.items li{ height: 33px; background-color: #666; color: #fff; } /*当鼠标移上去以后文字背景变色

1K12 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭