content: ‘德’;
background-color: lightskyblue;
}
div::before {
content: ‘道’;
background-color: mediumaquamarine;
}
伪元素字体图标
p {
position: relative;
width: 220px;
height: 22px;
border: 1px solid lightseagreen;
margin: 60px;
}
p::after {
content: ‘\ea50’;
font-family: ‘icomoon’;
position: absolute;
top: -1px;
right: 10px;
}
「4. 2D 转换之translate」
-
2D转换
-
- 2D转换是改变标签在二维平面上的位置和形状
-
移动:translate
-
旋转:rotate
-
缩放:scale
-
translate语法
-
- x就是X轴上水平移动
-
y就是y轴上水平移动
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
-
重点知识点
-
- 2D的移动主要是指水平、垂直方向上的移动
-
translate最大的优点就是不影响其他元素的位置
-
translate中的100%单位,是相对于本身的宽度和高度来进行计算的
-
行内标签没有效果
div {
background-color: lightseagreen;
width: 200px;
height: 100px;
/* 平移 */
/* 水平垂直移动 100px */
/* transform: translate(100px, 100px); */
/* 水平移动 100px */
/* transform: translate(100px, 0) */
/* 垂直移动 100px */
/* transform: translate(0, 100px) */
/* 水平移动 100px */
/* transform: translateX(100px); */
/* 垂直移动 100px */
transform: translateY(100px);
/百分比用法/
transform: translateY(100%);
}
让一个盒子水平垂直居中
div {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
/* 1. 我们tranlate里面的参数是可以用 % */
/* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
/* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
/* transform: translateX(50%); */
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: purple;
/1.* margin-top: -100px;
margin-left: -100px; */
/2.* translate(-50%, -50%)
盒子往上走自己高度的一半 */
transform: translate(-50%, -50%);
}
span {
/* translate 对于行内元素是无效的 */
transform: translate(300px, 300px);
}
「5. 2D 转换之rotate」
-
rotate 旋转
-
- 2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转
/* 单位是:deg */
img:hover {
transform: rotate(360deg)
}
-
rotate语法
-
rotate
里面跟度数,单位是deg
-
角度为正时,顺时针,角度为负时,逆时针
-
默认旋转的中心点是元素的中心点
-
设置元素旋转的中心的(transform-origin)
transform-origin: x y;
-
注意
-
- 后面的参数 x 和 y 用空格隔开
-
x y 默认旋转的中心点是元素的中心(50% 50%),等价于center center
-
还可以给x y 设置像素或者方位名词(top、bottom、left、right、center)
「6. 2D 转换之scale」
- scale的作用:用来控制元素的放大与缩小
transform: scale(x, y)
-
知识要点:
-
- 注意,x与y之间用逗号进行分隔
-
transform: scale(1, 1)
: 宽高都放大一倍,相当于没有放大 -
transform: scale(2, 2)
: 宽和高都放大了二倍 -
transform: scale(2)
: 如果只写了一个参数,第二个参数就和第一个参数一致 -
transform:scale(0.5, 0.5)
: 缩小 -
scale
最大的优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子
div:hover {
/* 注意,数字是倍数的含义,所以不需要加单位 */
/* transform: scale(2, 2) */
/* 实现等比缩放,同时修改宽与高 */
/* transform: scale(2) */
/* 小于 1 就等于缩放*/
transform: scale(0.5, 0.5)
}
「7. 2D 转换综合写法以及顺序问题」
知识要点
-
同时使用多个转换,其格式为
transform: translate() rotate() scale()
-
顺序会影响到转换的效果(先旋转会改变坐标轴方向)
-
当我们同时有位置或者其他属性的时候,要将位移放到最前面
div:hover {
transform: translate(200px, 0) rotate(360deg) scale(1.2)
}
动画(animation)
**「动画」**是CSS3中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果。
「动画的使用」
-
先定义动画
-
再调用定义好的动画
/1. 定义动画/
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
「动画序列」
-
0% 是动画的开始,100 % 是动画的完成,这样的规则就是动画序列
-
在 @keyframs中规定某项 CSS 样式,就由创建当前样式逐渐改为新样式的动画效果
-
动画是使元素从一个样式逐渐变化为另一个样式的效果,可以改变任意多的样式任意多的次数
-
用百分比来规定变化发生的时间,或用
from
和to
,等同于 0% 和 100%
「动画常见属性」
div {
width: 100px;
height: 100px;
background-color: aquamarine;
/* 动画名称 */
animation-name: move;
/* 动画花费时长 */
animation-duration: 2s;
/* 动画速度曲线 */
animation-timing-function: ease-in-out;
/* 动画等待多长时间执行 */
animation-delay: 2s;
/* 规定动画播放次数 infinite: 无限循环 */
animation-iteration-count: infinite;
/* 是否逆行播放 */
animation-direction: alternate;
/* 动画结束之后的状态 */
animation-fill-mode: forwards;
}
div:hover {
/* 规定动画是否暂停或者播放 */
animation-play-state: paused;
}
「动画简写方式」
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode
知识要点
-
简写属性里面不包含
animation-paly-state
-
暂停动画
animation-paly-state: paused
; 经常和鼠标经过等其他配合使用 -
要想动画走回来,而不是直接调回来:
animation-direction: alternate
-
盒子动画结束后,停在结束位置:
animation-fill-mode: forwards
animation: move 2s linear 1s infinite alternate forwards;
「速度曲线细节」
animation-timing-function
: 规定动画的速度曲线,默认是ease
/打字机效果/
div {
width: 0px;
height: 50px;
line-height: 50px;
white-space: nowrap;
overflow: hidden;
background-color: aquamarine;
animation: move 4s steps(24) forwards;
}
@keyframes move {
0% {
width: 0px;
}
100% {
width: 480px;
}
}
CSS 过渡transition
通过过渡transition,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。
深入理解CSS过渡transition
https://www.cnblogs.com/xiaohuochai/p/5347930.html
「定义」过渡transition是一个复合属性,包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果。
transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)
.test{
height: 100px;
width: 100px;
background-color: pink;
transition-duration: 3s;
/* 以下三值为默认值,稍后会详细介绍 */
transition-property: all;
transition-timing-function: ease;
transition-delay: 0s;
}
.test:hover{
width: 500px;
}
<div class="test"></div>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qMf9QKF2-1614129598273)(Untitled.assets/640)]](https://img-blog.csdnimg.cn/img_convert/b2de8a86768d5775a8c0b09db721ae1d.gif#pic_center)
**「复合属性」** 过渡transition的这四个子属性只有是必需且不能为0。其中,和都是时间。当两个时间同时出现时,第一个是,第二个是;当只有一个时间时,它是,而为默认值0s
* **注意:**
* * transition的这四个子属性之间不能用逗号隔开,只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值,多值部分稍后介绍);而空格隔开的代表不同属性的四个关于过渡的子属性。
.test{
height: 100px;
width: 100px;
background-color: pink;
/*代表持续时间为2s,延迟时间为默认值0s*/
transition;2s;
}
.test:hover{
width: 500px;
}
<div class="test"></div>
`延迟时间delay 案例`
.test{
height: 100px;
width: 100px;
background-color: pink;
/*代表持续时间为1s,延迟时间为2s*/
transition: 1s 2s;
}
.test:hover{
width: 500px;
}
<div class="test"></div>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C5PFyFPk-1614129598275)(Untitled.assets/640)]](https://img-blog.csdnimg.cn/img_convert/2e32a51751eb569807377048ae744b83.gif#pic_center)
**「过渡属性」**
* 值: none | all | \[,\]
* 初始值: all
* 应用于: 所有元素
* 继承性: 无
none: 没有指定任何样式
all: 默认值,表示指定元素所有支持transition-property属性的样式
<transition-property>: 可过渡的样式,可用逗号分开写多个样式
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tkXIlJgQ-1614129598276)(Untitled.assets/640)]](https://img-blog.csdnimg.cn/img_convert/3653de48f5f44794aa2b67ad292003d1.gif#pic_center)
**「过渡持续时间」**
* 值: \[,\]\*
* 初始值: 0s
* 应用于: 所有元素
* 继承性: 无
* \[注意\]该属性不能为负值
* \[注意\]若该属性为0s则为默认值,若为0则为无效值。所以必须**带单位**
* \[注意\]该值为单值时,即所有过渡属性都对应同样时间;该值为多值时,过渡属性按照顺序对应持续时间
/*DEMO中的过渡属性值*/
transition-property: width,background;
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VkNW9hpm-1614129598276)(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)]](https://img-blog.csdnimg.cn/img_convert/faeb22e2cb1d67db83a9b440899c02c9.gif#pic_center)
**「过渡时间函数」**
**过渡时间函数**用于定义元素过渡属性随时间变化的过渡速度变化效果
* 值: \[,\]\*
* 初始值: **ease**
* 应用于: 所有元素
* 继承性: 无
**「取值」** 过渡时间函数共三种取值,分别是**关键字**、**steps函数**和**bezier函数**
**「关键字」** 其实是bezier函数或steps函数的特殊值
ease: 开始和结束慢,中间快。
linear: 匀速。
ease-in: 开始慢。
ease-out: 结束慢。
ease-in-out: 和ease类似,但比ease幅度大。
* * *
[]( )3D转换
-----------------------------------------------------------------------
### []( )认识3D转换
**「3D的特点」** 近大远小,物体和面遮挡不可见
**「三维坐标系」**
* x 轴:水平向右 – `注意:x 轴右边是正值,左边是负值`
* y 轴:垂直向下 – `注意:y 轴下面是正值,上面是负值`
* z 轴:垂直屏幕 – `注意:往外边的是正值,往里面的是负值`
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z2blcoas-1614129598277)(Untitled.assets/640)]](https://img-blog.csdnimg.cn/20210224093052662.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc0NTA3NQ==,size_16,color_FFFFFF,t_70)
### []( )3D转换
**1\. 3D 转换知识要点**
* `3D` 位移:`translate3d(x, y, z)`
* `3D` 旋转:`rotate3d(x, y, z)`
* `透视` :`perspctive`
* `3D`呈现 `transfrom-style`
**2\. 3D 移动translate3d**
* `3D` 移动就是在 `2D` 移动的基础上多加了一个可以移动的方向,就是 z 轴方向
* `transform: translateX(100px)`:仅仅是在 x 轴上移动
* `transform: translateY(100px)`:仅仅是在 y 轴上移动
* `transform: translateZ(100px)`:仅仅是在 z 轴上移动
* `transform: translate3d(x, y, z)`:其中x、y、z 分别指要移动的轴的方向的距离
* `注意:x, y, z 对应的值不能省略,不需要填写用 0 进行填充`
transform: translate3d(100px, 100px, 100px)
/* 注意:x, y, z 对应的值不能省略,不需要填写用 0 进行填充 */
transform: translate3d(100px, 100px, 0)
### []( )透视perspective
* 知识点讲解
* * 如果想要网页产生 `3D` 效果需要透视(理解成 `3D` 物体投影的 `2D` 平面上)
* 实际上模仿人类的视觉位置,可视为安排一只眼睛去看
* 透视也称为视距,所谓的视距就是人的眼睛到屏幕的距离
* 距离视觉点越近的在电脑平面成像越大,越远成像越小
* 透视的单位是像素
* 知识要点
* * **透视需要写在被视察元素的父盒子上面**
* 注意下方图片
* d:就是视距,视距就是指人的眼睛到屏幕的距离
* z:就是 z 轴,z 轴越大(正值),我们看到的物体就越大
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UXDwhg7T-1614129598278)(Untitled.assets/640)]代码演示](https://img-blog.csdnimg.cn/2021022409320640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc0NTA3NQ==,size_16,color_FFFFFF,t_70)
body {
/*透视需要写在被视察元素的父盒子上面 */
perspective: 1000px;
}
translateZ与perspective的区别
* `perspecitve` 给父级进行设置视距的,`translateZ` 给 子元素进行设置不同的大小
### []( )3D 旋转rotateX
**3D 旋转**指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转
* `语法:`
* * **transform: rotateX(45deg)** – 沿着 x 轴正方向旋转 45 度
* **transform: rotateY(45deg)** – 沿着 y 轴正方向旋转 45 度
* **transform: rotateZ(45deg)** – 沿着 z 轴正方向旋转 45 度
* **transform: rotate3d(x, y, z, 45deg)** – 沿着自定义轴旋转 45 deg 为角度
* `左手法则:`
* * 左手的手拇指指向 x 轴的正方向
* 其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PMaHAGfe-1614129598279)(Untitled.assets/640)]](https://img-blog.csdnimg.cn/20210224093223446.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc0NTA3NQ==,size_16,color_FFFFFF,t_70)
div {
/*透视写在被视察元素的父盒子上面 */
perspective: 300px;
}
/*被观察元素*/
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateX(-45deg)
}
### []( )3D 旋转rotateY
* `左手法则:`
* * 左手的拇指指向 y 轴的正方向
* 其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uqW6Efqj-1614129598279)(Untitled.assets/640)]](https://img-blog.csdnimg.cn/20210224093337743.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc0NTA3NQ==,size_16,color_FFFFFF,t_70)
div {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateY(180deg)
}
### []( )3D 旋转rotateZ
div {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateZ(180deg)
}
**「rotate3d」**
* **transform: rotate3d(x, y, z, deg)** – 沿着自定义轴旋转 deg 为角度
* x, y, z 表示旋转轴的矢量,是标识你是否希望沿着该轴进行旋转,最后一个标识旋转的角度
* * **transform: rotate3d(1, 1, 0, 180deg)** – 沿着对角线旋转 45deg
* **transform: rotate3d(1, 0, 0, 180deg)** – 沿着 x 轴旋转 45deg
div {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
# 最后
**自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。**
**深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。**
**因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。**
![img](https://img-blog.csdnimg.cn/img_convert/5aff5fee061fd8bd548ca691a1ee5593.jpeg)
![](https://img-blog.csdnimg.cn/img_convert/5fe97f9d0d9a48c89369a06f92790460.png)
![](https://img-blog.csdnimg.cn/img_convert/50411c2e635c68b380a36339e211084e.png)
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!**
[**如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!**](https://bbs.csdn.net/topics/618191877)
**由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!**
form: rotateY(180deg)
}
### []( )3D 旋转rotateZ
div {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateZ(180deg)
}
**「rotate3d」**
* **transform: rotate3d(x, y, z, deg)** – 沿着自定义轴旋转 deg 为角度
* x, y, z 表示旋转轴的矢量,是标识你是否希望沿着该轴进行旋转,最后一个标识旋转的角度
* * **transform: rotate3d(1, 1, 0, 180deg)** – 沿着对角线旋转 45deg
* **transform: rotate3d(1, 0, 0, 180deg)** – 沿着 x 轴旋转 45deg
div {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
# 最后
**自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。**
**深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。**
**因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。**
[外链图片转存中...(img-RJGQT7s3-1714865854944)]
[外链图片转存中...(img-bsjezif7-1714865854945)]
[外链图片转存中...(img-YXvb7KW7-1714865854945)]
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!**
[**如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!**](https://bbs.csdn.net/topics/618191877)
**由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!**