<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-image:url('0.jpg');
background-repeat: no-repeat; /**背景圖填充位置：不填充**/
background-attachment: fixed; /**這個屬性必須與 background-image 一起使用**/
}
</style>
</head>
<body>
<p>彈幕效果</p>
<svg width="100%" height="25" >
<g>
<text font-family="微軟雅黑" font-size="20" y="20" x="100%">
前方高能٩(｡•́‿•̀｡)۶
<animate attributename="x" from="100%" to="-200" begin="0s" dur="3s" repeatcount="indefinite"></animate>
</text>
</g>
</svg>
<p>旋轉效果</p>
<svg width="400" height="400" style="box-sizing:border-box">
<g transform="rotate(262.54 180 180)" style="box-sizing:border-box">
<text font-family="微軟雅黑" font-size="30" y="160" x="160" style="box-sizeing:border-box">
旋轉木馬
<animate attributename="transform" begin="0s" dur="10s" type="rotate" from=" 0 180 180" to="360 180 180" repeatcount="indefinite" style="box-sizing:border-box"></animate>
</text>
</g>
</svg>
<p>改變透明度效果</p>
<center>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="35%" y="20" fill="#898989" font-family="微軟雅黑" font-weight="bold" font-size="14">
前方還有高能！！！！
<animate attributename="opacity" from="1" to="0" begin="0s" dur="1.2s" repeatcount="indefinite"></animate>
</text>
<text x="35%" y="40" fill="#767676" font-family="微軟雅黑" font-weight="bold" font-size="14">
前方還有高能！！！！
<animate attributename="opacity" from="1" to="0" begin="0.2s" dur="1.2s" repeatcount="indefinite"></animate>
</text>
<text x="35%" y="60" fill="#646464" font-family="微軟雅黑" font-weight="bold" font-size="14">
前方還有高能！！！！
<animate attributename="opacity" from="1" to="0" begin="0.4s" dur="1.2s" repeatcount="indefinite"></animate>
</text>
<text x="35%" y="80" fill="#333" font-family="微軟雅黑" font-weight="bold" font-size="14">
前方還有高能！！！！
<animate attributename="opacity" from="1" to="0" begin="0.6s" dur="1.2s" repeatcount="indefinite"></animate>
</text>
<text x="35%" y="100" fill="#000" font-family="微軟雅黑" font-weight="bold" font-size="14">
前方還有高能！！！！
<animate attributename="opacity" from="1" to="0" begin="0.8s" dur="1.2s" repeatcount="indefinite"></animate>
</text>
</svg>
</center>
<p>超鏈接彈幕效果</p>
<svg width="100%" height="35">
<g>
<a href="https://www.baidu.com" target="_blank">
<text font-family="微軟雅黑" font-size="20" y="28" x="100%" fill="#c00000" font-weight="bold">
超級彈幕！！！ 超級彈幕！！！
<animate attributename="x" from="100%" to="-200" begin="0s" dur="4s" repeatcount="indefinite"></animate>
</text>
</a>
</g>
</svg>
<p>繪畫+漸隱效果</p>
<svg width="100%" height="100" viewbox="0 0 24 24" style="box-sizing:border-box">
<path d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z" style="fill:rgb(206,30,0); box-sizing:border-box;">
<animate attributetype="CSS" attributename="opacity" from="1" to="0" dur="4s" repeatcount="indefinite" style="box-sizing:border-box"></animate>
</path>
</svg>
<p>文字沿路徑移動的效果</p>
<svg width="100%" height="300">
<text font-family="微軟雅黑" font-size="14" x="-60" y="0" fill="#c00000" font-weight="bold">
跟着我左手右手一個慢動作
<animatemotion path="M150 0 L75 200 Z" begin="0s" dur="5s" repeatcount="indefinite"></animatemotion>
</text>
</svg>
<p>進階玩法：圖片背景的彈幕效果</p>
<img src="img/0.gif">
<svg width="100%" height="200" style="margin-top:-160px">
<text font-family="微軟雅黑" font-size="18" y="20" x="5%" fill="#c00000" font-weight="bold">
小黃人來啦！在那邊？？？？？
<animate attributename="opacity" from="1" to="0" begin="0.8s" dur="5s" repeatcount="indefinite"></animate>
</text>
<text font-family="微軟雅黑" font-size="14" y="20" x="100%" fill="#fff" font-weight="bold">
格魯呢？？？ 格魯呢？？？
<animate attributename="x" from="800" to="-400" begin="0s" dur="5.5s" repeatcount="indefinite"></animate>
</text>
<text font-family="microsoft yahei,sans-serif" font-size="14" y="34" x="100%" fill="#ffffff" font-weight="bold">
斯圖爾特呢？？？ 斯圖爾特呢？？？
<animate attributename="x" from="800" to="-400" begin="0s" dur="5.5s" repeatcount="indefinite"></animate>
</text>
<text font-family="microsoft yahei,sans-serif" font-size="14" y="49" x="100%" fill="#ffffff" font-weight="bold">
鮑勃呢？？？ 鮑勃呢？？？
<animate attributename="x" from="800" to="-400" begin="0s" dur="5.5s" repeatcount="indefinite"></animate>
</text>
<text font-family="microsoft yahei,sans-serif" font-size="14" y="28" x="100%" fill="#ffffff" font-weight="bold">
凱文呢？？？ 凱文呢？？？
<animate attributename="x" from="800" to="-400" begin="0.8s" dur="5.5s" repeatcount="indefinite"></animate>
</text>
<text font-family="microsoft yahei,sans-serif" font-size="14" y="110" x="24%" fill="#ffffff" font-weight="bold">
人都去哪裏啊？？？？？？？
<animate attributename="opacity" from="1" to="0" begin="1.6s" dur="1s" repeatcount="indefinite"></animate>
</text>
<text font-family="microsoft yahei,sans-serif" font-size="14" y="130" x="24%" fill="#ffffff" font-weight="bold">
打怪去啦！！！ 打怪去啦！！！
<animate attributename="opacity" from="1" to="0" begin="1.2s" dur="1s" repeatcount="indefinite"></animate>
</text>
<text font-family="microsoft yahei,sans-serif" font-size="14" y="150" x="24%" fill="#ffffff" font-weight="bold">
打死他們啊！！ 打死這些壞人！！！
<animate attributename="opacity" from="1" to="0" begin="0.8s" dur="1s" repeatcount="indefinite"></animate>
</text>
</svg>
</body>
</html>SVG——小事例
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
page-break-before和page-break-after 實現分頁打印
page-break-before和page-break-after CSS屬性並不會修改網頁在屏幕上的顯示，這兩個屬性是用來控制文件的打印方式。每