Cssr日记2

~昨日补充：
一：-2D转换综合写法：设置盒子先移动后旋转，同时有位移和其他属性，位移 放前。

<style>
        div{
            width: 200px;
            height: 200px;
            transition: all 1s;
            background-color: brown;
        }

        div:hover{
            transform: translate(50px,50px) rotate(180deg)
        }
    </style>

注意：如果先旋转再移动 会出现偏差（改变坐标轴的方向）
二：input属性 value与placeholder的区别
placeholder在input中只是充当占位符的角色，在你input框中的value为空的时候它才会显示出来，但是它本身并不是value，也不会被表单提交。
三：居中
(1)定位让盒子居中
position:absolute;
top:50%;
left:50%
margin-top:-自身高度一半px;
margin-left:-自身宽度一半px;

（2）利用transform居中
transform(百分比，百分比)其中的百分比是按照自身的长宽。

position:absolute;
top:50%;
left:50%
transform:translate(-50%，-50%);

1.动画基础（ @keyframes move）
（1）定义动画
（2）调用动画

    <style>
        /* 我想要业面一打开，一个盒子从左边到右边 */
        /* 1.定义动画 */
        @keyframes move{
            0%{
                /* 开始状态 */
                transform:translateX(0px);
            }
            100%{
                /* 结束状态 */
                transform:translatex(1000px);
            }
        }

        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 元素使用动画：1.调用名称  2.设置持续时间 */
            animation-name: move;
            animation-duration: 2s;
        }
    </style>

(3)动画序列：
1.from to等价于上述的0%~100%
2.可设置多过程 **百分比是时间的划分

     <style>
       /* 1.定义动画 */
        @keyframes move{
            0%{
                /* 开始状态 */
                transform:translate(0,0);
            }
            25%{
                transform:translate(1000px,0);
            }
            50%{
                /* 结束状态 */
                transform:translate(1000px,500px);
            }
            75%{
                transform:translate(0,500px);
            }
            100%{
                transform:translate(0,0);
            }
        }

        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 元素使用动画：1.调用名称  2.设置持续时间 */
            animation-name: move;
            animation-duration: 2s;
        }
    </style>

3.动画常用属性

**属性速度曲线：

其中的step可以实现打字效果

<style>
        div{
            font-size: 15px;
            height: 20px;
            width:0px;
            background-color: pink;
            /* white-space: nowrap;   强制在一行显示不要也可 */
            /* 设置了字数大小15px,steps设置了10步因为是个字数 */
            animation: mover 4s steps(10) forwards;
            overflow: hidden;
        }
        @keyframes mover
         {
            0%{
                width: 0px;

            }
            100%{
                width: 150px;
            }
         }
</style>

二、3D转换
translate3d(x,y,z):与透视一起运用
*补充昨日学习：translateX(100px) 下一行translateY(100px);不会实现X,Y两轴都改变，指挥改变后面的一个轴。

X轴：向右为正
Y轴：向下为正
Z轴：向外为外为正，向里为负

三：透视

注意：透视跟3D转换让突变视觉上的变大变小
视距d:越大看到的图像越小（一般都是加在父盒子上）
z轴：z（正数）越大我们看到的图像就越大

js的学习
1.isNaN()
这个方法来判断非数字，返回一个值，如果是数字返回的是true，如果不是数字返回的是false(容易记反)

console.log(isNaN(12));

2.String类型
(1).字符串类型可以是任意文本，可以单引号’’ 或者是双引号""
(因为html属性使用的是双引号，所以JS更推荐使用单引号)
(2).JS可以用单双的镶嵌
外单内双，外双内单

var strMsg='我是"高富帅"程序猿';
var strMsg2="我是'高富帅'程序猿";

(3)字符的转义跟c语言类似