阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    CSS 清晰风动态渐变背景

    小清新风格的动态渐变背景;

    用在顶部 Tips,做全站提示;

    DEMO 如下

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .devcon-badge {
                width: 100%;
                position: fixed;
                top: 0;
                height: 45px;
                z-index: 100;
                background: linear-gradient(90deg,#fca09a,#fcccd3,#ffcc9d,#98ddad,#81d7ec,#a0aaed);
                background-size: 200%;
                text-align: center;
                -webkit-animation: GradientAnimation 5s ease infinite;
                -moz-animation: GradientAnimation 5s ease infinite;
                animation: GradientAnimation 5s ease infinite
            }
            .devcon-badge:hover {
                -webkit-animation-duration: 2s;
                -moz-animation-duration: 2s;
                animation-duration: 2s
            }
    
            .devcon-badge a {
                color: #222;
                font-family: monospace;
                text-decoration: none;
                display: block;
                padding: 10px 0
            }
            @-webkit-keyframes GradientAnimation {
                0%,100% {
                    background-position: 0 50%
                }
    
                50% {
                    background-position: 100% 50%
                }
            }
    
            @-moz-keyframes GradientAnimation {
                0%,100% {
                    background-position: 0 50%
                }
    
                50% {
                    background-position: 100% 50%
                }
            }
    
            @keyframes GradientAnimation {
                0%,100% {
                    background-position: 0 50%
                }
    
                50% {
                    background-position: 100% 50%
                }
            }
        </style>
    </head>
    <body>
    <div class="devcon-badge"><a href="https://github.com/zhubangbang/blog">我的博客 https://github.com/zhubangbang/blog</a></div>
    </body>
    </html>
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    本文目录
    目录