css额外学习笔记

1、动画：<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
     应用：https://www.cnblogs.com/xiaohuochai/p/7372665.html
     旋转：
         transform: translate(50px,100px);  偏移
         transform: rotate(30deg);  旋转
         transform: scale(2,4);长宽尺寸比例缩放
     transition过度：
         div:hover{padding-left:10px;}
         div{transition: all 1s linear 0s;}
     animate动画：
                css属性
                    animation: myfirst 5s;
                定义动画：
                    示例1：
                    @keyframes myfirst{
                        from {background: red;}
                        to {background: yellow;}
                    }
                    示例2：
                    @keyframes myfirst {
                        0% {background: red;}
                        25% {background: yellow;}
                        50% {background: blue;}
                        100% {background: green;}
                    }
    
2、P标签
            缩进文本：
                    p {text-indent: 5em;}
            省略号....：
                    white-space:nowrap;         //文本不会换行
                    text-overflow:ellipsis; //显示省略符号来代表被修剪的文本
                    overflow:hidden;                //内容会被修剪，并且其余内容是不可见的
     div标签
             display:flex;
             align-items:center;垂直居中
             justify-content: space-around;/center;水平均匀分布/居中
             自动宽度：
                父级：display:flex;
                子级：flex:1;
         
3、input标签
    字符大小写转换：input{text-transform: uppercase;}

4、边框阴影（box-shadow）
    box-shadow: 10px 10px 5px #888888;
                横向偏移  纵向偏移  模糊度  颜色
    文本阴影（text-shadow）
    text-shadow: 5px 5px 5px #FF0000;
    
    
5、自定义字体
    @font-face {
        font-family: myFirstFont;
        src: url('Sansation_Light.ttf'),
        url('Sansation_Light.eot'); /* IE9+ */
    }

    div {
        font-family:myFirstFont;
    }

6、css打字效果：css效果https://www.cnblogs.com/xiaohuochai/p/7521282.html
        html:
            <p>核心思路就是让容器的宽度成为动画</p>
        css:
                 @keyframes typing{0%{0;}}
            @keyframes caret{50%{border-color:transparent;}}
            p{
                17em;
                animation:typing 9s steps(17) infinite ,caret .5s steps(1) infinite;
                white-space: nowrap;
                overflow: hidden;
                border-right:1px solid;
            }