Vue+css好看的动态Footer

abliz_

已于 2023-12-08 11:36:00 修改

阅读量188

点赞数

文章标签： css 前端

于 2023-11-07 16:39:31 首次发布

本文链接：https://blog.csdn.net/weixin_46006743/article/details/134270645

版权

记录一下一个好看的动态颜色变换Footer写法

        <div class="myFooter">
            <div class="footer-title">别后相思空一水，重来回首已三生。</div>
            <div class="icp">© 2023 生活倒影 新 XXXX-XXXX / 公安备123456789</div>
        </div>

.myFooter {
    height: 120px;
    border-radius: 10px;
    font-family: MYFONT;   //自定义字体
    font-size: 18px;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: colorChange 3s infinite linear;
}

@keyframes colorChange {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}