渐变

线性渐变

就是“一个方向” 向 “另一个方向”渐变（或从一个颜色到另一个颜色平稳得过渡（颜色逐渐得变化））
语法：
background：liner-gradient（directon ，color-stop1，color-stop2，…）
说明：
directon：方向，默认值是to bottom 即从上向下的渐变；
color-stop：颜色的分布位置，默认均匀分布，例如有三个颜色，各个颜色为33.33%

解释方向：
to right 是到右，就是从左到右，同理 to left （从右到左）、to top （从下到上）、to
bottom（从上到下）

这里的渐变色，颜色的分布可以用百分比控制：
举例：
background:linear-gradient(to left,red 10%,blue 30%);
说明：到10%的位置都为红色，出来10%的位置开始向蓝色渐变，直到渐变到30%的位置为蓝色
注：后面一个颜色的百分比不能小于前面一个颜色的百分比

示例：

 <style>div{width: 500px;height: 300px;margin: 50px auto;background: linear-gradient(to right,red,blue);}</style>
</head>
<body><div></div>

在这里插入图片描述

注意：这里需要了解各大游览器厂商的效果，也就是通常说的，加浏览器的前缀的效果

css3: 没有最终形成正式版。
每个浏览器商，为了能对css3属性形成一个更好得支持，浏览器形成自己得一套语法规范。
一些css3属性，如果想在浏览上形成支持，有时候需要添加浏览器前缀。谷歌前缀： -webkit-    eg:   -webkit-属性:属性值
火狐前缀： -moz-       eg：  -moz-属性：属性值
IE前缀：  -ms-         eg：  -ms-属性：属性值
欧鹏前缀： -o-         eg：  -o-属性：属性值不添加浏览器前缀   ->   标准模式
添加浏览器前缀     ->   兼容模式

            /* 线性渐变   ->  标准模式 */background:linear-gradient(to left,red,blue,yellow);/* 线性渐变   ->  兼容模式 */background:-webkit-linear-gradient(right,red,blue,yellow);background:-moz-linear-gradient(right,red,blue,yellow);background:-ms-linear-gradient(right,red,blue,yellow);background:-o-linear-gradient(right,red,blue,yellow);

注：如果 linear-gradient() 添加浏览器前缀，方向是不加to的！指的是从哪个方向开始

线性渐变兼容写法：

 <style>.box1{width: 500px;height: 300px;margin: 50px auto;background: linear-gradient(to right,red,blue);}.box2{width: 500px;height: 300px;margin: 50px auto;background: -webkit-linear-gradient(left,red,blue);}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>

在这里插入图片描述
写法：

<style>*{margin:0;padding:0;}.box{width:500px;height:300px;margin:50px auto;/* 不添加浏览器前缀 ->  标准模式 */background:linear-gradient(to left,red 10%,blue 30%);}.box1{width:500px;height:300px;margin:50px auto;/* 添加浏览器前缀   ->  兼容模式 */background:-webkit-linear-gradient(0deg,red,blue);}</style>
</head>
<body><div class="box"></div><div class="box1"></div>
</body>

在这里插入图片描述
里面还有角度渐变：

角度是指水平线和渐变线之间的角度，逆时针方向的计算，换句话说，0 deg将创建一个从下到上的渐变，90 deg 将创建一个从左到右的渐变。
但是其他的游览器厂商的标准不太一样，即0 deg从左到右，90 deg是从下到上，可以记个公式：
90-x=y（其中x为标准角度，y为非标准角度）

方向可以使用角度的变化： deg 代表度数
例如:
标准模式： background:linear-gradient(30deg,red,blue)
兼容模式： background:-webkit-linear-gradient(60deg,reb,blue)

径向渐变：
从一个点向四周渐变
语法：（必须添加浏览器前缀）
background: radial-gradient(center, shape, size, start-color, …, last-color);
说明：
radial-gradient（渐变原点的位置，形状[椭圆或正圆],大小，颜色值1，颜色值2）

  渐变原点的位置：50% 50%   =  center10px 30px   =  距离左侧10px  距离顶端30pxright bottomleft bottom形状：默认是椭圆：ellipsecircle  正圆渐变的大小：注：径向渐变的大小，从圆心点到规定渐变位置（最近边、最近角、最远边、最远角）进行颜色的渐变走向默认值为最远角closest-side 最近边farthest-side 最远边closest-corner 最近角farthest-corner 最远角

写法：

  <style>*{margin:0;padding:0;}.box{width:500px;height:300px;margin:100px auto;background:-webkit-radial-gradient(center,yellow 10%,red,green);}</style>
</head>
<body><div class="box"></div>
</body>

在这里插入图片描述

重复性渐变

分为重复性线性渐变、重复性径向渐变
例：

 重复性线性渐变：background:-webkit-repeating-linear-gradient(red 10%,yellow 20%)重复性径向渐变：background:-webkit-repeating-radial-gradient(red 10%,yellow 20%)

写法：

<style>*{margin:0;padding:0;}.box1{width:300px;height:300px;margin:20px auto;background:-webkit-repeating-linear-gradient(red,yellow 10%,green 20%)}.box2{width:300px;height:300px;margin:0 auto;background:-webkit-repeating-radial-gradient(red,yellow 10%,green 20%)}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>

在这里插入图片描述

过渡（较重要的属性）

transition：all/具体属性值、运动时间s/ms、延迟时间s/ms、动画类型
transition:属性值1 属性值2 属性值3 属性值4

属性值1（transition-property） : 过渡的属性[width,height,background…] 默认的是all
属性值2（transition-duration） : 过渡的时间单位为 s(秒) ms(毫秒)
属性值3 （transition-delay）: 过渡的延迟时间
属性值4（transition-timing-function） : 过渡动画的类型（加速、减速、匀速[linear]）(默认是先加速后减速)

注：
1： transition必须通过事件（鼠标滑过）触发
2：如果一个元素，单独设置每个属性的过渡。
transition:width 1s,height 2s,background 5s;

注意：放在初始状态里面

<style>*{margin:0;padding:0;}.box{width:700px;height:400px;margin:100px auto;background:orange;}h2{width:100px;height:100px;background:blue;/* 添加过渡属性*/transition:width 1s,height 1s 1s,background 1s 2s;}/* 鼠标滑过让h2宽度变化 */.box:hover h2{width:700px;height:300px;background:red;}</style>
</head>
<body><div class="box"><h2></h2></div>
</body>

~~这里动态不上图了，效果很明显的~~

2D

transform的属性（功能函数）包含：translate（）、scale（）、rotate（）、skew（）；
分别还有X、Y之分，比如：translateX、rotateY（）等；

1、移动 translate（）

将元素向指定的方向移动，类似于position的relative；
水平移动：
向右移动：translate（tx，0）、向左移动：translate（-tx，0）；
垂直移动：
向下移动：translate（0，tx）、向上移动：translate（0，-tx）；
对角移动：
translate（tx，tx）、translate（-tx，-tx）、translate（-tx，tx）、translate（tx，-tx）；
分别对应着右下、左上、左下、右上

建议：一般可以结合定位加位移组合修改元素

2、缩放 scale（）

让元素根据中心原点对对象进行缩放，默认值为1，因此0.01—0.99之间的值使元素缩小，大于1的值使元素放大；

只在X轴缩放 transform:scaleX()
只在Y轴缩放 transform:scaleY()

对于线条的设计，可以用盒子加边框的方式实现

3、旋转 rotate（）

旋转函数通过指定的角度参数对元素根据对象原点指定一个2D旋转，他主要是二维空间内进行操作，接收一个角度值，用来指定旋转的幅度，如果这个值为正值，元素相对原点中心顺时针旋转，相反，如果这个值为负值，元素相对原点中心逆时针旋转。（里面的值为deg）

绕着X轴旋转 transform:rotateX()
绕着Y轴旋转 transform:rotateY()

4、倾斜 skew（）

倾斜函数能够让元素倾斜显示，他可以将一个元素以其中心位置围绕着X轴和Y轴按照一定的角度倾斜
一个参数时：表示水平方向的倾斜角度
二个参数时：第一个值表示水平方向的倾斜，第二值表示垂直方向的倾斜

transform:skewX(deg)
transform:skewY(deg)

5、控制变形原点

改变变形原点的位置：
transform-origin:x y
x 横向的位置
y 纵向的位置

接收的值：
left center
right top
50% 50%
10px 20px

都可以用于前面4个属性

注意点：

旋转缩放对位移的影响：
1、当位移和缩放同时出现时，先写位移在写缩放
transform：translate（300px） scale（2）；

2、当位移和旋转同时出现时，先写位移在写旋转
transform：translate（300px） rotate（60deg）；

因为旋转，缩放和位移位置互换的话，会导致坐标系发生变化影响

补充一个属性：

使元素的背面不可见：background-visibility：hidden；
注意在图片中，不能直接使用这个属性，需要给img套一个盒子使用，给盒子使用这个属性；

案例：正反翻牌效果

    <style>*{margin:0;padding:0;}.box{width:400px;height:400px;border:10px solid pink;margin:100px auto;position: relative;}.box div{width:400px;height:400px;position:absolute;top:0;/* 过渡 */transition:3s;/* 让背面不可见 */backface-visibility:hidden;}.box div img{width:100%;height:100%;}/* 让con2转动180deg */.con2{transform:rotateY(180deg);}/* 鼠标滑过让con2转到正面 */.box:hover .con2{transform:rotateY(360deg);}/* 鼠标滑过让con1转到后面 */.box:hover .con1{transform:rotateY(180deg);}</style>
</head>
<body><div class="box"><div class="con1"><img src="./images/5.jpg" alt=""></div><div class="con2"><img src="./images/7.jpg" alt=""></div></div>
</body>
</html>

~~这里动态不上图了，效果自试哦~~

3D

3D是在2D的基础上多一个坐标系就是Z轴；

先说说景深（近小远大）：在程序中实现的方法perspective 元素距离视线的距离（物体和眼睛的距离越小，近小远大的效果越明显；如果你的视线距离物体足够远时，基本就不会有近小远大的感觉）；

放在父元素中使用—perspective：1200px
放在子元素中使用—transform：perspective（1200px）
注意两个都设置的话会冲突，建议只设置父元素，看网上说这个值通常可以900~1200之间

属性：perspective-origin：；观察3D元素的位置角度
perspective-origin：center center；中心
perspective-origin：left top；左上角
perspective-origin：100% 100%；右下角
在这里插入图片描述

transform-style：

这个属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现，主要有两个属性值：
flat和preserve-3d;

例：
transform-style：preserve-3d；

3D下的位移、旋转、缩放：

3D位移：
transform:translate3d(x,y,z)
transform:translateZ(); 正值往前、负值往后

3D旋转：
transform:rotateZ(deg)
transform:rotate3d(x,y,z,度数)
参数x,y,z是一个矢量值 0 代表不旋转、1代表旋转 0.6
解释：x,y,z矢量值绘制一个点，绘制出得这个点，和变形原点形成一条线，这条线就是旋转得轴

3D缩放：
transform:scale3d(X,Y,Z)
transform:scaleZ();

案例：立方体：

<style>*{margin:0;padding:0;}.box{width:400px;height:400px;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;/* 形成3D空间 */transform-style:preserve-3d;/* 为了方便观察。让3d舞台转动一个角度 */transform:rotateX(20deg) rotateY(30deg);/* 过渡 */transition:2s;}.box img{width:100%;height:100%;}.box div{width:400px;height:400px;text-align:center;line-height:400px;font-size:100px;font-weight:900;color:#fff;/* 定位把6个面叠加再一起 */position: absolute;/* 透明 */opacity:0.6;/* 背面不可见 */backface-visibility:hidden;}.con1{background:red;/* 沿着Z轴往前200px */transform:translateZ(200px);}.con2{background:blue;/* 沿着Z轴往后走200px   把正面冲外：绕着Y轴转180deg*/transform:translateZ(-200px) rotateY(180deg);}.con3{background:green;/* 沿着X轴位移200px  然后在绕着Y轴转动90deg */transform:translateX(200px) rotateY(90deg);}.con4{background:pink;/* 沿着X轴左位移200px   然后在绕着Y轴转动-90deg */transform:translateX(-200px) rotateY(-90deg);}.con5{background:purple;/* 下面得面：沿着Y轴往下位移200px  绕着X轴转动-90deg*/transform:translateY(200px) rotateX(-90deg);}.con6{background:gray;/* 上面得面：沿着Y轴往上位移-200px  绕着X轴转动90deg */transform:translateY(-200px) rotateX(90deg);}</style>
</head>
<body><div class="box"><div class="con1">1</div><div class="con2">2</div><div class="con3">3</div><div class="con4">4</div><div class="con5">5</div><div class="con6">6</div></div>
</body>

效果图：
在这里插入图片描述
使背面可见的效果：

动画

CSS3-动画：不用任何事件触发，能自动执行。

制作关键帧：语法：@ keyframes 关键帧名称{from{ 初始状态属性 }to{ 结束状态的效果 }}常用方法：@ keyframes 关键帧的名称{0%{//动画开始状态}20%{}40%{}60%{}100%{//动画结束状态}}

animation

复合属性（简写形式），检索动画或设置所应用的动画特效

animation:

animation-name：关键帧名称（自定义）
animation-duration：动画执行的时间（秒s 毫秒 ms）
animation-delay：动画的延迟时间（秒s 毫秒 ms）
animation-timing-function：动画的过渡类型：linear(匀速) step-start (跳到每一个关键帧) ease（平滑） ease-in（由慢到快）ease-out（由快到慢）ease-in-out（由慢到快到慢）—贝塞尔曲线
animation- iteration-count：动画的次数：直接写次数number 3 、5 无限循环 infinite
animation- direction：动画的方向：正常的运动（normal）、反向运动（reverse）、交替运动（alternate）、先反后正（alternate-reverse）
animation-play-state: 动画的状态：running 运动、paused 暂停
让动画停在最后一帧：forwards

animation：mymove 20s ease-in-out 2s infinite alternate
分别对应：动画名称、持续时间、动画频率、动画延迟时间、循环次数、动画运动方向

注意：
animation和transition的区别：
相同点：
都是随时间改变元素的属性值；
不同点：
transition需要触发一个事件（比如hover事件或click事件）才会随时间改变其css属性；而 animation在不需要触发事件的情况下可以显式的随着时间的变化来改变元素的css属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值；

案例：奔跑的小女孩：

 <style>*{margin:0;padding:0;}.box{width:180px;height:300px;margin:100px auto;background:#dd0 url(./images/bg.png) no-repeat;/* 调用关键帧 */animation:picRun 0.5s step-start infinite;}/* 制定关键帧 */@keyframes picRun {0%{background-position:0 0;}14.2%{background-position:-180px 0;}28.4%{background-position:-360px 0;}42.6%{background-position:-540px 0;}56.8%{background-position:-720px 0;}71%{background-position:-900px 0;}85.2%{background-position:-1080px 0;}100%{background-position:0px 0;}}</style>
</head>
<body><div class="box"></div>
</body>

效果图：
在这里插入图片描述
那CSS3的渐变、过渡、2D、3D和动画先到这里吧！~~你知道的越多，你不知道的越多！~~

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

【数据库】前三位和后四位归属地，提高效率的关键代码
遇到问题评论区留言，定期抽空上线会解答下面是前三后位后四位的程序核心代码SQL调用存储过程：---创建存储过程 create proc proc_Show as declare @loginId varchar(20)select @loginId=LoginId from Usersprint 当前LoginId:+@LoginIdselect * from Mark where loginId=@log…...
2024/4/24 7:39:38
数据结构与算法(Java) 51：字符串全排列
题目输入一个字符串，打印出该字符串中字符的所有排列。例如输入字符串abc，则打印出来的所有字符串abc、acb、bac、bca、cab和cba。思路遍历字符串(i)，固定当前第i个字符，然后对剩下地i+1~n的字符进行全排列。由于第i个字符可以在除了固定的字符之外的所有字符中(i~n)产生…...
2024/4/24 7:39:38
Linux内核移植之四：内核启动过程
内容来自韦东山《嵌入式Linux应用开发完全手册》与移植U-Boot的过程相似，在移植Linux之前，先了解它的启动过程。Linux的启动过程可以分为两部分：架构/开发板相关的引导过程、后续的通用启动过程。如图16.7所示是ARM架构处理器上Linux内核vmlinux的启动过程。之所以强调是vm…...
2024/4/24 7:39:37
关于ueditor富文本编辑器，上传多张图片，h5和app图片中间出现空白行问题
商城系统，后台使用富文本编辑器编辑商品详情进行图文混排时，ueditor会自动加载上p标签，这就导致安卓和ios以及H5页面图片之间会出现一行空白行，在网上找资料去掉自动添加p标签，没有效果，甚至把编辑器搞崩了。只能通过接口这块下手了，可能是我没有完全理解其他博主的意思…...
2024/4/24 7:39:36
【生物质】如何根据工业分析和元素分析求气化热解方程系数（不一定对，仅供参考）
问题描述已知（1）生物质热解产生H2 CO CO2 H2 和固定碳（2）生物质的工业分析和元素分析求（1）生物质的分子式（2）生物质热解方程式的系数即求方程式 CxHyOz=aCO+bCO2+cCH4+dH2+eC C_x H_y O_z =a CO + b CO_2 + c CH_4 + d H_2 + e CCxHyOz=aCO+bCO2+cCH4…...
2024/5/5 8:47:20
设计模式：4.代理模式
代理模式代理模式属于结构型模式定义：为其他对象提供一种代理以控制对这个对象的访问代理模式就是在操作原对象的时候，多出来一个代理类，用来对原对象的访问进行控制和替代原对象进行一些操作模式类图角色抽象接口：able，定义业务接口被代理类：Source 代理类：Proxy，…...
2024/5/5 4:51:24
完成导航按键切换桌面屏幕
完成导航按键切换桌面屏幕在切换界面时候，为了保证切换时候导航栏是没有发生改变的，所以新建panel画布，修改panel上面的参数，然后进行展示；主要语句 //移除所有的panel上面所有组件 panel.removeAll(); //创建对象 A a=new A(); //设置对象的具体大小，这个必写不然会不…...
2024/4/24 7:39:33
Spring Bean作用域
Singleton单例模式默认值，当ioc容器一创建就会创建bean的实例，而且是单例的，每次得到的都是同一个 prototype原型模式原型的，当ioc容器创建不在实例化该bean，每次getBean方法时再实例化该bean，每次返回的都是一个新的实例。 request（Http请求）该属性仅对HTTP请求产生…...
2024/4/25 9:50:17
【论文浅读】《Deep Pyramidal Residual Networks for Spectral–Spatial Hyperspectral Image Classification》
创新思想：文章提出了一种专门针对高光谱图像分类(Hyperspectral Image Classification, HSI)问题的深层CNN体系结构，称为高光谱金字塔ResNet结构模型(Hyperspectral Pyramidal ResNet)。这个模型用残差的方法逐渐增加了所有卷积层的特征映射维数，并且在金字塔瓶颈残差块中…...
2024/4/16 19:12:18
Java线程基础、线程之间的共享和协作（二）
认识Java里的线程 Java天生就是多线程一个 Java 程序从 main()方法开始执行，然后按照既定的代码逻辑执行，看似没有其他线程参与，但实际上 Java 程序天生就是多线程程序，因为执行 main()方法的是一个名称为 main 的线程。一个main线程的启动，大概做了以下几个事情：main /…...
2024/4/18 14:56:49
spark sql 之 collect_set collect_list 后WrappedArray 取值
示例：demo数据userId place1001 北京1001 上海spark建立的虚拟表 userPlaceView。根据用户ID进行分组，用collect_set(place)获取place信息。 spark sql 函数查询地址 Dataset<Row> resultDataSet = SqlContext.sql("select userId, collect_set(place) as place …...
2024/4/19 19:14:30
redis 事务
redis事务-不支持回滚理解：就是一个脚本，把命令放在一起，然后执行。（相当于把这个几个命令加锁，中间不会有其他的命令来打扰。）# 标记开始 multi # 添加命令 set a aaa set b aaa set c aaa # 执行事务 exec不支持事务，错误的命令不会让事务停止，正常的命令会继续执行。…...
2024/4/16 19:12:48
优秀开源平台，前后端分离快速开发平台，一站式多端开发（PC+APP）
JNPF平台架构介绍JNPF快速开发平台采用前后端分离技术、采用B/S架构开发，形成一站式开发多端（APP+PC）使用。PC端版本介绍第一个当然是当下热门的.net core了，运行环境为Visual Studio 2017，也可以在IIS上分开部署。主要技术栈前端JS框架：jquery, bootstrap, vueUI框架:bo…...
2024/4/16 19:12:36
学习前端的第二天，感觉依旧良好
列表标签把。。。制成表，以表来显示，整洁、有序无序列表（ul）列表列表列表列表......如：新闻就是没有顺序的有序列表（ol）如：奥运会奖牌排名各列表项按一定顺序排列定义第一第二第三第四......中只能嵌套中可容纳任何元素自定义列表（dl）对术语或名词进行解释和…...
2024/4/16 19:13:42
潜在语义分析（LSA）相关知识
文章目录单词-文本矩阵话题向量空间文本在话题向量空间中的表示从单词向量空间到话题向量空间的线性变换潜在语义分析算法矩阵奇异值(SVD)分解算法非负矩阵(NMF)分解算法基本思想损失函数（1）平方损失（2）散度损失函数迭代学习算法（1）平方损失函数更新法则（2）散度损失函数…...
2024/4/16 19:12:30
不要以为你用了BigDecimal后，计算结果就一定精确了
欢迎关注本人公众号异常再现大家应该都已经知道，涉及到金钱的计算应该使用BigDecimal，没有使用BigDecimal的已经被开除。但是使用了BigDecimal后计算结果就一定是精确的吗？未必。看下面测试 BigDecimal a = new BigDecimal(1.01);BigDecimal b = new BigDecimal(2.02);Bi…...
2024/4/24 7:39:34
jsp自定义标签
自定义标签为什么要学习自定义标签解析标签标签特点仿写c标签总结为什么要学习自定义标签 C标签相对于我们平常要做的一些项目不够灵活在这些标签不能满足我们代码所需的一些要求了，这个时候就需要自己去定义了例如：当我们在做增删改查时有很多代码是重复的，而且由于代码…...
2024/4/24 7:39:30
create-react-app proxy代理配置
文章参考react中代理异常proxy is not a function 官方给出poxy配置文档 http-proxy-middleware npm问题描述昨天给同学讲解ajax的时候，使用自己的服务器模拟了一个json数据，但是出现了跨域的问题，然后快速的找到了一些方法，但是最终没有解决，写个博客，方便后续自己学习…...
2024/4/24 7:39:29
CentOS7修改IP地址后无法ping通问题记录
CentOS7修改IP地址后无法ping通问题记录在键入ifconfig enp0s3 192.168.56.2后，在cmd中无法ping通此IP地址解决办法：键入sudo ifconfig enp0s3 192.168.56.2...
2024/4/24 7:39:28
SpringMVC(五):结果跳转方式
ModelAndView 设置ModelAndView对象 , 根据view的名称 , 和视图解析器跳到指定的页面 . 页面 : {视图解析器前缀} + viewName +{视图解析器后缀}  <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"id=…...
2024/4/24 7:39:27

CSS3渐变、过渡、2D、3D和动画

渐变

过渡（较重要的属性）

2D

3D

动画

animation

相关文章

最新文章