渐变与过渡

最新推荐文章于 2024-05-03 00:15:06 发布

小呆狸

最新推荐文章于 2024-05-03 00:15:06 发布

阅读量146

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_44416290/article/details/119221257

版权

线性渐变:方向默认从上到下

语法:

background:

linear-gradient(2~多个颜色，颜色中间用逗号分隔);

linear-gradient(to 方向[1到2两个],2~多个颜色，颜色中间用逗号分隔)

linear-gradient(度数deg,2~多个颜色，颜色中间用逗号分隔)

加浏览器内核

方向:方向没有to 直接跟的方位【两个方向的时候浏览器加内核的识别标准跟同一标准不一样】

度数:从右边开始逆时针的方向进行

径向渐变:

向四周扩散的渐变，默认为椭圆状

语法:background/background-image:radial-gradient(2至多个颜色)

在颜色后面添加百分比【从小到大顺序】;

形状,颜色

-webkit-radial-gradient(方位,颜色)

方位，形状，颜色

重复渐变:repeating[颜色必须跟百分比，否则无法形成重复渐变的效果

过渡属性

语法 transition:要过渡的属性（默认的是all）；花费的时间（必须加s）；运动的曲线（默认的是ease，可以设置为linear、ease-in等属性），开始的等待时间

过渡属性的用法，谁要过渡给谁加，多个要加时用逗号隔开就好

案例代码

<!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>
        div {
            height: 280px;
            width: 380px;
            margin: 100px auto;
            background: url(imges/box_img2.png) no-repeat;
            position: relative;
            overflow: hidden;
        }

        .one {
            position: absolute;
            top: 100px;
            left: -80px;
            transition: 2s;
        }

        .two {
            position: absolute;
            top: 120px;
            left: 400px;
            transition: 2s;
        }

        p {
            height: 50px;
            font-size: 30px;
            font-weight: 700;
            text-align: center;
            line-height: 50px;
            margin-top: -60px;
            color: blue;
            transition: 2s;
        }

        section:hover .one{
            left:150px;
        }
        section:hover .two{
            left: 170px;
        }
        section:hover p{
            margin-top: 20px;
        }
        section{
            position: absolute;
            top: 100px;
            left: 770px;
            height: 280px;
            width: 380px;
            transition: 2s;
            overflow: hidden;
        }
        section:hover{
            background-color: rgba(0, 0, 0, 0.6);
        }
    </style>
</head>

<body>
    <div>
        
    </div>
    <section>
        <p>商业咨询策划</p>
        <img src="imges/l_o.png" class="one">
        <img src="imges/r_f.png" class="two">
    </section>
</body>

</html>

小呆狸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
渐变与过渡

线性渐变:方向默认从上到下语法:background:linear-gradient(2~多个颜色，颜色中间用逗号分隔);linear-gradient(to方向[1到2两个],2~多个颜色，颜色中间用逗号分隔)linear-gradient(度数deg,2~多个颜色，颜色中间用逗号分隔)加浏览器内核方向:方向没有to直接跟的方位【两个方向的时候浏览器加内核的识...
复制链接

扫一扫