svg代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<section style="line-height: 0;overflow: hidden;">
<section style="height: 0;">
<svg
viewbox="0 0 1222 5196"
style="display: block;width: 100%;background: url(https://svg-1305776833.cos.ap-nanjing.myqcloud.com/di2.jpg) center center no-repeat;background-size: 100% 100%;"></svg>
</section>
<svg
viewbox="0 0 100 74"
style="display: block;max-width: none!important;width: 100%;background: #fff url(https://svg-1305776833.cos.ap-nanjing.myqcloud.com/feng1.webp) center center no-repeat;background-size: 100% 100%;">
<animate
attributeName="width"
values="100%;630%;630%"
dur="3s"
begin="click+1s"
fill="freeze"
restart="never"></animate>
<animate
attributeName="opacity"
values="1;.5;0"
dur="1s"
begin="click"
fill="freeze"
restart="never"></animate>
</svg>
</section>
</div>
</body>
</html>
将svg代码嵌入到文章中
在正文区域输入一行文字(如 代码嵌入位置)作为代码的占位。
在Chrome浏览器空白处鼠标右键/检查,打开调试工具,定位到代码位置文字,右击鼠标选择Edit as HTML,
删除原有代码,把内容替换为我们的SVG代码。
然后随便点击下其他元素的代码,有时可能会自动撤销,如果出现这种情况,再重新粘贴一次就行。