SVG——小事例

最新推荐文章于 2024-04-24 19:33:22 发布

羁绊我心

最新推荐文章于 2024-04-24 19:33:22 发布

阅读量439

点赞数 1

分类专栏： CSS基础文章标签： css新标签 svg效果

本文链接：https://blog.csdn.net/sinat_41661009/article/details/80967236

版权

<!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">

最低0.47元/天解锁文章

羁绊我心

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SVG——小事例

&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; body{ background-image:url('0.
复制链接

扫一扫