css 字体库和动画

@font-face {
    font-family:'WebSymbols';
    src: url('../font/WebSymbols-Regular.otf');
}

.icon{
    font-family: "WebSymbols";
}

字体库WebSymbols-Regular的地址：https://pan.baidu.com/s/1WgRdbBXrAbZpHURD9yQ1EA；码：mvq9

/*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: 999;
}
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;
    }
}

 

转载于:https://www.cnblogs.com/shuaimeng/p/10057068.html