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;"><svgviewbox="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><svgviewbox="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%;"><animateattributeName="width"values="100%;630%;630%"dur="3s"begin="click+1s"fill="freeze"restart="never"></animate><animateattributeName="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代码。
然后随便点击下其他元素的代码,有时可能会自动撤销,如果出现这种情况,再重新粘贴一次就行。