CSS——其他

目录

服务器字体

动画

文字连续光影

---

服务器字体

<style>
        /* 服务器字体 */
        div{
            color: red;
            font-size: 20px;
            font-family: aaa;
        }
         /* 服务器字体的定义语法 */

         @font-face {
            font-family: aaa; /* 用于定义服务器字体的名字 */
            src: url("font/SanJiPoMoTi-2.ttf") format(TrueType); /* 设置字体资源及格式 */
            /* format() 用于指定该字体的格式  TrueType(xx.ttf)  OpenType(xx.otf) */
        }

        span{
            color: pink;
            font-size: 20px;
            font-family: bbb;
        }
        @font-face {
            font-family: bbb;
            src: url("font/ZhiMangXing-Regular.ttf") format(TrueType);
        }
        
        p{
            color: purple;
            font-size: 20px;
            font-family: ccc;
        }
        @font-face {
            font-family: ccc;
            src: url("font/BoTa-2.otf") format(OpenType);
        }
    </style>

动画

过度动画
transition 复合属性
transition-property:对html元素中哪个属性进行渐变处理
transition-duration:渐变的持续时间
transition-timing-function:渐变的变化函数
        ease由蛮到快，达到最大速度变慢
        ease-in:由慢到快
        ease-out:由快到慢
        linear:匀速

帧动画
animation  复合属性
animation-name: 设置动画的名称;
animation-duration: 动画持续的时间;
animation-timing-function: 设置动画的变化函数;
        ease由蛮到快，达到最大速度变慢
        ease-in:由慢到快
        ease-out:由快到慢
        linear:匀速
animation-delay: 设置动画的延迟时间;
animation-iteration-count: 执行动画的次数;  infinite无限次执行
animation-direction: 设置动画执行的方向;  alternate交替执行

<style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            animation-name: aaa;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 3s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        /* 定义动画 */
        @keyframes aaa{
            /* from|to|百分数{}  */
            30% {
                width: 200px;
                height: 300px;
                background: blue;
            }
            70% {
                width: 500px;
                height: 400px;
                background: purple;
            }
            100% {
                width: 600px;
                height: 600px;
                background: yellow;
            }
        }

        div:hover{
            width: 200px;
            height: 300px;
            background: yellow;
        }
    </style>

文字连续光影

<style>
        body{
            background: black;
        }

        div{
            /* 文字居中 */
            text-align: center;
        }

        span{
            font-size: 300px;
            color: pink;
            font-family: bbb;
            font-weight: 600;  /* 字体加粗 */
            animation: aaa 1.5s linear infinite alternate;
        }

        div span:nth-child(2){
            animation-delay: 0.2s;
        }

        div span:nth-child(3){
            animation-delay: 0.3s;
        }

        div span:nth-child(4){
            animation-delay: 0.4s;
        }

        div span:nth-child(5){
            animation-delay: 0.5s;
        }

        @keyframes aaa{
            to{
                color: rgb(125,224,237);
                text-shadow: 16px 0px 16px palegoldenrod;
            }
        }

        @font-face {
            font-family: bbb;
            src: url("font/ZhiMangXing-Regular.ttf") format(TrueType);
        }
    </style>