transform,transition,@keyframes,

1.文本阴影

text-shadow: 5px 5px 5px #ff0000;
            水平阴影  垂直阴影  模糊距离  阴影颜色

        p {
            font-size: 60px;
            margin-top: 100px;
            margin-left: 100px;
            color: red;
            text-shadow: 10px 10px 10px black;
        }

01.png

2.transform

transform:translate(x,y)                    left：x   top：y
transform:rotate(30deg)                     顺时针旋转30°
transform:scale(x,y)                        宽变为原来的x倍，高度变为原来的y倍。
transform:skew(x,y)                         绕x轴旋转x度，绕y轴旋转y度

transform-style: flat  |  preserve-3d       (preserve: 保存)

flat: 子元素将不保留其3D位置

preserve-3d : 子元素将保留其3D位置

<div1><div2><div3></div></div></div>

对2设置preserve-3d时，div3将保留其3d位置，跟div2一起动，设置为flat时，不保留其3d位置，即div3不会跟父元素div2一起动

3.transition

3.1

        .one{
            width: 200px;
            height: 200px;
            background: yellow;
            transition: width 2s;
            transition-timing-function: ease;
        }
        .one:hover{
            width: 400px;
        }
        .two{
            width: 200px;
            height: 200px;
            background: red;
            transition: width 2s,height 2s,transform 2s;
        }
        .two:hover{
            width: 400px;
            height: 400px;
            transform: rotate(120deg);
        }

transition:width 2s;

>>如果没有这行代码，div会直接变，不会有缓慢变得过程

增加多个变化时，用逗号隔开

3.2 transition-timing-function:linear

        div {
            width: 100px;
            height: 50px;
            background: red;
            color: white;
            font-weight: bold;
            transition: width 2s;
        }

        #div1 {
            transition-timing-function: linear;
        }

        #div2 {
            transition-timing-function: ease;
        }

        #div3 {
            transition-timing-function: ease-in;
        }

        #div4 {
            transition-timing-function: ease-out;
        }

        #div5 {
            transition-timing-function: ease-in-out;
        }

        /* linear                   规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
           ease                     规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
           ease-in                  规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
           ease-out                 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
           ease-in-out              规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
           cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。*/

        div:hover {
            width: 300px;
        }

4.动画

animation：one (名称) 2s(时长) ;

tip：必须规定动画名称和时长

@keyframes（规则）

tip：必须捆绑某个选择器，否则不会产生动画效果。

        .one {
            width: 200px;
            height: 200px;
            background: red;
            animation: one 6s;
        }

        @keyframes one {
            from {
                background: red;
            }
            /* 0%*/
            to {
                background: yellow;
            }
            /* 100% */
        }

        .two {
            width: 200px;
            height: 200px;
            background: red;
            animation: two 6s;
        }

        @keyframes two {
            0% {
                background: red;
            }
            25% {
                background: yellow;
            }
            50% {
                background: green;
            }
            100% {
                background: pink;
            }
        }

        .three {
            width: 200px;
            height: 200px;
            background: red;
            animation: three 6s;
            position: relative;
        }

        @keyframes three {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }

        div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation-name: myfirst;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-play-state: running;
            /* 简写： animation:myfirst 5s linear 2s infinite alternate; */
        }

        /*
        @keyframes               规定动画。  
        animation                所有动画属性的简写属性，除了 animation-play-state 属性。    
        animation-name            规定 @keyframes 动画的名称。  
        animation-duration        规定动画完成一个周期所花费的秒或毫秒。默认是 0。 
        animation-timing-function     规定动画的速度曲线。默认是 "ease"。 
        animation-delay            规定动画何时开始。默认是 0。  
        animation-iteration-count   规定动画被播放的次数。默认是 1。   
        animation-direction        规定动画是否在下一周期逆向地播放。默认是 "normal"。   
        animation-play-state      规定动画是否正在运行或暂停。默认是 "running"。  
        animation-fill-mode        规定对象动画时间之外的状态。 
        */

5.多列

column-count:3; 使文字分成3列

column-gap:30px; 使列之间的间隔为30px；

column-rule: 3px outset #ff0000； 设置列之间的宽度，样式和颜色规则。

    <style>
        .column {
            column-count: 8;
            column-gap: 30px;
            column-rule: 4px dashed #ff0000;
            column-width: 60px;
        }

        /*
        column-style:solid;
        none    定义没有规则。 
        hidden  定义隐藏规则。 
        dotted  定义点状规则。 
        dashed  定义虚线规则。 
        solid   定义实线规则。 
        double  定义双线规则
        groove  定义 3D grooved 规则。该效果取决于宽度和颜色值。  
        ridge   定义 3D ridged 规则。该效果取决于宽度和颜色值。   
        inset   定义 3D inset 规则。该效果取决于宽度和颜色值。    
        outset  定义 3D outset 规则。该效果取决于宽度和颜色值。   

        */
    </style>

02.png
03.png