跳动的留言版,效果如下:图片有点大(10m吧?),请耐心等待
原文在这里👉震震震震震震整只手机都在震🤣
代码在这:
<svg xmlns="http://www.w3.org/2000/svg" width="750px" height="50">
<animate attributename="height" begin="0s" dur="0.5s" restart="whenNotActive" values="10;50;10" repeatcount="indefinite" calcmode="discrete"></animate>
</svg>
解释下这段代码:
width="750px" height="50":这是画布的大小,不是很重要
begin="0s":这是开始时间,“0”即为进来就“动”;也可以改成其他数值,即n秒后“动”;也可以把“0s”改成“click”,即为点击后“动”,效果在底部。
dur="0.5s":结束于0.5s后
values="10;50;10":“动”的幅度,可以随意增删,如"10;50;100;50;10"(注意要用英文键盘输入,否则无效)
repeatcount="indefinite":无限重复,把indefinite改成数值1234的话,即为重复n次。
calcmode="discrete":跳动。把discrete改成paced即为匀速运动,效果在底部。
代码怎么使用?
很简单,复制后粘贴到135编辑器(代码模式)
然后再切换回编辑模式
点击【后面插入段落】就可以看到效果了。
懂我意思吧?
详情请阅读👉推动留言板代码|《消灭酸臭味》的教程+模板
下面是我修改后的代码:(修改代码请用英文键盘输入,否则无效)
<svg xmlns="http://www.w3.org/2000/svg" width="750px" height="100">
<animate attributename="height" begin="click" dur="5s" restart="whenNotActive" values="10;50;100;0" repeatcount="7" calcmode="paced"></animate>
</svg>
代码分析:点击("click")下面空白处(画布)开始“动”,"5s"完成运动幅度为"10;50;100;0"的过程,过程重复"7"次,运动方式为匀速("paced")
效果请点击这里👉跳动的留言版