「CSS」linear-gradient()属性值

曼亚灿

发布于 2023-05-18 10:15:58

7590

发布于 2023-05-18 10:15:58

文章被收录于专栏：亚灿网志

又学习了一个没啥用的小技巧~

请注意，本文编写于 169 天前，最后修改于 167 天前，其中某些信息可能已经过时。

演示

大数据真的太可怕了，知道我这几天在对网站程序进行小升级，写了不少的BUG。

B站昨天晚上就给我推送了个关于HTML&CSS前端的视频，于是乎本着学习( wu liao)的态度，点开看了下竟然觉得还挺有意思——这不，今天上午就给网站的归档页面增加了这个无聊的小功能。具体展示如下：

知识点分解

首先来看页面结构：

<div class="card">
    <div class="lines"></div>
    <div class="imgBx">
        <img src="https://image.manyacan.com/202211280901328.png" alt="">
    </div>
    <div class="content">
        <div class="details">
            <h2>曼亚灿<br><span>每天都在祈求平安毕业~</span></h2>
            <div class="data">
                <h3>342<br><span>Posts</span></h3>
                <h3>120k<br><span>Followers</span></h3>
                <h3>285<br><span>Following</span></h3>
            </div>
            <div class="actionBtn">
                <button>Follow</button>
                <button>Message</button>
            </div>
        </div>
    </div>
</div>

最外面的盒子是.card，当鼠标经过其上面，触发:hover事件：

自身高度由原来的190px变为450px；
里面.imgBx由原来的150×150px变为250×250px；
由于动画都是有渐变效果，因此需要增加transition属性。

思路有了，就是用css来实现了，具体的代码也不难：

.card {
    height: 190px;
    transition: 0.5s;
}

.card .imgBx {
    width: 150px;
    height: 150px;
    transition: 0.5s;
}

.card:hover {
    height: 450px;
}

.card:hover .imgBx {
    width: 250px;
    height: 250px;
}

接下来就是比较有意思的地方了，就是.lines与.imgBx看起来有一个会发光并旋转的border。

看了代码才知道，其实并不是border。拿.imgBx举例：其内部有一个img标签，.imgBx的尺寸是250×250px，img的尺寸是230×230px。这个时候，如果让img上下左右居中，并且给.imgBx设置背景色background: #292929，那么视觉上看起来img就会有了一个border: 10px solid #292929的“边框”。

通过查看源代码发现，这个发光的“边框”的实现效果是通过一个旋转的伪元素来实现的。

Try一Try $('button#hidden-toggle').click(function() {$(".img-box").toggleClass("hidden-toggle")})

拨开“迷雾”看其实就很简单了，就是通过对.imgBx添加了一个::before伪元素，然后为了旋转中心在.imgBx中心，对::before伪元素进行绝对定位：

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

另外::before伪元素的背景也比较讲究，有一个线性渐变的效果：

background: linear-gradient(transparent, #ff3c7b, #ff3c7b, #ff3c7b, transparent);

关于属性值linear-gradient的具体用法可以参考菜鸟教程，另外如果你想生成一个自己比较喜欢的渐变色背景，这个网站可以帮助你可视化编程渐变色。

最后就是动画的添加了，::before伪元素进行的就是一个简单的旋转动画，只要设置关键帧就可以了：

@keyframes animate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

关于css关键帧动画的学习，你可以查看我的博友新月云的这篇博客：CSS动画详解。

注意：因为我们对::before伪元素进行了绝对定位，使用了属性transform: translate(-50%, -50%)，那么在进行动画的时候也要加上translate(-50%, -50%)，这样才能保证整个的动画过程是基于translate(-50%, -50%)不变的情况下进行的。

::before伪元素对于动画的执行设置（4s旋转一周完成一个动画周期，线性，无限循环）：

animation: animate 4s linear infinite;

然后再对.imgBx容器设置：

overflow: hidden

隐藏超出盒子的内容即可。

至此，整个小case完毕，全部的代码可以查看我的GitHub。整个学习下来，给我的感觉就是代码不难，但是思路已经UI设计的这个思想太重要了，这也说明只会敲代码只能做码农?，要想成为大佬还是要学习思想啊！

延伸

上面提到了一个css属性：linear-gradient()，在菜鸟教程看了下讲解感觉挺有意思的，然后就深入研究了下?：

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

借助于这个属性，我们可以对一个盒子元素实现变化的渐变背景色，例如下面：

#demo-2018 { width: 80%; height: 4rem; text-align: center; border: 2px solid #ccc; margin: 1rem auto; line-height: 4rem; background: linear-gradient(125deg, #2c3e50, #27ae60, #2980b9, #e74c3c, #8e44ad); background-size: 500%; animation: bgAnimation 15s linear infinite; } @keyframes bgAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

带有动画的渐变背景色

上面的实现其实很简单，首先利用：

background: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
/* 指定背景图像的大小 */
background-size: 500%;

linear-gradient()属性把背景设置为多组颜色的渐变背景，同时利用background-size属性将这个背景放大，这样的话虽然背景有很多种颜色，但是经过了放大，超出盒子部分的将被隐藏，肉眼看的话，只能看到一种或者两种颜色。

然后就是借助于动画，让背景动起来，形成可以变化的渐变背景：

@keyframes bgAnimation {
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}

再对动画进行设置：

animation: bgAnimation 15s linear infinite;

这样的话就可以形成一个不断变化的渐变背景。

Plus Max Ultra版

我们还可以利用JS生成随机的背景色，这样的话每次刷新都会得到不同的结果：

// 产生十六进制随即色
function randomColor() {
    const r = randomInt(255)
    const g = randomInt(255)
    const b = randomInt(255)
    const c = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}000`
    return c.slice(0, 7)
}
// 产生随机角度
function randomInt(max) {
    return Math.floor(Math.random() * max)
}

然后再使用jQuery对DOM进行设置：

$('.lazy-wrap').css('background', `linear-gradient(${randomInt(360)}deg,${randomColor()},${randomColor()},${randomColor()},${randomColor()},${randomColor()})`)

即可。

这篇博客学习了linear-gradient()属性，结合HTML、JS可以制造出炫酷的效果。但是我现在已经过了爱折腾的阶段了，还是多多注重博客的质量吧，少搞一些花里胡哨的?~

----- END -----

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-11-29，如有侵权请联系 cloudcommunity@tencent.com 删除

css