自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

懂点君

一枚程序员,长期致力于各种小知识的分享。从此让你多懂点,少吃亏!

  • 博客(105)
  • 资源 (92)
  • 收藏
  • 关注

原创 SVG公众号排版 | 多段自动展开过程会卡住,无法完全展开!

自动展开的过程中会卡住,无法完全展开长图

2022-12-16 22:53:52 179

原创 SVG公众号排版 | GIF动图如何禁止循环播放?PS设置了也没用!

1、根据排版需求,先在Photoshop软件里面设置GIF动图的播放次数;2、如果GIF动图是无限循环播放的,使用img或者svg插入动图都是可以的,如果是只要播放一次,建议使用svg插入动图,这样会比较靠谱一些!

2022-12-16 22:33:05 296

原创 SVG公众号排版 | 快速解决视频号美化出现“点赞信息”

视频号美化跳转一定要记得添加opacity: 0;CSS样式属性

2022-09-21 11:24:45 282

原创 SVG公众号排版 | 可重复点击显示和关闭图片,在Apple上无法正常关闭

SVG交互在apple上的兼容问题

2022-09-21 10:56:30 193

原创 一个分号将会导致SVG的animate动画失效,你知道吗?

animate元素属性设置多个数值时,最后一个数值的结尾不要添加分号,一定不要添加分号

2022-09-21 10:47:32 504

原创 SVG公众号排版 | animate动画能否支持vw单位?一起来测测~

苹果手机不支持animate元素应用vw单位,不然真的是太完美了!

2022-09-21 10:17:41 109

原创 SVG黑科技排版『多次点击滑动解锁』

SVG黑科技排版『多次点击滑动解锁』

2022-06-10 19:13:26 127

原创 SVG黑科技排版上下左右视差滚动与3D立体呈现

SVG黑科技公众号排版,上下左右视差滚动与3D立体呈现效果模板代码

2022-06-10 19:05:54 479

原创 SVG黑科技排版『点击多次展开无缝长图』

SVG公众号排版连续点击三次展开无缝长图、点击多次展开无缝长图、点击展开套展开

2022-04-07 22:27:38 811

原创 SVG黑科技排版 | 多个区域可点击淡入显示

实现原理:把要显示的图片默认移出显示区域,点击之后再把图片移进显示区域,为了显示效果更优美一点,运用动画淡入显示。

2022-02-19 09:11:55 270

原创 SVG黑科技排版 | 竖版视频遮罩

SVG模板代码,复制即可套用!

2022-02-09 09:23:44 103

原创 SVG黑科技排版 | 双层上下自动对齐滑动,点击图片原生弹出

双层上下自动对齐滑动,点击图片可以原生弹出

2022-01-07 11:51:34 715

原创 SVG黑科技排版 | 双层上下自动对齐滑动

应用案例点击查看应用案例案例效果点击查看案例效果案例代码提示:有【】都需要根据里面的内容进行替换,比如【图片高度】,实际图片高度是1137,整个就替换成1137。<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maxi

2021-12-28 09:17:03 212

原创 SVG排版教程 | 样式背景属性详解与应用

SVG黑科技排版的每一篇文章都少不了精美的图片,那我们如何在SVG元素上显示图片呢?SVG元素显示的图片在不同的手机上如何实现自适应适配呢?今天我们就来接触SVG样式背景属性。

2021-12-24 09:21:35 569

原创 SVG黑科技排版 | 点击GIF首图消失并展开长图

点击GIF首图消失并展开长图

2021-12-12 09:14:58 475

原创 SVG排版教程 | <SVG>元素属性原理详解与应用

本教程的目的● 了解SVG元素的特性● 了解xmlns属性● 了解width和height属性● 了解viewBox属性的作用● 了解preserveAspectRatio属性● 实际开发应用viewBox属性

2021-12-11 11:57:02 846

原创 解答疑问 | 公众号文章中为什么不能添加外部超链接?

咱们能经常遇到文章中需要添加外部超链接,但是有的公众号是无法添加外部超链接,这到底是什么回事呢?是有什么条件限制吗?懂点君查阅相关资料给大家归纳整理了一下,让大家了解的更清楚!

2021-11-29 11:10:05 2041

原创 SVG排版教程 | SVG排版入门基础知识汇总

编程零基础想要入门学习SVG互动排版之前,建议大家还是先了解一下HTML5网页基础知识,因为SVG是HTML5的一小部分,掌握HTML5网页基础有利于学习和上手SVG互动排版的相关知识

2021-11-24 23:03:12 1052

原创 SVG公众号排版『iOS手机长按禁止选中文字』解决方法

最近一位老铁向懂点君提问了一个问题:在iOS手机中长按切换图片会选中文字(SVG效果上下有文本内容),安卓手机则不会选中文字。看到问题后,脑子里立马蹦出了一个解决方法,在svg元素和p元素添加禁止文本复制的CSS属性:user-select: none,在iOS手机测试了一下,发现问题仍然没有解决,长按还是能选中文本内容。

2021-11-22 10:36:43 2229

原创 SVG公众号排版『大尺寸背景图重复安卓不显示』解决方法

今天懂点君给大家分享一个兼容问题,大尺寸背景图平铺/重复在安卓微信上不能正常显示,也就是背景图显示不出来。一开始我是猜测跟平铺/重复没有关系,是图片尺寸太大导致背景图不显示,具体咱们来看如下案例。

2021-11-22 10:32:07 2115

原创 SVG公众号排版『适配深色模式图片二维码可识别可点击』模板代码

二维码可识别图片不弹出<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" /> <title>公众号:懂点君

2021-11-18 14:46:01 383

原创 SVG互动排版 | 展开嵌套多个展开

案例效果模板代码<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" /> <title>公众号:懂点

2021-11-15 09:56:47 553

原创 SVG互动小游戏『2秒之内连续点击解锁』

游戏提示:2秒之内快速点击图片,直至显示“挑战成功”就停止点击,否则挑战失败;重新挑战,刷新页面即可;案例拆解 第1步 - 点击单张图片消失 第2步 - 连续点击多张图片消失 第3步 - 连续点击多张图片慢慢消失 第4步 - 图片慢慢消失提示挑战成功 第5步 - 搭建点击障碍 第6步 - 点击图片消失与点击障碍结合 第1步 - 点击单张图片消失<!DOCTYPE html><html><head&g

2021-11-15 09:52:54 249

原创 SVG排版公众号文章『多点交互侧滑显示和关闭图片』模板代码

模板效果SVG排版公众号文章『多点交互侧滑显示和关闭图片』模板代码模板代码<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover"

2021-11-15 09:48:24 126

原创 SVG排版公众号文章『多点可重复弹出和关闭图片』模板代码

模板效果SVG排版公众号文章『多点可重复弹出和关闭图片』模板代码模板代码<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover"

2021-11-15 09:46:42 162

原创 SVG排版公众号文章『播放GIF与二次展开无缝长图』模板代码

模板效果SVG排版公众号文章『播放GIF与二次展开无缝长图』模板代码模板代码<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover

2021-11-15 09:44:34 174

原创 SVG排版公众号文章『宽屏适配二次展开无缝长图』模板代码

模板效果SVG排版公众号文章『宽屏适配二次展开无缝长图』模板效果模板代码<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover"

2021-10-27 21:53:08 188

原创 SVG排版公众号文章『播放GIF与二次展开无缝长图』模板代码

模板效果SVG排版公众号文章『播放GIF与二次展开无缝长图』模板代码模板代码<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover

2021-10-27 21:51:19 126

原创 SVG排版公众号文章『多点可重复弹出和关闭图片』模板代码

模板效果SVG排版公众号文章『多点可重复弹出和关闭图片』模板代码模板代码<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover"

2021-10-27 21:48:49 132

原创 SVG排版点击可以输入内容

核心代码-webkit-user-modify: read-only | read-write | read-write-plaintext-onlyread-only 内容只读read-write 内容可读写(支持富文本)read-write-plaintext-only 内容可读写,但粘贴内容中的富文本格式会丢失,类似于以纯文本来显示。模板代码<!DOCTYPE html><html

2021-10-27 21:45:49 186

原创 SVG排版围绕中心点缩放操作

模板代码<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" /> <title>公众号:懂点君 || 视频号

2021-10-27 21:43:18 369

原创 SVG排版 | 深色模式彩蛋

模板效果SVG深色模式下的一种彩蛋,同一个文章排版,在浅色模式与深色模式下显示的内容不一样,有没有觉得非常神奇!模板代码<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalabl

2021-09-21 23:35:41 181

原创 SVG排版 | 毛玻璃、磨砂玻璃模板效果

模板效果模板代码<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" /> <title>公众号:懂.

2021-09-18 09:22:30 311

原创 案例效果 | JavaScript世界时钟

案例效果案例代码<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link .

2021-09-11 14:44:25 162

原创 SVG排版 | 点击翻页与开门

模板效果SVG排版 | 点击翻页与开门模板代码<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" /> &lt

2021-09-10 23:29:54 282

原创 SVG排版公众号文章〖点击翻页效果〗模板代码

模板效果模板代码<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" /> <title>公众号:懂.

2021-09-03 17:16:54 362

原创 SVG排版公众号文章〖点击图片左右晃动〗模板代码

模板代码<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" /> <title>公众号:懂点君 || 视频号

2021-08-27 10:16:06 125

原创 SVG黑科技微信排版『Apple连续向上滑动』模板代码

SVG征程《SVG征程》| (一)开发工具之Sublime Text模板代码<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 750 1000" style="display: block;" data-info="公众号:懂点君 || 视频号:懂点君 || 微信号:dong_dian_jun"> <foreignObject x="0" y="0" width="750" height="1000">

2021-08-11 14:27:19 162

原创 SVG黑科技微信排版『左右视差滚动』模板代码

模板代码<section style="display: flex;overflow-x: scroll;overflow-y: hidden;width: 100%;-webkit-overflow-scrolling:touch;scroll-snap-type: x mandatory;perspective: 1px;"> <!-- 第一页 --> <section style="flex: 0 0 auto;wid

2021-08-01 08:50:36 359

原创 SVG黑科技微信排版『层层左右交错滑开』模板代码

模板代码<section style="overflow: hidden;line-height: 0;" data-author="公众号:懂点君 | 视频号:懂点君"> <!-- 滑动底图 --> <section style="height:0;" data-author="公众号:懂点君 | 视频号:懂点君"> <svg style="display: block;width: 100%;background-posit

2021-07-21 18:53:05 602

SVG排版公众号文章『倒计时自动展开长图』模板代码

SVG排版公众号文章『倒计时自动展开长图』模板代码

2021-11-04

SVG排版公众号文章『在视频上发弹幕』模板代码

SVG排版公众号文章『在视频上发弹幕』模板代码

2021-11-01

SVG排版公众号文章『多点交互侧滑显示和关闭图片』模板代码

SVG排版公众号文章『多点交互侧滑显示和关闭图片』模板代码

2021-11-01

SVG排版公众号文章『多点可重复弹出和关闭图片』模板代码

SVG排版公众号文章『多点可重复弹出和关闭图片』模板代码

2021-10-27

SVG排版公众号文章『播放GIF与二次展开无缝长图』模板代码

SVG排版公众号文章『播放GIF与二次展开无缝长图』模板代码

2021-10-27

SVG排版公众号文章『自适应适配二次展开无缝长图』模板代码

SVG排版公众号文章『自适应适配二次展开无缝长图』模板代码

2021-10-27

SVG排版-点击可以输入内容

SVG排版-点击可以输入内容

2021-09-26

SVG排版- 围绕中心点缩放操作

SVG排版- 围绕中心点缩放操作

2021-09-26

SVG排版-深色模式彩蛋

SVG排版-深色模式彩蛋

2021-09-21

SVG排版-毛玻璃、磨砂玻璃模板效果

SVG排版-毛玻璃、磨砂玻璃模板效果

2021-09-18

HTML5案例效果 | JavaScript 世界时钟

JavaScript 世界时钟

2021-09-11

SVG排版-点击翻页与开门

SVG排版-点击翻页与开门

2021-09-10

SVG排版公众号文章〖点击翻页效果〗模板代码

SVG排版公众号文章〖点击翻页效果〗模板代码

2021-09-03

SVG排版公众号文章〖点击图片左右晃动〗模板代码

SVG排版公众号文章〖点击图片左右晃动〗模板代码

2021-08-27

SVG黑科技微信排版『Apple连续向上滑动』模板代码

SVG黑科技微信排版『Apple连续向上滑动』模板代码

2021-08-11

SVG黑科技微信排版『左右视差滚动』模板代码

SVG黑科技微信排版『左右视差滚动』模板代码

2021-08-01

SVG黑科技微信排版『层层左右交错滑开』模板代码

SVG黑科技微信排版『层层左右交错滑开』模板代码

2021-07-21

【源代码】Paper.js与Canvas实现中秋画圆,比比谁画的圆源代码

【源代码】Paper.js与Canvas实现中秋画圆,比比谁画的圆源代码

2021-07-20

SVG互动排版公众号图文『点击播放GIF与音乐,并展开长图』模板代码

SVG互动排版公众号图文『点击播放GIF与音乐,并展开长图』模板代码

2021-07-19

SVG互动排版公众号图文 『两次物体移动与展开长图』 模板代码

svg模板代码

2021-07-16

SVG互动排版公众号图文『一次点击,连续播放gif』模板代码

SVG互动排版公众号图文『一次点击,连续播放gif』模板代码

2021-07-12

SVG公众号排版淡入淡出自动轮播图片

主要用于公众号排版

2022-06-24

SVG公众号排版多点点击淡入显示

SVG公众号排版多点点击淡入显示

2022-06-24

SVG黑科技排版|双层上下自动对齐滑动,点击图片原生弹出

主要用于公众号SVG黑科技排版

2022-06-24

SVG公众号排版可重复点击切换图片

主要用于公众号SVG排版

2022-06-24

SVG黑科技排版竖版视频遮罩

主要用于公众号SVG排版竖版视频

2022-06-24

SVG公众号排版『多个方块淡入拼接成图片』

主要用于公众号SVG排版

2022-06-24

SVG黑科技排版『多次点击滑动解锁』

用于公众号SVG排版

2022-06-24

SVG黑科技排版上下左右视差滚动与3D立体呈现模板代码

内容概要:SVG黑科技排版上下左右视差滚动与3D立体呈现公众号排版效果模板代码 适用人群:新媒体运营、平面设计师、前端开发工程师、美工设计师 使用场景:公众号图文排版

2022-06-10

SVG黑科技排版多次点击滑动解锁与探照灯滑动解锁公众号模板代码

内容概要:SVG黑科技排版多次点击滑动解锁与探照灯滑动解锁公众号模板代码 适用人群:新媒体运营、平面设计师、前端开发工程师、美工设计师 使用场景:公众号图文排版

2022-06-10

SVG公众号排版连续点击三次展开无缝长图、点击多次展开无缝长图、点击展开套展开

1、第1次展开的案例代码 2、第2次展开的案例代码 3、第3次展开的案例代码 4、合并多个元素的案例代码 5、点击三次展开无缝长图

2022-04-07

SVG公众号排版点击播放音乐与淡入显示模板代码

1、SVG点击播放音乐与淡入显示模板代码 2、一键套用即可完成公众号黑科技排版

2022-03-26

SVG公众号排版『iOS手机长按禁止选中文字』解决方法

iOS手机长按禁止选中文字解决方法

2021-11-24

兼容问题|SVG排版『安卓无法显示大尺寸背景图片』解决方法

安卓无法显示大尺寸背景图片解决方法

2021-11-24

SVG公众号排版『图片雪花特效』模板代码

公众号互动排版模板代码

2021-11-18

SVG公众号排版『2秒之内连续点击解锁』模板代码

公众号互动排版模板代码

2021-11-18

SVG公众号排版『展开套多个展开』模板代码

SVG互动排版模板,适合新媒体公众号运营

2021-11-18

SVG公众号排版『拍照展开长图』模板代码

SVG互动排版模板,适合新媒体运营人员

2021-11-18

SVG公众号排版『点击放大显示和缩小隐藏图片』模板代码

SVG公众号排版『点击放大显示和缩小隐藏图片』模板代码

2021-11-04

SVG排版公众号文章『倒计时自动展开长图』模板代码

SVG排版公众号文章『倒计时自动展开长图』模板代码

2021-11-04

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除