@font-face {

    font-family:'WebSymbols';

    src: url('../font/WebSymbols-Regular.otf');

}

.icon{

    font-family: "WebSymbols";

}

/*1. font-face 字体库的引用

2. z-index 层级 只能配合position使用

3. text-shadow/box-shadow  文本/盒子阴影(水平 垂直 放大 颜色)
text-shadow: 3px 3px 5px #777;

动画

4. animation

5. transition 过渡属性

6. transform 形状/元素的变化 */

li{

    position: relative;

}

ul li:hover{

    transform: scale(1.1);

    border-color: #000;

    box-shadow: 3px 3px 20px red;

    z-index:;

}

ul li:hover .icon{

    /*font-size: 60px;*/

    /*transform: translateY(0);*/

    color: #000;

    animation: move 0.3s ease;

}

ul li:hover .main{

    color: #000;

    animation: move 0.3s ease;

}

@keyframes move{

    0%{

        /*font-size: 40px;*/

        transform: translateY(100%) scale(0.5);

    }

    100%{

        /*font-size: 60px;*/

        transform: translateY(0px) scale(1);

        color: #000;

    }

}