手把手教您学习CSS的渐变

原创已于 2024-04-20 16:05:57 修改 · 911 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2024-04-20 16:01:20 首次发布

前端开发专栏收录该内容

13 篇文章

订阅专栏

1.渐变背景

使用bacground-image属性实现渐变背景效果。

2.什么是渐变？

渐变是多个颜色逐渐变化的视觉效果。

一般用于设置盒子的背景。

3.书写格式

linear：表示是的线性
gradient：表示的是梯度
可以有多种颜色
bacfround-image:linear-gradient(颜色1,颜色2);

4.渐变体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
            background-image: linear-gradient(red,blue);
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

5.从透明渐变到半透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
            background-image: linear-gradient(transparent,rgba(0,0,0,0.5));
        }
    </style>
</head>
<body>
    <div class="box">
        实现从透明到半透明
    </div>
</body>
</html>

6.改变渐变的方向

书写格式

bacfround-image:linear-gradient(方向,颜色1,颜色2);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
            /*从左到右*/
            background-image: linear-gradient(to right,red,orange);
        }
    </style>
</head>
<body>
    <div class="box">
        改变渐变的位置
    </div>
</body>
</html>

to bottom从上到下
to right 从左到右
to left 从右到左
to top 从下到上
to right bottom往右下角
to right top到右上角
to left bottom左下角
to left top左上角

除了可以写具体的方位，还可以使用角度来控制渐变的方向。

如果是写0度那就是从下往上，90度就是从左往右了。默认的角度是108deg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
            background-image: linear-gradient(135deg,red,blue);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

7.使用渐变做一个案例

视频效果

渐变效果

在这里笔者就大概分析一下效果：

首先，必须要有三个盒子，大盒子用来装图片，第二个要有一个蒙层，盖在大盒子上面，用定位来实现，实现从透明到半透明的效果，第三个盒子装信息，使用定位把链接隐藏。笔者在代码中做了详细的说明。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .box {
            position: relative;
            /*这里设置宽高是和图片一样大的，主要是为了让图片不发生变形*/
            width: 1024px;
            height: 732px;
            border: 1px solid #050505;
            margin: 50px auto;
            overflow: hidden;
        }
		/*鼠标经过，下面的三个盒子发生改变*/
        .box:hover .info {
            bottom: 0;
        }

        .box:hover .message {
            background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
        }

        .box:hover img {
            transform: scale(1.1);
            transition: all .8s;
        }

        .message {
            /*使用定位把盒子盖在父盒子上面*/
            position: absolute;
            /* 设置和父盒子一样大 */
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        .info {
            /*使用定位把链接隐藏了*/
            position: absolute;
            bottom: -90px;
            left: 0;
            width: 100%;
            /* background-color: #ccc; */
            padding: 30px 50px;
            box-sizing: border-box;
            color: #fff;
            transition: all .8s;
        }

        .info p {
            margin-bottom: 15px;
        }

        .info h2 {
            margin-bottom: 80px;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="../R-C.jpg" alt="">
        <div class="message"></div>
        <div class="info">
            <p>大自然美景</p>
            <h2>去自己想去的地方，去看自己想看的风景</h2>
            <a href="javascript:;">了解更多<span>></span></a>
        </div>
    </div>
</body>

</html>

注意：此文章是笔者的学习笔记，因为笔者的能力有限，会出现很多的问题，如果您在浏览或者代码运行的时候发现了问题，还请您在第一时间在评论区留言，笔者看到后会在第一时间处理。