弹幕组件-文字闪烁效果

作者: skoll | 来源:发表于2021-12-30 14:10 被阅读0次

弹幕组件-文字闪烁效果
弹幕组件（一）
iOS 弹幕效果
vue写一个简单的弹幕动效
弹幕组件
结合el-tooltips组件二次封装只针对溢出的文字省略号并t
弹幕效果
弹幕发展
FBShimmering文字闪烁效果实现解析
UILabel文字颜色渐变和闪烁效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/animejs/3.2.0/anime.min.js"></script>
    <style>
        .text-all{
            font-size: 64px;
            font-weight: bold;
            text-transform: uppercase;
            fill: none;
            stroke-dasharray: 50 100;
            stroke-width: 2px;
        }
        .text{
            stroke: #f44336;
            animation: stroke 6s infinite linear forwards;
        }

        .text1{
            stroke:#e91e63;
            animation: stroke 6s -1s infinite linear;
        }
        .text2{
            stroke: #9c27b0;
            animation: stroke 6s -2s infinite linear;
        }
        .text3{
            stroke: #2196f3;
            animation: stroke 6s -3s infinite linear;
        }
        .text4{
            stroke:#ffeb3b;
            animation: stroke 6s -4s infinite linear;
        }
        @keyframes stroke {
            100% {
                stroke-dashoffset:-400;
            }
        }
    </style>
</head>
<body>
    <svg style="width:100vw;height:90vh" id="svg">
        <text x="10%" y="35%" class="text text-all">我</text>
        <text x="10%" y="35%" class="text1 text-all">我</text>
        <text x="10%" y="35%" class="text2 text-all">我</text>
        <text x="10%" y="35%" class="text3 text-all">我</text>
        <text x="10%" y="35%" class="text4 text-all">我</text>

        
        <text x="30%" y="35%" class="text text-all">菲</text>
        <text x="30%" y="35%" class="text1 text-all">菲</text>
        <text x="30%" y="35%" class="text2 text-all">菲</text>


        <text x="60%" y="35%" class="text text-all">飞</text>
        <text x="60%" y="35%" class="text1 text-all">飞</text>
        <text x="60%" y="35%" class="text2 text-all">飞</text>
    </svg>
    <script>
        // anime({
        //     targets:".text-all",
        //     duration:5000,
        //     loop:true
        // })
    </script>
</body>
</html>