zoukankan      html  css  js  c++  java
  • 非常炫的文字效果


    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
      <meta charset="utf-8">  
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
      <title>非常炫的文字效果</title>  
      <style>  
        .colorful a {
          color: #E16132;
          margin-right: 5px;
          text-decoration: none;
          padding: 3px 0;
        }
    
        @supports (-webkit-transform: scale(0)) {
          .colorful {
            /*-webkit-mask-image: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);*/
            background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              -webkit-background-size: 200% 100%;
              animation: bgp 5s infinite linear;
          }
        }
        @-webkit-keyframes bgp {
            0%  { background-position: 0 0;}
            100% { background-position: -100% 0;}
        }
      </style>  
    </head>  
    <body>  
    <p class="colorful ovh">
      <a href="https://blog.csdn.net/xutongbao" class="btn" target="_blank">徐同保</a>
      <a href="#" class="btn" target="_blank">京东自营</a>
      <a href="#" class="btn" target="_blank">当当自营</a>
      <a href="#" class="btn" target="_blank">亚马逊</a>
      <a href="#" class="btn" target="_blank">异步社区</a>
    </p>
      
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>   
    </body>  
    </html>



    备注:欢迎加入web前端求职招聘qq群:668352707




  • 相关阅读:
    android C native测试程序example Android.bp
    C 代码中嵌入汇编(ARM)
    usb device connect kernel log
    MAP_FIXED标志的疑惑
    c misc
    iOS逆向工程
    Demo大全
    iOS开发之文件解压缩库--SSZipArchive
    有时间部分需要了解的架构
    Mac下常用Tool
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924854.html
Copyright © 2011-2022 走看看