css的字体和动画如何引用

原创于 2021-05-26 21:25:57 发布 · 111 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了如何使用CSS创建自定义字体库，并展示了如何结合`@font-face`实现WebSymbols字体的应用。同时，详细讲解了CSS动画，包括`transform`、`transition`和`animation`的使用，通过实例演示了元素缩放、阴影和层级变化的效果，帮助读者掌握CSS动态效果的创建技巧。

css 字体库和动画

@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: 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;
    }
}