演示

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

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


曼亚灿
每天都在祈求平安毕业~

22222
文章

2222
阅读

22222
评论


知识点分解

首先来看页面结构:

<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事件:

  1. 自身高度由原来的190px变为450px
  2. 里面.imgBx由原来的150×150px变为250×250px
  3. 由于动画都是有渐变效果,因此需要增加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×250pximg的尺寸是230×230px。这个时候,如果让img上下左右居中,并且给.imgBx设置背景色background: #292929,那么视觉上看起来img就会有了一个border: 10px solid #292929的“边框”。

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


拨开“迷雾”看其实就很简单了,就是通过对.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);

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

带有动画的渐变背景色

上面的实现其实很简单,首先利用:

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可以制造出炫酷的效果。但是我现在已经过了爱折腾的阶段了,还是多多注重博客的质量吧,少搞一些花里胡哨的🤠~