svg基础+公众号交互(二)

欢迎点击: 个人官网博客.

话接上回…

上节我们讲了svg基础及简单的动画demo及案例，这节我们来讲一些难度更高的svg交互。

效果图:

不要激动，这不是css，也不是js写的，这就是一张svg，神不神奇？？？

来看看怎么做的:

1.闪烁的文字

<svg style="display: inline-block;width: 100%;background-image:url(https://s3.ax1x.com/2020/12/16/rQWxoT.jpg);background-size: 100%,100%;background-repeat: no-repeat;"version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"><g><animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate><text x="200" y="540" fill="#fff" style="font-size: 30px">点击爆竹放飞梦想</text></g></svg>

2.烟花上天

思路：这里要做到烟花上天后，变成贺语。其实就是把烟花和贺语变成一个组(g标签)，一起上移，然后让我们的贺语覆盖掉烟花，就做成了。

烟花可以去阿里矢量图标库找，然后下载svg格式，把里面的path提取出来就可以了。文字可以下载图片，然后通过ai转成svg格式，提取path。

    <svg style="display: inline-block;width: 100%;background-image:url(https://s3.ax1x.com/2020/12/16/rQWxoT.jpg);background-size: 100%,100%;background-repeat: no-repeat;"version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"><g>闪烁的文字代码<g><animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1"fill="freeze" begin="click" dur="0.5s" restart="never"></animateTransform>把烟花和贺语放在一个组里面，通过animateTransform 上移<g style="transform: translate(140px, 580px);">这里是从阿里图标下载的烟花svg提取的path<pathd="M37.1,124.13v3.45a20.83,20.83,0,0,1-3.36,12.28,21.27,21.27,0,0,0-3.54,11.86,3.45,3.45,0,0,0,3.45,3.45h0a3.45,3.45,0,0,0,3.45-3.45h0c0-3.88,1.1-5.78,2.62-8.41A27.61,27.61,0,0,0,44,127.58v-3.45H37.1Z"transform="translate(-16.4 0)" fill="#c83741" /><path d="M50.9,124.13v72.42A3.45,3.45,0,0,0,54.34,200h0a3.45,3.45,0,0,0,3.45-3.45h0V124.13H50.9Z"transform="translate(-16.4 0)" fill="#963737" /><path d="M26.76,37.91v86.22a3.45,3.45,0,0,0,3.45,3.45H57.8a3.45,3.45,0,0,0,3.45-3.45V37.91Z"transform="translate(-16.4 0)" fill="#ff4b4b" /><path d="M26.76,37.91H61.24V51.71H26.76Z" transform="translate(-16.4 0)" fill="#c83741" /><pathd="M17.08,36.27A365.1,365.1,0,0,0,40.89,1.75a3.64,3.64,0,0,1,6.23,0,365,365,0,0,0,23.8,34.51,3.14,3.14,0,0,1-2.46,5.09H19.55A3.14,3.14,0,0,1,17.08,36.27Z"transform="translate(-16.4 0)" fill="#ff4b4b" /><pathd="M61.24,58.6,26.76,68.95V55.15L61.24,44.81Zm0,27.59L26.76,96.54V82.74L61.24,72.4Zm0,27.59L26.76,124.13V110.33L61.24,100Z"transform="translate(-16.4 0)" fill="#ffcf65" /><path d="M61.24,51.7v-6.9l-23,6.9Z" transform="translate(-16.4 0)" fill="#ffb450" /></g><g style="transform: translate(120px, 560px);opacity: 0">这里是贺语svg提取的path<animate attributeName="opacity" begin="click+0.5" dur="0.1s" values="0;1" fill="freeze"restart="never"></animate><rect width="92" height="229" rx="12" ry="12" fill="#fc4d50" /><pathd="M37.17,20.93l-2.58,5.16h-7L32,16.29h7.22L38.54,18H66.9v2.92H52.63v6.88H66.38V30.9H52.63V43.27H67.42V46.2H52.63V56h-7V46.2h-18V43.27h3.27V27.81H45.59V20.93Zm8.42,22.34V30.9H37.34V43.27Z"transform="translate(-0.5 -0.5)" fill="#fff" /><pathd="M34.42,75.62v-1.2h-7V71.15h7V69.43l7.22-.86v2.58H53.32V69.43l6.88-.86v2.58h7.22v3.27H60.2v1.2H53.32v-1.2H41.63v1.2H40.26V78h7.56v3.09H28.06V78h6.87l5-2.41Zm-7,14.09V86.62h11L39.92,82h6.36l-1.55,4.64h3.61v3.09Zm7.39,6.36-1.55,12.72H28.06L29.6,96.07Zm-.69,12.72,1.55-4.47V94.7H28.4V91.78h7.22v-.69l6.88-1.2v1.89h5V94.7h-5v14.09ZM35.45,82l1.2,3.78H30.29L29.09,82Zm12.89,26.81h-4l-1.2-12.72h4ZM67.42,84.9v2.92H65v21H58.82v-21H55.73l-.69,21H49l1-31.8,16.5-.69v2.92l-10.48.52L55.9,84.9Z"transform="translate(-0.5 -0.5)" fill="#fff" /><pathd="M27.37,125.84v-3.27h40v3.27Zm2.06,36.09V129.28H44.21l6.53-2.58v2.58H65.53v32.66Zm8.08-29.22V142H57.28v-9.28Zm0,25.44H57.28V145.44H37.51Z"transform="translate(-0.5 -0.5)" fill="#fff" /><pathd="M27.37,178.47v-2.92H67.24v2.92H41.81l-1,6.36H65.35v29.39h-9.8l1.72-5V187.75h-17l-4.81,26.47H27.37l6.36-35.75Z"transform="translate(-0.5 -0.5)" fill="#fff" /></g></g></svg>

这是一个爆竹的效果，其他两个都是一样的直接复制粘贴就好

大功告成啦！！！

那么我们试试把它放到微信公众号里面：

百度搜索微信公众平台–>>登录微信公众号(没有的注册)–>>图文管理–>>按F12打开开发者工具，然后鼠标右键找到图片中的body下的p标签，点击EDit编辑代码，把我们的代码复制进去就ok啦！

想了解更多资讯案例关注我吧!!!

百事可乐案例：

svg基础+微信公众号交互(二)相关推荐

微信公众号无需二次登录_您无需两次解决问题-您需要一个设计系统
微信公众号无需二次登录重点 (Top highlight) The design system concept can be differently defined according to eac ...
微信公众号的二次开发（二自定义菜单的创建）
在上篇<微信公众号的二次开发(一)>我们介绍了微信订阅号的一些坑, 以及微信公众平台开发的一些基本配置.下面我们继续介绍如何通过用户关注等行为.获取用户的openid. 自定义微信公众号菜 ...
微信公众号的二次开发（三、接收事件推送获取用户信息）
在上篇<微信公众号的二次开发(二自定义菜单的创建)>中我们介绍了自定义菜单的创建.本篇文章将介绍如何通过接收事件推送来获取用户信息.首先我们阅读官方文档: 根据官方文档的介绍微信公众号 ...
Java开发微信公众号（二）---开启开发者模式，接入微信公众平台开发
接入微信公众平台开发,开发者需要按照如下步骤完成: 1.填写服务器配置 2.验证服务器地址的有效性 3.依据接口文档实现业务逻辑资料准备: 1.一个可以访问的外网,即80的访问端口,因为微信公众号接 ...
微信扫码登录，微信公众号生成二维码，关注登录nodejs+vue
微信公众号生成二维码,关注后扫码登录技术栈为nodejs+vue 有不懂的可以加我微信yizheng369 1.效果初始: 关注后: 2.源码此项目为前后端分离项目,前后端代码都在这个仓库里, ...
微信公众号渠道二维码怎么生成？可以进行用户分组吗？
公众号渠道二维码是一种带参数的二维码,微信公众平台为服务号提供了生成带参二维码的接口,满足服务号的推广分析需求,运营者可以通过渠道二维码来判定粉丝来源,并对用户进行分组管理. 微信公众号渠道二维码的作 ...
如何制作并美化我们的微信公众号的二维码？
公众号后台仅仅提供带图标的黑色二维码,相信你也经常看到有的人微信公众号的二维码非常漂亮也很有个性,这样子也能吸引更多用户关注,还可以统计渠道场景来源,微号帮平台渠道二维码生成就是做这个的.再也不用担心 ...
微信公众号（二）每日推送详细教程（AI回复助手）
微信公众号(二)每日推送详细教程(回复助手) 1.准备阶段 1.1 基础性配置 1.2 账号准备 2. 配置阶段 2.1 配置application.yml文件 2.2 注解 3. 部署效果图如下 ...
制作淘宝客微信公众号（二）
制作淘宝客微信公众号(二) 这篇文章主要是记录开发淘宝客微信公众号机器人的主要开发过程. 1.完整淘宝客接口流程上一篇文章已经介绍了如何去调用一个淘宝联盟的API,但是实际上,用户发送链接,我们 ...

svg基础+微信公众号交互(二)

svg基础+公众号交互(二)

svg基础+微信公众号交互(二)相关推荐

最新文章

热门文章