人民日报SVG交互点亮图文制作教程

说起来人民日报的点亮图文刚刚推出的时候极其火热，许多公众号主都争相模仿，各大编辑器也推出了相关样式。

而本文主要针对于【人民日报点亮图文】，为大家详细的讲解一下编辑器与代码两种制作方式的优缺点以及制作方式：

一、原理

人民日报点亮图文实际上是将两张一模一样的图片叠加到一起，点击过后使顶层图片透明度从1到0并消失，漏出底部图片。

二、编辑器制作方式

优点：好操作，对于代码小白好上手

缺点：部分机型有bug，版式固定不好修改

1、秀米编辑器

打开秀米编辑界面，点击搜索输入：【点亮】即可出现相关样式

插入正文后点击右侧进入布局模式

选择图片区域，会出现SVG样式修改

随后按照提示更换图片即可。

注意，运用SVG样式需要使用【同步】功能，不然复制到公众号是没有效果的。

2、135编辑器

在135样式界面搜索【点击】即可出现，插入正文后点击切换到html格式

将代码里面的图片地址替换成自己想要用的地址链接即可

三、代码编译方法

其实135编辑器的代码模式已经将所有代码逻辑呈现出来了：

用<section>标签嵌套一个<svg>标签；

<section>和<svg>标签分别设置了一个背景图片（也就是background-image：url（））；<section>标签的背景图片为点亮后的图片，<svg>标签的背景图片为点亮前的图片；

然后使顶层图点击后透明度从1到0，也就是运用了svg中animate动画中的透明度属性：

图片透明度从0到1后，再让顶层覆盖的图片消失，这样会避免二次触发

好了，到这里就结束了，具体的需要大家多多去尝试~相信一定会学会这个的制作方式。

最后希望能对大家有所帮助，更多交互内容可关注公众号：三千喵，会不定期更新交互图文案例以及排版教程~喜欢可以点个赞哟~