随便做的svg动画

?

备忘：

1.

<section  x="0" y="40%" width="100%" style="height:20%;" >
    <svg width="100%" height="100%">
        <rect x="0" y="0" width="100%" height="100%" fill="#ff9902" style="fill: #ff9902;">
            <animate attributeName="y"  from="0" to="-100%"  begin="0s" dur="3s" repeatCount="indefinite" fill="freeze"></animate>
        </rect>
    </svg>
</section>

1. svg 需要设置高度，否则高度可能会超出父元素（百叶窗）

<rect x="0" y="0" width="100%" height="100%" fill="#ff9902" style="fill: #ff9902;">
       <animate attributeName="height"  from="0" to="-100%"  begin="0s" dur="3s" repeatCount="indefinite" fill="freeze"></animate>
</rect>

2. 以上情况下atrributeName = "height"会被微信公众号的富文本编辑器过滤掉（出现在百叶窗那个例子中）

1. 卷轴

2. 百叶窗

3. 弹幕

我是一条弹幕111我是一条弹幕222我是一条弹幕333我是第3条弹幕我是第888条弹幕我是第999条弹幕我是一条很长很长很长的弹幕~~~~~我是一条很长很长很

4.点击看大图

敲我的大脑瓜子看长图

5.左右滑动试试呢？

6.底图不动，字滑动

I met you in a bathroom stall

Kissing up against the wall

Why'd you have to make me fall

Hoping you will tell me where and when

Cause I just wanna do it again

I've known you for a second, but it's more than enough

bathroom stall

Some kind of a record giving all that I've got

I met you in a bathroom stall

bathroom stall

Why'd you have to make me fall

Hoping you will tell me where and when

Cause I just wanna do it again

I've known you for a second, but it's more than enough

Some kind of a record giving all that I've got

7.长按换图

8.转圈

围着我转圈

9.逐行显示(如果没看到效果可以刷新看一下)

归去来兮辞

舟遥遥以轻飏

风飘飘而吹衣。

问征夫以前路,

恨晨光之熹微。

参考链接:

张鑫旭文章:https://www.zhangxinxu.com/wordpress/category/graphic/svg-graphic/

贝塞尔曲线工具：https://www.tweenmax.com.cn/tool/bezier/

打不倒我的，便成了我的铠甲~