阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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的教程都有!

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

      目录
      本文目录
      目录