01超精美渐变色动态背景完整示例【CSS动效实战(纯CSS与JS动效)】

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证。

本节案例如下(其他动效篇幅原因逐步讲解,欢迎三连):
请添加图片描述
请添加图片描述

一、线性渐变

1.1 渐变分类

在 CSS 中,使用渐变色需要用到 gradient 属性,而 gradient 属性分为 线性渐变 linear-gradient径向渐变 radial-gradient

线性渐变 和 径向渐变的不同在于渐变色方向不同,线性渐变的渐变方向可以指定为 上下左右、角度以及对角渐变,径向渐变的方向则是基于某个中心点。

例如咱们使用一个线性渐变给定渐变方向为上下,渐变色为红橙,那么可以写成:

<style>background: linear-gradient( rgb(255, 123, 0), rgb(255, 0, 0));
</style>

1.2 渐变色默认(上下)方向

默认情况下,线性渐变为上下渐变。在以上 css 代码,给定 background 渐变色,给予渐变色使用linear-gradient 或者 radial-gradient,在此使用 linear-gradient 表示给予线性渐变,在线性渐变的参数中,给予对应的颜色,在此给予了 两个 rgb 值,一个为橙色 rgb(255, 123, 0) 另一个为红色 rgb(255, 0, 0),两者间使用逗号进行间隔,那么此时的图片如下:
在这里插入图片描述
因为第一个颜色给予的是橙色,所以顶部的颜色为橙色,第二个颜色给予的颜色是红色,所以此时在 div 中的颜色为红色。

千万不要认为渐变色只能给予两个颜色,渐变色还可以给予多个颜色,例如以下示例:

<style>background: linear-gradient( rgb(255, 123, 0), rgb(246, 255, 0), rgb(89, 255, 0), rgb(0, 251, 255), rgb(0, 51, 255));
</style>

以上示例渐变色给予了多个不同的颜色,使用渐变色时会将这些颜色自动的进行过度,以下是渐变色效果:
在这里插入图片描述

1.3 给予渐变方向渐变色

渐变色还可以给予默认的渐变色方向,例如左右渐变;左右渐变的默认起始方向是左,只需要给第一个参数一个方向值即可,在此给予一个渐变色参数为 to right, 表示渐变色方向从左往右:

<style>background: linear-gradient(to right, rgb(255, 123, 0), rgb(246, 255, 0), rgb(89, 255, 0), rgb(0, 251, 255), rgb(0, 51, 255));
</style>

那么此时渐变色的朝向则会发生改变:

在这里插入图片描述

1.4 给予对角渐变色

对角渐变表示给予一个叫,使渐变色往该方向进行渐变,例如 bottom left 表示左下角、bottom right 表示右下角,那么左下角的渐变更改方向即可,编写如下:

<style>background: linear-gradient(to bottom left, rgb(255, 123, 0), rgb(246, 255, 0), rgb(89, 255, 0), rgb(0, 251, 255), rgb(0, 51, 255));
</style>

效果如下:
在这里插入图片描述
右下角的渐变色编写如下:

<style>background: linear-gradient(to bottom right, rgb(255, 123, 0), rgb(246, 255, 0), rgb(89, 255, 0), rgb(0, 251, 255), rgb(0, 51, 255));
</style>

效果如下:
在这里插入图片描述

1.5 给予角度渐变色

除了对应的固定方向,我们还可以填写对应角度使渐变色朝着固定方向渐变。例如如下代码示例:

<style>background: linear-gradient(0deg, rgb(255, 123, 0), rgb(246, 255, 0), rgb(89, 255, 0), rgb(0, 251, 255), rgb(0, 51, 255))
, red, blue)
</style>

其中的 0deg 表示角度为 0,deg 是角度单位,默认情况是上下渐变,若角度值为正,表示顺时针旋转角度,若角度为负,表示逆时针选准渐变方向。

此时我们给予角度为 90deg,那么此时渐变方向为从右到左:
在这里插入图片描述

如果角度为 -90deg 那么则是从左到右:
在这里插入图片描述
我们还可以给予其他角度,例如 10deg、20deg 可以去进行尝试,由于内容过于赘述在此不在赘述,读者自行进行修改演示即可。

1.6 渐变线(重点)

渐变线在渐变中是指渐变颜色停止的线,渐变线可以指定位置,并且可以通过渐变线使渐变色居于某一个范围之内,渐变线的使用一定是要在 2 种渐变色以上。

例如如下示例:
在这里插入图片描述

该示渐变色为左上角到右下角渐变,颜色依次是红、绿、蓝,这三种颜色如何做到蓝色渐变只有一小块,而大部分是绿色渐变,我们仔细观察,红色的非渐变区域只有左上角一小部分,那如何制作出这样的渐变效果呢?

要完成这个效果,我们需要给予渐变线位置,也就是确定停止颜色为纯色的分界线位置。如以下代码:

<style>background: linear-gradient(to bottom right, red 5%, green 90%, blue 100%);
</style>

该代码我们可以得知,这个渐变方向为左上角到右下角进行渐变,并且给予的颜色是 红绿蓝,但在这些颜色之后分别带上了对应的百分比,这些百分比就是表示这些颜色在什么地方停止。

我们用其中一个颜色举例,例如 red 5%,表示这个红色在整个颜色范围的 5% 时停止纯色范围,开始进行渐变,这个范围指的是从初始位置开始到结束方向的百分比范围,例如如图:
在这里插入图片描述

在这里的 red 5% 指的是红色的颜色纯色停止范围在渐变方向上范围的 5% 处,所以在渐变中表现为 5% 之后是绿色和红色的渐变范围:
在这里插入图片描述

此时绿色的渐变线在分享的 90% 处:

在这里插入图片描述

那么之后的就是蓝色颜色,因为蓝色渐变线在终点 100% 处,由此形成了这个渐变范围。

1.7 重复渐变

渐变色还可以进行重复渐变,例如:
在这里插入图片描述
只需要将 linear-gradient 更改为 repeating-linear-gradient 即可,例如:

<style>background: repeating-linear-gradient(to bottom right, red 5%, green 10%, blue 15%);
</style>

此时渐变色将会不充满整个空间,而是重复执行渐变。

线性渐变完整代码调用代码如下:

<!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>gradient 1_bit CSS 动效实战课程之渐变色操作</title><style>.gradient-to-down {background: repeating-linear-gradient(to bottom right, red 5%, green 10%, blue 15%);}div {height: 200px;width: 200px;}</style>
</head><body><div class="gradient-to-down"></div>
</body></html>

二、 径向渐变

2.1 径向渐变

径向渐变我们可以看成是一个点(圆)的建表,通过定义这个点的位置和渐变形状,完成渐变需求。

我们先看一个简单的径向渐变:

<style>background: radial-gradient(red, green, blue);
</style>

我们由此得知,径向渐变使用 radial-gradient;在这个径向渐变中使用了 红绿蓝 三种颜色,这三种颜色的径向渐变如下:
在这里插入图片描述
当然我们也可以使用多种颜色进行渐变,在此不在进行赘述。

2.2 渐变形状

径向渐变可以设置渐变形状,例如我设置一个水平半径为50px,垂直半径为 100px 的径向渐变,代码如下:

<style>background: radial-gradient(50px 100px, red, green, blue)
</style>

效果如下:

在这里插入图片描述
此时由于半径小于垂直半径,此时渐变将会看成是一个椭圆状。

我们也可以扩大渐变范围,例如垂直半径为300px:

<style>background: radial-gradient(50px 300px, red, green, blue)
</style>

效果如下:
在这里插入图片描述

由于这个div 大小为 200*200px 在此会超出可视范围,但我们也能感受其效果。

注意,更改形状也有限定大小作用。

2.3 渐变中心

除了更改渐变形状,我们还可以更改径向渐变的中心点位置,例如如下代码:

<style>background: radial-gradient(at 10% 30%, red, green, blue)
</style>

显示效果如下:

在这里插入图片描述

此时 at 10% 30% 表示圆心点位置在从左到右 x 轴的 10% 以及 y 轴从上到下的 30% 处,at 之后则是位置信息,也可以使用单位值进行代替:

<style>background: radial-gradient(at 50px 100px, red, green, blue)
</style>

效果如下:
在这里插入图片描述
更改中心点以及形状可以同时使用:

<style>background: radial-gradient(10px 50px at 50px 100px, red, green, blue)
</style>

效果如下:

在这里插入图片描述
其他操作跟线性渐变一致,例如限定渐变范围:

<style>background: radial-gradient(red 10%, green 45%, blue 50%)
</style>

效果如下:

在这里插入图片描述
又或者是重复渐变,代码如下:

<style>background: repeating-radial-gradient(red 10%, green 15%, blue 20%)
</style>

效果如下:

在这里插入图片描述

此部分完整代码如下:

<!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>gradient 1_bit CSS 动效实战课程之渐变色操作</title><style>.radial-gradient-demo {background: repeating-radial-gradient(red 10%, green 15%, blue 20%)}div {height: 200px;width: 200px;}</style>
</head><body><div class="radial-gradient-demo"></div>
</body></html>

2.4 渐变边缘控制

再进行径向渐变时,我们还可以对渐变边缘进行控制,例如在一般渐变时,咱们的边缘是这样的:
在这里插入图片描述
这是因为最后的渐变色为一个颜色,若我们使用最后一个颜色为透明色那么即可使当前的渐变产生一种发散效果,这个时候就得使用 rgba 进行渐变。

我们一般情况下纯色使用 rgb 进行表示,这个 rgba 的 a 表示透明度,例如我们现在给予一个 a 值为 0 即一个透明颜色进行渐变,那么即可使该渐变边缘透明:

<style>background: radial-gradient(red 10%, green 15%, rgba(0, 0, 255, 0) 20%)
</style>

可以看到,此渐变代码 种的 三种颜色分别是 红绿和 rgba(0, 0, 255, 0)rgba(0, 0, 255, 0) 的 rgb 值分别是 0、0、255 以及最后一个 0,a 的取值可以从 0-1 进行取值,1则表示不透明,0则表示透明,那么此时这个颜色不管取啥,由于透明度取 0,则是透明色,那么页面渐变显示如下:

在这里插入图片描述

也可以渐变一种颜色与透明色:

<style>background: radial-gradient(red,rgba(0, 0, 255, 0))
</style>

显示如下:

在这里插入图片描述
此时并没有表达到我们想要的边缘透明的效果,我们需要增加对应的 size 参数,size 参数可选为 closest-side、farthest-side、closest-corner、farthest-corner:

  • closest-side 表示当前尺寸大小与中心点最近 的距离
  • farthest-side 表示当前尺寸大小与中心点最远 的距离
  • closest-corner 表示当前尺寸大小与中心点最近 的距离
  • farthest-corner 表示当前尺寸大小与中心点最远 的距离

那么代码就可以写成:

<style>background: radial-gradient(closest-side, red, rgba(0, 0, 255, 0))
</style>

此时我增加了 closest-side ,设定当前尺寸遇到最近的边的距离为渐变大小,那么此时效果如下:

在这里插入图片描述
若此时你切换成 farthest-side 进行设置效果也一样,因为当前只有一条边,即是最远也是最近;若设置为 closest-corner 效果如下:

在这里插入图片描述
此时将会把渐变尺寸的大小设置为遇到角的距离为大小,若设置为 farthest-corner 效果也一样,因为只有这四个角。

三、渐变色实战

案例如下:
请添加图片描述
请添加图片描述

3.1 背景移动

背景移动使用 background-position 属性,当我们使用渐变色作为背景时,需要移动渐变色才能时背景发生改变。 background-position 定义背景图片开始绘制的点,接收两个参数,这个参数便是这个开始绘制点的坐标,默认为左上角,值为0 0。

此时我们定义一个样式:

<style>div {width: 300px;height: 300px;background: url("../img/img05.jpg") no-repeat;}
</style>

该样式确认了一张图片进行显示,并且不重复,那么接下来使用div 后图片直接作为背景,显示如下:
在这里插入图片描述
可以发现,此图片超出范围并不进行显示,此时我们使用 background-position 更改样式后如下:

<style>div {width: 300px;height: 300px;background: url("../img/img05.jpg") no-repeat;background-position: 50% 50%;}
</style>

background-position 确定显示点为图片中心,此时页面效果如下:

在这里插入图片描述
接下来咱们就需要使用该属性移动渐变色背景,使其发生改变。

3.2 渐变色移动背景

在一般的网站中,有时我们可以看到一些渐变色背景并且移动的示例,那么如何使渐变色进行移动呢?

渐变色移动需要使用对应的动画,动画使用 animation 属性,并且还需要定义一个帧动画。

在定义动画前,我们还需要使用 background-size 属性对渐变色进行放大,否则无法移动渐变色背景,毕竟如果你不放大,那么这个渐变色就容器那么大,无法进行移动。

此时我们创建一个 类样式 ,命名为 .float-gradient,并且在其内部加上渐变色代码:

<style>.float-gradient {background: linear-gradient(-45deg, #990066, #FFCC00, #CC0033);background-size: 500% 500%;}
</style>

以上代码中 background-size 使渐变色范围放大 5倍,包括横轴竖轴方向;接着我们增加一个动画:

<style>.float-gradient {background: linear-gradient(-45deg, #990066, #FFCC00, #CC0033);background-size: 500% 500%;animation: moiveAnimation 15s;}
</style>

以上样式代码中 animation 定义动画,moiveAnimation 是自定义动画的动画名称,15s 表示 15秒一个周期,s表示单位为秒,若想动画循环播放,需要增加 infinite:animation: moiveAnimation 15s infinite;

接下来我们就需要开始创建一个动画:

<style>@keyframes moiveAnimation {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
</style>

以上就是一个动画的创建 @keyframes 表示创建一个动画,moiveAnimation 为动画名,其内部就是这个动画过程;0% 表示当动画周期到 0% 时的背景状态,background-position 表示当前背景在此时刻移动至何位置,在此定义了 3 个状态,起始是移动至左侧中心、随后移动至右侧中心,最后移动至原本位置,那么直接给予 body 这个样式即可。

接下来我们需要给予一个文本,需要水平居中,直接设置 body 内容:

<style>body {margin: 0 0;text-align: center;}
</style>

并且设置 span 直接距离顶部一定距离,设置大小、设置元素种类(此内容之前的课程有讲,在此不再赘述):

<style>span {display: inline-block;margin-top: 300px;font-size: 50px;color: aliceblue;font-weight: bold;}
</style>

那么此时就完成了移动渐变色背景制作,此部分完整代码如下:

<!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>gradient 1_bit CSS 动效实战课程之渐变色操作</title><style>body {margin: 0 0;text-align: center;}span {display: inline-block;margin-top: 300px;font-size: 50px;color: aliceblue;font-weight: bold;}.float-gradient {background: linear-gradient(-45deg, #990066, #FFCC00, #CC0033);background-size: 500% 500%;animation: moiveAnimation 15s infinite;}@keyframes moiveAnimation {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}</style>
</head><body class="float-gradient"><span>纯 CSS 浮动背景——1_bit CSS动效实战课程</span>
</body></html>

效果如下:

请添加图片描述

3.3 径向渐变背景

制作示例如下:
请添加图片描述
如果你对线性渐变背景不满意,还可以使用径向渐变作为背景。

此时我们可以直接设置当前背景图为渐变色,为了更好演示,直接设置当前类样式在 body 中调用:

<!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>gradient 1_bit CSS 动效实战课程之渐变色操作</title><style>.radial-gradient-demo {background-image: radial-gradient(closest-side, rgb(232, 49, 13), rgba(235, 105, 78, 0));background-size: 130vw 130vh;background-position: -80vw -80vh;}</style>
</head><body class="radial-gradient-demo"></body></html>

此时我们可以看到,设置了一个渐变色,使用了 closest-side ,在大小设置为 130vw 130vh(vw和vh是视窗大小),background-position 也用视窗位置指定了,效果如下:

在这里插入图片描述

此时效果为何有 4 个渐变色?这是因为设置背景图片时没有给予不重复指定,否则渐变色将会重复铺满整个背景图区域,在此直接设置背景不能重复,在 类样式中添加:

<style>background-repeat: no-repeat;
</style>

这时,演示如下:
在这里插入图片描述
那如何做到很多颜色呢?这时只需要添加多个渐变颜色即可,样式如下:

<style>.radial-gradient-demo {background-image: radial-gradient(closest-side, rgb(232, 49, 13), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgb(11, 243, 197), rgba(243, 11, 164, 0));background-size: 130vw 130vh, 120vw 120vh;background-position: -80vw -80vh, 30vw -20vh;background-repeat: no-repeat;}
</style>

以上 css 代码,设置多个渐变色以及多个 size、position,页面如何需要大家耐心设置,否则样式将会不好看,奇奇怪怪,在这里设置了右上角渐变,演示如下:
在这里插入图片描述

接着设置左下角:

<style>
.radial-gradient-demo {background-image: radial-gradient(closest-side, rgb(232, 49, 13), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgb(11, 243, 197), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgb(64, 145, 14), rgba(254, 234, 131, 0));background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh;background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh;background-repeat: no-repeat;
}
</style>

演示如下:

在这里插入图片描述
接着右下角:

<style>
.radial-gradient-demo {background-image: radial-gradient(closest-side, rgb(232, 49, 13), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgb(11, 243, 197), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgb(64, 145, 14), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgb(234, 135, 7), rgba(170, 142, 245, 0));background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;background-repeat: no-repeat;
}
</style>

演示如下:

在这里插入图片描述

为了使整个页面表现更好,我们可以再设置一个背景色使当前页面更舒服:

<style>
.radial-gradient-demo {background-color: #CC0033;background-image: radial-gradient(closest-side, rgb(232, 49, 13), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgb(11, 243, 197), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgb(64, 145, 14), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgb(234, 135, 7), rgba(170, 142, 245, 0));background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;background-repeat: no-repeat;
}
</style>

演示效果如下:

在这里插入图片描述

是不是魔法就诞生了?接下来我们还需要让这些类似的光影动起来,那么需要设置动画:

在这里插入图片描述
在设置时一定要注意上图所说要点。

此时设置完第一个动画,页面效果如下:

请添加图片描述
不好意思,鼠标影响了观感。

接着依次设置剩下的动画效果,最终代码如下:请添加图片描述
若觉得蓝色太亮,可以修改为其他颜色:
请添加图片描述
接着我们设置文本:

<body class="radial-gradient-demo"><span>纯 CSS 渐变浮动背景——1_bit CSS动效实战课程</span>
</body>

为了居中,我们再设置样式:

<style>
body {text-align: center;
}span {line-height: 100vh;font-size: 50px;color: white;
}
</style>

直接设置 span 行高为整个屏幕行高即可垂直居中。

完整代码如下:

<!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>gradient 1_bit CSS 动效实战课程之渐变色操作</title><style>body {text-align: center;}span {line-height: 100vh;font-size: 50px;color: white;}.radial-gradient-demo {background-color: #CC0033;background-image: radial-gradient(closest-side, rgb(232, 49, 13), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgb(7, 92, 75), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgb(64, 145, 14), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgb(234, 135, 7), rgba(170, 142, 245, 0));background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;background-repeat: no-repeat;animation: 15s moiveAnimation infinite;}@keyframes moiveAnimation {0%,100% {background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;}25% {background-size: 120vw 120vh, 130vw 150vh, 130vw 120vh, 100vw 110vh;background-position: -30vw -30vh, 40vw -10vh, 0vw 10vh, -10vw 20vh;}50% {background-size: 130vw 130vh, 140vw 100vh, 100vw 150vh, 90vw 110vh;background-position: 10vw -60vh, 20vw 10vh, 10vw 30vh, 10vw -20vh;}75% {background-size: 140vw 140vh, 100vw 130vh, 100vw 150vh, 130vw 110vh;background-position: -70vw -70vh, 0vw -10vh, 30vw -20vh, 20vw 30vh;}}</style>
</head><body class="radial-gradient-demo"><span>纯 CSS 渐变浮动背景——1_bit CSS动效实战课程</span>
</body></html>

演示如下:
请添加图片描述
该渐变样式还可以用在不同的元素之中当作背景。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286052.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Liferay 用本地私服(nexus) 打包部署Portlet应用

当我们使用搭建一个nexus本地仓库&#xff0c;并且配置settings.xml来让应用启用这个仓库。我们使用Liferay 6.1.10的archetype来创建liferay portlet, 如下图&#xff1a; 当我们运行命令mvn package liferay:deploy时&#xff0c;会出现以下错误&#xff1a; [DEBUG] Using c…

【MATLAB统计分析与应用100例】案例016:matlab读取Excel数据,进行样品系统聚类分析

1. 聚类分析结果 2. matlab完整代码 (1)读取数据,并进行标准化 [X,textdata] = xlsread(examp09_02.xls); % 从Excel文件中读取数据 X = zscore(X

解决React Native报错:Error:Found unexpected optical bounds (red pixel)

问题背景 同样是在升级 gradle plugin V2.2.3 --> gradle plugin V3.0.1后&#xff0c;运行至打包APK期间报错&#xff1a; Error:found unexpected optical bounds (red pixel) on top border at x14.&#xff08;错误&#xff1a;在X14的上边框上发现意外的光学边界&am…

webpack 入门

什么是WebPack&#xff0c;为什么要使用它&#xff1f; 为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用&#xff0c;它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度&#xff0c;前端社区涌现出了很多好的实践方法 模块化&#xff0c;让我…

使用vsftp虚拟用户实现安全访问控制

一、ftp连接方式 1、命令连接 ftp在与用户交互时&#xff0c;首先打开的是TCP的21号端口&#xff0c;建立命令连接&#xff0c;这个连接会始终存在&#xff0c;直到用户输入bye的那一刻&#xff0c;才断开命令连接。 2、数据连接 1&#xff09;主动连接 主动连接是基于TCP21号端…

【前端就业课 第二阶段】CSS 零基础到实战(04)定位

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 一、定位 定位分为相对定位以及绝对定位。 相对定位可以理解为在 HTM…

Android TextView设置ClickableSpan 点击结尾空白位置也响应点击的问题

解决办法&#xff0c;在后边紧接着追加一个0宽度字符&#xff1a; builder.append("\u200b"); 相关知识&#xff1a; “\u200b” 为 Unicode Character ‘ZERO WIDTH SPACE’ (U200B)&#xff0c;可用于内容标识&#xff0c;不占位数&#xff08;宽度0&#xff0…

【MATLAB统计分析与应用100例】案例017:matlab读取Excel数据,进行变量系统聚类分析

1. 变量系统聚类分析结果 2. matlab完整代码 (1)读取数据,并转为距离向量 [X,textdata] = xlsread(examp09_03.xls); % 从Excel文件中读取数据 y = 1 -

Wordpress:将图片、post等的URL转换为相对路径

2019独角兽企业重金招聘Python工程师标准>>> 例如上传一张图片&#xff0c;其地址是可能 http://127.0.0.1/wp-content/uploads/2015/12/1_.png&#xff0c; 问题是如果我们通过其他的电脑通过wordpress主机的公网IP访问这张图片时会提示找不到。 最好的处理方法是不…

【MATLAB统计分析与应用100例】案例018:matlab读取Excel数据,进行K均值聚类分析

文章目录 1. K均值聚类分析结果2. matlab完整代码(1)读取数据,并进行标准化变换(2)选取初始凝聚点,进行聚类(3)绘制轮廓图1. K均值聚类分析结果 2. matlab完整代码 (1)读取数据,并进行标准化变换 [X, textdata] = xlsread(examp09_04.xls

CSS 零基础到实战(05)布局、盒子模型、弹性盒子【前端就业课 第二阶段】

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 一、流动布局 流动布局有3种布局模型&#xff0c;分别是流动布局&…

DVWA系列之24 high级别上传漏洞

最后再来分析high级别的代码&#xff1a;这里首先有一条语句需要理解&#xff1a;$uploaded_ext substr($uploaded_name, strrpos($uploaded_name, .) 1);在这条语句里&#xff0c;首先利用strrpos() 函数来查找“.”在变量$uploaded_name中出现的位置&#xff0c;然后将得到…

WPF 基础控件之 TreeView 样式

其他基础控件1.Window2.Button3.CheckBox4.ComboBox5.DataGrid 6.DatePicker7.Expander8.GroupBox9.ListBox10.ListView11.Menu12.PasswordBox13.TextBox14.RadioButton15.ToggleButton16.Slider TreeView 实现下面的效果1&#xff09;TreeView来实现动画&#xff1b;Grid 分两…

HTML Animation 【前端就业课 第二阶段】CSS 零基础到实战(06)

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 一、Animation 基础 使用 Animation 可以设置帧动画&#xff0c;与 tr…

史上最全的Visual Studio Code安装C/C++环境,若不行头砍给你。

一、下载Visual Studio Code安装 下载链接地址 二、安装C/C++插件 输入c/c++, 然后点击那里install 三、下载MinGW配置环境变量 下载地址 进入网站后不要点击 "Download Lasted Version",往下滑,找到最新版的 "x86_64-posix-seh"。

C# 11 新特性:泛型 Attribute

之前使用JsonConverterAttribute&#xff0c;我们可以为任意类型自定义 Json 序列化。例如&#xff1a;[JsonConverter(typeof(UserJsonConverter))] public class User {public string Name { get; set; }public override string ToString(){return Name;} }public class User…

NA-NP-IE系列实验实验15:RIPv2 手工汇总

实验15&#xff1a;RIPv2 手工汇总1.实验目的 通过本实验可以掌握&#xff1a;&#xff08;1&#xff09;RIPv2 路由的手工汇总&#xff08;2&#xff09;RIPv2 不支持CIDR 汇总&#xff08;3&#xff09;RIPv2 可以传递CIDR 汇总2.拓扑结构 实验拓扑如图 所示。3.实验步骤 路由…

CSS3 做一个旋转的立体3D正方形 动效核心【前端就业课 第二阶段】CSS 零基础到实战(07)

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 一、transform-origin transform-origin 用于更改当前元素的中心点&am…

【微服务专题之】.Net6下集成微服务网关-Ocelot

微信公众号&#xff1a;趣编程ACE关注可了解更多的.NET日常实战开发技巧&#xff0c;如需源码 请公众号后台留言 源码;[如果觉得本公众号对您有帮助&#xff0c;欢迎关注].Net6下集成微服务网关-Ocelot网关常见功能1&#xff1a;路由 routing2: 请求聚合3&#xff1a;身份验证和…

ArcGIS实验教程——实验二十七:时态数据可视化----以飓风路径为例

实验效果预览: ArcGIS实验视频教程合集:《ArcGIS实验教程从入门到精通》(附配套实验数据)》 文章目录 1. 时态数据简介2. 时态数据的存储方式3. 时态数据显示实例---飓风路径1. 时态数据简介 时态数据 代表某个时间点的状态,如 1990 年香港的土地利用状况或 2009 年 7 月…