CSS 学习笔记 day08 2-21-4-13

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;

5.4 特殊样式

6.1 流式布局（百分比布局）