18-1 2D 3D 动画 移动端1px细线问题 浏览器12px字体问题

一. 2d

1.过渡效果transition!!!

1.过渡是属性值的变化,是从默认状态到结束状态之间一个变化的过程,过渡需要触发条件,(通常过渡都是添加默认状态,谁做过渡给谁加)
2.transiton:要过渡得属性 花费时间S 运动曲线ease linear 何时开始
3.transition:width 1s,height 1s 1s;这个让高度等1S,

如果用Hover 给定位,那么会一直抖动,因为 是honver得话,只是经过 你过了就没了.

简写:transition: all 1s;

如何让消失渐渐消失?
用display:none; 不能渐渐消失,因为是英文单词得变化.

如果是background-color:rgba(0,0,0,0) 只是让盒子透明,但是里面得内容不会消失
这个时候可以给opacity:0 取值0-1之间得小数,0是内容和盒子完全透明,1 不透明.
改了透明 这个盒子还在,还占位置,还要通过js判断.

1.2. transform2d平移(位移)

1.只写一个值,代表x轴,水平方向,正值向右,负值向左
2.写2个值,第一个水平方向,第二个值是垂直方向,正值向下,负值向上
3.百分比:唯一参考的是自身的百分比距离

transform:translate(-200px)
transform:translate(100px,100px)
transform:translate(10%,10%)

1.3. transform:translate(-50%,-50%)居中

1.需要配合定位
2.transform:translate(-50%,-50%),两个方向都是走自身的5-%,参考的是自己的宽高
3.好处就是不需要计算了,之前的定位margin需要计算父元素的一半很麻烦

.son,
      .sunzi {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

1.4. transform:rotate(60deg)旋转rotate

.box:hover {
        transform: rotate(90deg);
      }

1.5. transform-origin:(x y)旋转基准点

数值用空格 ,隔开.
1.可以给方位值:left,right,center,top ,bottom
随意混合使用(left center),(right center)
2.可以写具体的值:50px 100px;
transform-origin:20px 20px;第一个值是x轴距离,第二个是y轴距离
如果是负值,那就是反方向,旋转基准点会出了盒子的范围

1.6. transform:scale(2)缩放

transform:scale(2),大于1就是放大,0-1就是缩小
只写一个值,宽高等比例缩放
写两个值,第一个是宽度缩放的倍数,第二个是高度缩放倍数

1.7. 进度条案例

.box {
        width: 300px;
        height: 20px;
        border: 1px solid #333;
      }
      .box1 {
        width: 0;
        height: 100%;
        transition: all 1s;
      }
      .box:hover .box1 {
        width: 70%;
        background-color: red;
      }

1.8 scale解决移动端1px细线问题

w:200px;
h:200px;
border:1px solid #ccc;
transform:scale(0.5)

transform:scale(0.5):让边框变细,这个时候2倍图的这个盒子大小不要除以2了,
不然你先2倍图除以2 ,然后又缩放0.5倍.这样不行

1.9 scale解决谷歌浏览器12px字体大小问题

1.我们都知道最小字体是12px,那我们想让字体缩小可以用scale
2.transform:sclae(0.5) 但是这样会让整个盒子缩小,因此我们需要把文字单独用span包起来,注意所有的transform属性对行内元素无效!所以需要转换inline-block.

1.91 转换连写

注意:顺序不能更换,因为浏览器是按照前后排列顺序来解析的

ransform: translate(700px, 0) rotate(900deg) scale(1.2);

皮球滚动案例:

.father {
        width: 1000px;
        height: 1000px;
        background-color: gray;
      }
      .son {
        width: 0;
        height: 0;
        border-width: 40px;
        border-style: solid;
        border-color: skyblue pink yellowgreen royalblue;
        border-radius: 50%;
        transition: all 2s;
        transform-origin: bottom right;
      }
      .father:hover .son {
        transform: translate(700px, 0) rotate(900deg) scale(1.2);
      }

2. 3d

2.1 3d位移

1.一定要下先给透视,才能生效

 body {
        perspective: 800px;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin-left: 300px;
        margin-top: 100px;
        transition: all 1s;
      }
      .box:hover {
        transform: translate3d(100px, 100px, 200px);
      }

2.1 3d旋转

.father {
        overflow: hidden;
        perspective: 600px;
        width: 1000px;
        height: 1000px;
        background-color: gray;
      }
      .box {
        width: 0;
        height: 0;
        border-width: 100px;
        border-style: solid;
        border-color: pink yellowgreen skyblue yellow;
        margin-top: 100px;
        margin-left: 100px;
        transition: all 3s;
      }
      .father:hover .box {
        transform: rotateX(60deg);
        transform: rotateY(60deg);
        transform: rotateZ(60deg);
      }

3.动画

3.1过渡动画和动画的区别

1.transition过渡动画:需要触发条件,只能播放一次
2.animation动画,不需要触发条件,页面打开就能播放,可以循环播放

3.2.动画

@keyframes name{
		from
}