zoukankan      html  css  js  c++  java
  • 使用SVG + CSS实现动态霓虹灯文字效果

    效果图:

    原理:多个SVG描边动画使用不同的animation-delay即可!

    对于一个形状SVG元素或文本SVG元素,可以使用stroke-dasharray来控制描边的间隔样式,并且可以用stroke-dashoffset来控制描边的偏移量,借此可以实现描边动画效果,更具体的资料可以看看张大神的《纯CSS实现帅气的SVG路径描边动画效果

    我们先实现一个简单的文字描边动画:

    <svg width="100%" height="100">
        <text text-anchor="middle" x="50%" y="50%" class="text">
            segmentfault.com
        </text>
    </svg> 
    .text{
        font-size: 64px;
        font-weight: bold;
        text-transform: uppercase;
        fill: none;
        stroke: #3498db;
        stroke-width: 2px;
        stroke-dasharray: 90 310;
        animation: stroke 6s infinite linear;
    }
    @keyframes stroke {
      100% {
        stroke-dashoffset: -400;
      }
    }

    演示地址:http://output.jsbin.com/demic...

    然后我们同时使用多个描边动画,并设置不同的animation-delay:

    <svg width="100%" height="100">
        <text text-anchor="middle" x="50%" y="50%" class="text text-1">
            segmentfault.com
        </text>
        <text text-anchor="middle" x="50%" y="50%" class="text text-2">
            segmentfault.com
        </text>
        <text text-anchor="middle" x="50%" y="50%" class="text text-3">
            segmentfault.com
        </text>
        <text text-anchor="middle" x="50%" y="50%" class="text text-4">
            segmentfault.com
        </text>
    </svg> 

    注意:要使用多少种颜色,就放多少个text

    .text{
        font-size: 64px;
        font-weight: bold;
        text-transform: uppercase;
        fill: none;
        stroke-width: 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;
      }
    }

    大功告成,演示地址:http://output.jsbin.com/vuyuv...

    需要注意的几个点:

    1. 各个元素的animation-delay与animation的总时长的设置要协调
    2. stroke-dashoffset与stroke-dasharray的设置要协调

    转自:https://segmentfault.com/a/1190000010963326

  • 相关阅读:
    每天一个linux命令:head(15)
    用设计模式来替代if-else
    每天一个linux命令:less(14)
    每天一个linux命令:more(13)
    每天一个linux命令:nl(12)
    CDN是什么鬼
    ajax跨域问题
    PDO和MySQLi区别与选择?
    php 依赖注入 和 控制反转 php设计模式
    理解 PHP 依赖注入
  • 原文地址:https://www.cnblogs.com/sghy/p/7473249.html
Copyright © 2011-2022 走看看