web前端开发

您现在的位置是:首页>前端开发

CSS

如何使用CSS创建灰度效果?

admin:杨小二时间:2020-07-09 19:04:29前端开发0次
灰度是一种提供从彩色图像到黑白图像或反之亦然的过渡效果的效果。该效果可以应用于各种事件,例如鼠标悬停,也可以使用按钮激活该效果。

方法:我们将使用内置的CSS函数Grayscale()来创建此效果。

示例1:首先让我们看一下彩色图像到单色图像的过渡。为此,我们将在悬停选择器中使用grayscale()函数。我们只是将鼠标悬停时将灰度值设置为100%。

灰度是一种提供从彩色图像到黑白图像或反之亦然的过渡效果的效果。该效果可以应用于各种事件,例如鼠标悬停,也可以使用按钮激活该效果。

方法:我们将使用内置的CSS函数Grayscale()来创建此效果。

示例1:

首先让我们看一下彩色图像到单色图像的过渡。为此,我们将在悬停选择器中使用grayscale()函数。我们只是将鼠标悬停时将灰度值设置为100%。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content=

        "width=device-width, initial-scale=1.0">

    <title>Gray Scale Effect</title>

    <style>

        body{

            background: grey;

        }

        img{

            position: absolute;

            top:40%;

            left:50%;        

            transition:.5s ease-in-out;

        } 

        img:hover{     

            filter:grayscale(100%);

        }

    </style>

</head>

<body>

    <img src=

"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">

</body>

</html>

输出:

示例2:

现在要进行从单色到彩色图像的转换,我们将执行示例1的相反过程。我们将对<img>标签使用100%的grayscale()函数,然后在鼠标上将其减小为0% -徘徊。

 

<!DOCTYPE html>

<html lang="en">

<head>

     <meta charset="UTF-8">

     <meta name="viewport" content=

        "width=device-width, initial-scale=1.0">

     <title>Gray Scale Effect</title>

    <style>

        body{

            background: grey;

        }

        img{

            position: absolute;

            top:40%;

            left:50%;

            filter:grayscale(100%);

            transition:.5s ease-in-out;

        }

        img:hover{

            filter:grayscale(0%);

        }

    </style>

</head>

<body>

    <img src=

"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">

</body>

</html>

输出:

平面设计