zoukankan      html  css  js  c++  java
  • svg文字霓虹灯效果

      

    <svg width="100%" height="100">
        <text text-anchor="middle" x="50%" y="50%" class="text text-1">
            你好,打工人
        </text>
        <text text-anchor="middle" x="50%" y="50%" class="text text-2">
            你好,打工人
        </text>
        <text text-anchor="middle" x="50%" y="50%" class="text text-3">
            你好,打工人
        </text>
        <text text-anchor="middle" x="50%" y="50%" class="text text-4">
            你好,打工人
        </text>
    </svg> 
    .text{
        font-size: 64px;
        font-weight: bold;
        text-transform: uppercase;
        fill: none;
        stroke- 2px;
        stroke-dasharray: 90 310;
        animation: stroke 6s infinite linear;
    }
    .text-1{
        stroke: #3498db;
        text-shadow: 0 0 5px #3498db;
        animation-delay: -1.5s;
    }
    .text-2{
        stroke: #f39c12;
        text-shadow: 0 0 5px #f39c12;
        animation-delay: -3s;
    }
    .text-3{
        stroke: #e74c3c;
        text-shadow: 0 0 5px #e74c3c;
        animation-delay: -4.5s;
    }
    .text-4{
        stroke: #9b59b6;
        text-shadow: 0 0 5px #9b59b6;
        animation-delay: -6s;
    }
    
    @keyframes stroke {
      100% {
        stroke-dashoffset: -400;
      }
    }
  • 相关阅读:
    PHPStorm 支持 Element UI 语法提示
    npm
    谷歌浏览器插件
    RBAC
    git 知识点
    Laradock ppa加速
    vscode插件
    临时解决执行 Composer Install 返回 Killed 的问题
    单例设计模式(3种实现方式)
    log4j.properties 详解与配置步骤
  • 原文地址:https://www.cnblogs.com/djjlovedjj/p/13903290.html
Copyright © 2011-2022 走看看