鼠标点击渐变效果不透明度变化

最新推荐文章于 2024-07-12 20:49:16 发布

高高飞2023

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量76

点赞数

分类专栏： HTML 文章标签： css css3 html5

本文链接：https://blog.csdn.net/L13554358354/article/details/133266109

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

效果实现

鼠标划过图片，出现一个从上到下的渐变图案，而且带不透明度的变化。

代码实现

方法1：backround-image，linear-gradient，opacity，transition

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变</title>
    <style>
        div {
            width: 768px;
            height: 542px;
            background-image: url(./img/product.jpeg);
            
        }
        div div{
            background-image: linear-gradient(rgba(157, 157, 157, 0),rgb(72, 72, 72));
            opacity: 0;
            transition:all 2s;
        }
        div:hover div{
            opacity: 1;
        } 
    </style>
</head>
<body>
    <div>
        <div></div>
    </div>
</body>
</html>

方法二：使用img，position：absolute，left，top

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div {
            width: 768px;
            height: 542px;
        }
        div div{
            position:absolute;
            left: 0;
            top: 0;
            background-image: linear-gradient(rgba(157, 157, 157, 0),rgb(72, 72, 72));
            opacity: 0;
            transition:all 2s;
        }
        div:hover div{
            opacity: 1;
        } 
    </style>
</head>
<body>
    <div>
        <img src="./img/product.jpeg" alt="">
        <div></div>
    </div>
</body>
</html>

方法三：使用伪元素编写，div：hover：：after，position，content，transition，

这里伪元素点击上去过渡效果需要先写点击，后写伪元素，也就是div：hover：：after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            position: relative;
            width: 768px;
            height: 542px;
            background-image:url(./img/product.jpeg);
        }
        div::after{
            content: '';
            position:absolute;
            height: 542px;
            width: 768px;
            left: 0;
            top: 0;
            //--利用渐变对背景做处理
            background-image: linear-gradient(rgba(157, 157, 157, 0),rgb(72, 72, 72));
            opacity: 1;
            transition:all 2s;
        }
        div:hover::after{
            opacity: 0;
        } 
    </style>
</head>
<body>
    <div>111
    </div>
</body>
</html>