3.Web服务器
4. 2D转换
/*x就是x轴上移动位置 y就是y轴上移动位置*/
transform: translate(100px,100px);
重点:
定义2D转换中的移动,沿着x和y轴移动元素
translate最大的优点:不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%)
对行内标签没有效果
4.3 2D转换之旋转 rotate
transform:rotate
重点:
rotate里面跟度数,单位是deg 比如rotate(45deg)
角度为正时,顺时针,负时,为逆时针
默认旋转的中心点是元素的中心点
img{
width: 150px;
border-radius: 50%;
border: 5px solid skyblue;
/* 过渡写到本身上,谁做动作给谁加*/
transition: all 0.3s;
}
img:hover{
/*顺时针旋转360度*/
transform: rotate(360deg);
}
4.4 2D转换中心点 transform-origin
重点:
注意后面的参数x和y用空格隔开
x ,y 默认转换的中心点是元素的中心点(50%,50%)
还可以给x,y设置像素或者方位名词(top bottom left right center)
/*1.可以跟方位名词*/
/*transform-origin: left bottom;*/
/* 2.默认是50% 50% 等价于center center*/
/* 3.可以是px像素*/
transform-origin: 100px 100px;
旋转特效案例
div{
width: 100px;
height: 100px;
border: 1px solid #000;
overflow: hidden;
}
div::after{
content:"";
width: 100px;
height: 100px;
background-color: pink;
transform: rotate(90deg);
display: block;
transform-origin: left bottom;
}
div:hover::after{
transform: rotate(0);
transition: all 0.5s;
}
4.5 2D转换之缩放scale
transform:scale(x,y)
注意:
- 注意其中的x和y用逗号分隔
- transform:scale(1,1):宽和高都放大一倍,相对于没有放大
- transform:scale(2,2):宽和高都放大了2倍
- transfrom:scale(2):只写一个参数,第二个参数和第一个参数一样,相当于scale(2,2)
- transform:scale(0.5,0.5):缩小
- scale缩放的最大优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
4.6 2D转换综合写法
注意:
1.同时使用多个转换,其格式为:transform:translate()rotate()scale()…等
2.其顺序会影响旋转的效果(先旋转会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候,记得要将位移放到最前
5.动画
1.用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称 {
0% {
width: 100px
}
100% {
width: 200px
}
}
div{
/*2.调用动画*/
animation-name: move;
/*持续时间*/
animation-duration: 2s
}
动画序列
1.可以做多个状态的变化 keyframe 关键帧
2.里面的百分比要是整数
3.里面的百分比就是 总的时间(我们这个案例10s)的划分
5.3 动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态
利用步长实现奔跑的熊大案例
/*我们元素可以添加多个动画,用逗号分隔*/
animation: move 0.7s steps(3) infinite, run 3s linear forwards;
}
@keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: -402px 0;
}
}
@keyframes run {
0% {
left: 0;
}
100% {
left: 50%;
transform: translate(-50%, 0);
}
}
6. 3D转换
6.3透视perspective
在2D平面产生近大远小视觉立体,但是只是效果二维的
- 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面上)
- 模拟人类的视觉位置,可认为安排一只眼睛去看
- 透视我们也称为视距:视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大,越远成像越小
- 透视的单位是像素
透视写到被观察元素的父盒子上
对于元素旋转的方向的判断 我们需要先学习一个左手准则
左手准则
- 左手的手拇指指向x轴的正方形
- 其余手指的弯曲方向就是该元素沿着x轴旋转的方向
6.6 3D呈现transform-style
- 控制子元素是否开启三维立体环境
- transform-style:flat子元素不开启3d立体空间 默认的
- transform-style:preserve-3d;子元素开启立体空间
- 代码写给父级,但是影响的是子盒子
- 这个属性很重要,后面必用
7.浏览器私有前缀
视口
视口就是浏览器显示页面内容的屏幕区域,视口可以分为布局视口,视觉视口和理想视口
2.5 meta视口标签
width 宽度设置的是viewport宽度,可以设置device-width特殊值
initial-scale 初始缩放比,大于0的数字
maximum-scale 最大缩放比,大于0的数字
minimum-scale 最小缩放比,大于0的数字
user-scalable 用户是否可以缩放,yes or no (1或0)
3.1物理像素&物理像素比
- 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了
- 我们开发时候的1px不是一定等于1个物理像素的
- PC端页面,1个px等于1个物理像素的,但是移动端就不尽相同
- 一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比
3.3 背景缩放 background-size
width: 500px;
height: 500px;
border: 2px solid red;
background: url("img/img.png") no-repeat;
/*background-size:图片的宽度 图片的高度*/
/*background-size:500px 200px*/
/*1.只写一个参数 肯定是宽度 高度省略了 会等比例缩放*/
/*background-size:500px*/
/*2.里面的单位可以跟% 相当于父盒子来说*/
/*background-size: 50% 500%;*/
/*3.cover 要完全覆盖div盒子 可能有部分背景显示不全*/
/*background-size: cover;*/
/*4.contain 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了*/
background-size: contain;