zoukankan      html  css  js  c++  java
  • 纯css实现

    实现此效果

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .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;
    }

    .colorful span {
    color: #E16132;
    margin-right: 5px;
    text-decoration: none;
    padding: 3px 0;
    }

    @-webkit-keyframes bgp {
    0% {
    background-position: 0 0;
    }
    100% {
    background-position: -100% 0;
    }
    }
    </style>
    </head>

    <body>
    <p class="colorful ovh">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>10</span>
    <span>11</span>
    <span>12</span>
    <span>13</span>
    <span>14</span>
    <span>15</span>
    <span>16</span>
    <span>17</span>
    <span>18</span>
    <span>19</span>
    <span>20</span>
    </p>
    </body>

    </html>

     

     

  • 相关阅读:
    一个比较日期大小的javascript函数
    导出Excel(利用xml标记)
    Oracle 数据库的备份与恢复
    总是浮在页面底部的广告DIV
    实用批处理文件 (IP设置.bat, 清理系统垃圾.bat, atc.)
    【转:来源不详】几家IT公司面试全揭秘
    二级联动(javascript Array)
    JS实现定时循环上翻
    ORACLE函数大全 [转]
    C#中Timer类与线程
  • 原文地址:https://www.cnblogs.com/hill-foryou/p/8989942.html
Copyright © 2011-2022 走看看