怎么做一考试网站,温州最好的seo,精品课程网站建设开题报告,node.js做企业网站若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我#xff0c;若你是真心学习可以送你书籍#xff0c;指导你学习#xff0c;给予你目标方向的学习路线#xff0c;无套路#xff0c;博客为证。 本节案例如下#xff08;其他动效篇幅原因逐步讲解#xff0c;欢迎三…若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我若你是真心学习可以送你书籍指导你学习给予你目标方向的学习路线无套路博客为证。 本节案例如下其他动效篇幅原因逐步讲解欢迎三连 一、线性渐变 1.1 渐变分类 在 CSS 中使用渐变色需要用到 gradient 属性而 gradient 属性分为 线性渐变 linear-gradient 与 径向渐变 radial-gradient。 线性渐变 和 径向渐变的不同在于渐变色方向不同线性渐变的渐变方向可以指定为 上下左右、角度以及对角渐变径向渐变的方向则是基于某个中心点。 例如咱们使用一个线性渐变给定渐变方向为上下渐变色为红橙那么可以写成 stylebackground: linear-gradient( rgb(255, 123, 0), rgb(255, 0, 0)); /style1.2 渐变色默认上下方向 默认情况下线性渐变为上下渐变。在以上 css 代码给定 background 渐变色给予渐变色使用linear-gradient 或者 radial-gradient在此使用 linear-gradient 表示给予线性渐变在线性渐变的参数中给予对应的颜色在此给予了 两个 rgb 值一个为橙色 rgb(255, 123, 0) 另一个为红色 rgb(255, 0, 0)两者间使用逗号进行间隔那么此时的图片如下 因为第一个颜色给予的是橙色所以顶部的颜色为橙色第二个颜色给予的颜色是红色所以此时在 div 中的颜色为红色。 千万不要认为渐变色只能给予两个颜色渐变色还可以给予多个颜色例如以下示例 stylebackground: 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, 表示渐变色方向从左往右 stylebackground: 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 表示右下角那么左下角的渐变更改方向即可编写如下 stylebackground: 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效果如下 右下角的渐变色编写如下 stylebackground: 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 给予角度渐变色 除了对应的固定方向我们还可以填写对应角度使渐变色朝着固定方向渐变。例如如下代码示例 stylebackground: 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 表示角度为 0deg 是角度单位默认情况是上下渐变若角度值为正表示顺时针旋转角度若角度为负表示逆时针选准渐变方向。 此时我们给予角度为 90deg那么此时渐变方向为从右到左 如果角度为 -90deg 那么则是从左到右 我们还可以给予其他角度例如 10deg、20deg 可以去进行尝试由于内容过于赘述在此不在赘述读者自行进行修改演示即可。 1.6 渐变线重点 渐变线在渐变中是指渐变颜色停止的线渐变线可以指定位置并且可以通过渐变线使渐变色居于某一个范围之内渐变线的使用一定是要在 2 种渐变色以上。 例如如下示例 该示渐变色为左上角到右下角渐变颜色依次是红、绿、蓝这三种颜色如何做到蓝色渐变只有一小块而大部分是绿色渐变我们仔细观察红色的非渐变区域只有左上角一小部分那如何制作出这样的渐变效果呢 要完成这个效果我们需要给予渐变线位置也就是确定停止颜色为纯色的分界线位置。如以下代码 stylebackground: 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 即可例如 stylebackground: repeating-linear-gradient(to bottom right, red 5%, green 10%, blue 15%); /style此时渐变色将会不充满整个空间而是重复执行渐变。 线性渐变完整代码调用代码如下 !DOCTYPE html html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlegradient 1_bit CSS 动效实战课程之渐变色操作/titlestyle.gradient-to-down {background: repeating-linear-gradient(to bottom right, red 5%, green 10%, blue 15%);}div {height: 200px;width: 200px;}/style /headbodydiv classgradient-to-down/div /body/html二、 径向渐变 2.1 径向渐变 径向渐变我们可以看成是一个点圆的建表通过定义这个点的位置和渐变形状完成渐变需求。 我们先看一个简单的径向渐变 stylebackground: radial-gradient(red, green, blue); /style我们由此得知径向渐变使用 radial-gradient在这个径向渐变中使用了 红绿蓝 三种颜色这三种颜色的径向渐变如下 当然我们也可以使用多种颜色进行渐变在此不在进行赘述。 2.2 渐变形状 径向渐变可以设置渐变形状例如我设置一个水平半径为50px垂直半径为 100px 的径向渐变代码如下 stylebackground: radial-gradient(50px 100px, red, green, blue) /style效果如下 此时由于半径小于垂直半径此时渐变将会看成是一个椭圆状。 我们也可以扩大渐变范围例如垂直半径为300px stylebackground: radial-gradient(50px 300px, red, green, blue) /style效果如下 由于这个div 大小为 200*200px 在此会超出可视范围但我们也能感受其效果。 注意更改形状也有限定大小作用。 2.3 渐变中心 除了更改渐变形状我们还可以更改径向渐变的中心点位置例如如下代码 stylebackground: radial-gradient(at 10% 30%, red, green, blue) /style显示效果如下 此时 at 10% 30% 表示圆心点位置在从左到右 x 轴的 10% 以及 y 轴从上到下的 30% 处at 之后则是位置信息也可以使用单位值进行代替 stylebackground: radial-gradient(at 50px 100px, red, green, blue) /style效果如下 更改中心点以及形状可以同时使用 stylebackground: radial-gradient(10px 50px at 50px 100px, red, green, blue) /style效果如下 其他操作跟线性渐变一致例如限定渐变范围 stylebackground: radial-gradient(red 10%, green 45%, blue 50%) /style效果如下 又或者是重复渐变代码如下 stylebackground: repeating-radial-gradient(red 10%, green 15%, blue 20%) /style效果如下 此部分完整代码如下 !DOCTYPE html html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlegradient 1_bit CSS 动效实战课程之渐变色操作/titlestyle.radial-gradient-demo {background: repeating-radial-gradient(red 10%, green 15%, blue 20%)}div {height: 200px;width: 200px;}/style /headbodydiv classradial-gradient-demo/div /body/html2.4 渐变边缘控制 再进行径向渐变时我们还可以对渐变边缘进行控制例如在一般渐变时咱们的边缘是这样的 这是因为最后的渐变色为一个颜色若我们使用最后一个颜色为透明色那么即可使当前的渐变产生一种发散效果这个时候就得使用 rgba 进行渐变。 我们一般情况下纯色使用 rgb 进行表示这个 rgba 的 a 表示透明度例如我们现在给予一个 a 值为 0 即一个透明颜色进行渐变那么即可使该渐变边缘透明 stylebackground: 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 以及最后一个 0a 的取值可以从 0-1 进行取值1则表示不透明0则表示透明那么此时这个颜色不管取啥由于透明度取 0则是透明色那么页面渐变显示如下 也可以渐变一种颜色与透明色 stylebackground: 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 表示当前尺寸大小与中心点最远的 角 的距离 那么代码就可以写成 stylebackground: 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。 此时我们定义一个样式 stylediv {width: 300px;height: 300px;background: url(../img/img05.jpg) no-repeat;} /style该样式确认了一张图片进行显示并且不重复那么接下来使用div 后图片直接作为背景显示如下 可以发现此图片超出范围并不进行显示此时我们使用 background-position 更改样式后如下 stylediv {width: 300px;height: 300px;background: url(../img/img05.jpg) no-repeat;background-position: 50% 50%;} /stylebackground-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表示单位为秒若想动画循环播放需要增加 infiniteanimation: moiveAnimation 15s infinite; 接下来我们就需要开始创建一个动画 stylekeyframes 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 内容 stylebody {margin: 0 0;text-align: center;} /style并且设置 span 直接距离顶部一定距离设置大小、设置元素种类此内容之前的课程有讲在此不再赘述 stylespan {display: inline-block;margin-top: 300px;font-size: 50px;color: aliceblue;font-weight: bold;} /style那么此时就完成了移动渐变色背景制作此部分完整代码如下 !DOCTYPE html html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlegradient 1_bit CSS 动效实战课程之渐变色操作/titlestylebody {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 /headbody classfloat-gradientspan纯 CSS 浮动背景——1_bit CSS动效实战课程/span /body/html效果如下 3.3 径向渐变背景 制作示例如下 如果你对线性渐变背景不满意还可以使用径向渐变作为背景。 此时我们可以直接设置当前背景图为渐变色为了更好演示直接设置当前类样式在 body 中调用 !DOCTYPE html html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlegradient 1_bit CSS 动效实战课程之渐变色操作/titlestyle.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 /headbody classradial-gradient-demo/body/html此时我们可以看到设置了一个渐变色使用了 closest-side 在大小设置为 130vw 130vhvw和vh是视窗大小background-position 也用视窗位置指定了效果如下 此时效果为何有 4 个渐变色这是因为设置背景图片时没有给予不重复指定否则渐变色将会重复铺满整个背景图区域在此直接设置背景不能重复在 类样式中添加 stylebackground-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 classradial-gradient-demospan纯 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 langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlegradient 1_bit CSS 动效实战课程之渐变色操作/titlestylebody {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 /headbody classradial-gradient-demospan纯 CSS 渐变浮动背景——1_bit CSS动效实战课程/span /body/html演示如下 该渐变样式还可以用在不同的元素之中当作背景。