今天开会时说到了一些SVG效果,于是就网上收集了一些,收藏起来,留待以后学习SVG
【文字弹幕】
<svg width="100%" height="25" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-family="microsoft yahei,sans-serif" font-size="20" y="20" x="100%" fill="#898989">
前方高能٩(。•́‿•̀。)۶
<animate attributename="x" from="100%" to="-200" begin="0s" dur="3s" repeatcount="indefinite"></animate>
</text>
</g>
</svg>
【SVG路径动画】
<svg dth="300px" height="175px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="transparent" stroke="#888888" stroke-width="1" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
</svg>
<div class="ball"></div>
.ball {
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
offset-path: path('M10 80 Q 77.5 10, 145 80 T 280 80');
offset-distance: 0%;
animation: red-ball 2s linear alternate infinite;
margin-top:-11.5em;
}
@keyframes red-ball {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
其实路径动画并不难,
offset-path指定元素的运动路径
offset-distance定义了元素在路径上运动的距离,
单位是数值或百分比。
网友评论