分享
扫一扫
超级会员免费看
懂点君
专注定制SVG黑科技图文排版
商务合作，私信咨询！
展开
-
SVG公众号排版 | 快速解决视频号美化出现“点赞信息”
视频号美化跳转一定要记得添加opacity: 0;CSS样式属性原创 2022-09-21 11:24:45 · 606 阅读 · 0 评论 -
SVG公众号排版 | 可重复点击显示和关闭图片，在Apple上无法正常关闭
SVG交互在apple上的兼容问题原创 2022-09-21 10:56:30 · 535 阅读 · 0 评论 -
一个分号将会导致SVG的animate动画失效，你知道吗？
animate元素属性设置多个数值时，最后一个数值的结尾不要添加分号，一定不要添加分号原创 2022-09-21 10:47:32 · 872 阅读 · 0 评论 -
SVG公众号排版 | animate动画能否支持vw单位？一起来测测~
苹果手机不支持animate元素应用vw单位，不然真的是太完美了！原创 2022-09-21 10:17:41 · 255 阅读 · 0 评论 -
SVG黑科技排版『多次点击滑动解锁』
SVG黑科技排版『多次点击滑动解锁』原创 2022-06-10 19:13:26 · 280 阅读 · 0 评论 -
SVG黑科技排版上下左右视差滚动与3D立体呈现
SVG黑科技公众号排版，上下左右视差滚动与3D立体呈现效果模板代码原创 2022-06-10 19:05:54 · 1086 阅读 · 0 评论 -
SVG黑科技排版『点击多次展开无缝长图』
SVG公众号排版连续点击三次展开无缝长图、点击多次展开无缝长图、点击展开套展开原创 2022-04-07 22:27:38 · 1734 阅读 · 0 评论 -
SVG黑科技排版 | 多个区域可点击淡入显示
实现原理：把要显示的图片默认移出显示区域，点击之后再把图片移进显示区域，为了显示效果更优美一点，运用动画淡入显示。原创 2022-02-19 09:11:55 · 580 阅读 · 0 评论 -
SVG排版教程 | 样式背景属性详解与应用
SVG黑科技排版的每一篇文章都少不了精美的图片，那我们如何在SVG元素上显示图片呢？SVG元素显示的图片在不同的手机上如何实现自适应适配呢？今天我们就来接触SVG样式背景属性。原创 2021-12-24 09:21:35 · 1060 阅读 · 0 评论 -
SVG黑科技排版 | 点击GIF首图消失并展开长图
点击GIF首图消失并展开长图原创 2021-12-12 09:14:58 · 729 阅读 · 0 评论 -
SVG排版教程 | ＜SVG＞元素属性原理详解与应用
本教程的目的● 了解SVG元素的特性● 了解xmlns属性● 了解width和height属性● 了解viewBox属性的作用● 了解preserveAspectRatio属性● 实际开发应用viewBox属性原创 2021-12-11 11:57:02 · 1281 阅读 · 0 评论 -
解答疑问 | 公众号文章中为什么不能添加外部超链接？
咱们能经常遇到文章中需要添加外部超链接，但是有的公众号是无法添加外部超链接，这到底是什么回事呢？是有什么条件限制吗？懂点君查阅相关资料给大家归纳整理了一下，让大家了解的更清楚！原创 2021-11-29 11:10:05 · 3306 阅读 · 0 评论 -
SVG排版教程 | SVG排版入门基础知识汇总
编程零基础想要入门学习SVG互动排版之前，建议大家还是先了解一下HTML5网页基础知识，因为SVG是HTML5的一小部分，掌握HTML5网页基础有利于学习和上手SVG互动排版的相关知识原创 2021-11-24 23:03:12 · 1753 阅读 · 0 评论 -
SVG公众号排版『iOS手机长按禁止选中文字』解决方法
最近一位老铁向懂点君提问了一个问题：在iOS手机中长按切换图片会选中文字（SVG效果上下有文本内容），安卓手机则不会选中文字。看到问题后，脑子里立马蹦出了一个解决方法，在svg元素和p元素添加禁止文本复制的CSS属性：user-select: none，在iOS手机测试了一下，发现问题仍然没有解决，长按还是能选中文本内容。原创 2021-11-22 10:36:43 · 2629 阅读 · 0 评论 -
SVG公众号排版『大尺寸背景图重复安卓不显示』解决方法
今天懂点君给大家分享一个兼容问题，大尺寸背景图平铺/重复在安卓微信上不能正常显示，也就是背景图显示不出来。一开始我是猜测跟平铺/重复没有关系，是图片尺寸太大导致背景图不显示，具体咱们来看如下案例。原创 2021-11-22 10:32:07 · 2486 阅读 · 0 评论 -
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 · 633 阅读 · 0 评论 -
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 · 898 阅读 · 0 评论 -
SVG互动小游戏『2秒之内连续点击解锁』
游戏提示：2秒之内快速点击图片，直至显示“挑战成功”就停止点击，否则挑战失败；重新挑战，刷新页面即可；案例拆解 第1步 - 点击单张图片消失 第2步 - 连续点击多张图片消失 第3步 - 连续点击多张图片慢慢消失 第4步 - 图片慢慢消失提示挑战成功 第5步 - 搭建点击障碍 第6步 - 点击图片消失与点击障碍结合 第1步 - 点击单张图片消失<!DOCTYPE html><html><head&g原创 2021-11-15 09:52:54 · 502 阅读 · 0 评论 -
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 · 292 阅读 · 0 评论 -
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 · 293 阅读 · 0 评论 -
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 · 384 阅读 · 0 评论 -
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 · 380 阅读 · 0 评论 -
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 · 267 阅读 · 0 评论 -
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 · 354 阅读 · 0 评论 -
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 · 508 阅读 · 0 评论 -
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 · 635 阅读 · 0 评论 -
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 · 366 阅读 · 0 评论 -
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 · 876 阅读 · 0 评论 -
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-09-10 23:29:54 · 468 阅读 · 0 评论 -
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 · 644 阅读 · 0 评论 -
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 · 390 阅读 · 0 评论 -
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 · 295 阅读 · 0 评论 -
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 · 634 阅读 · 0 评论 -
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 · 919 阅读 · 0 评论 -
SVG互动排版公众号图文『点击播放GIF与音乐，并展开长图』模板代码
模板代码<section style="overflow: hidden;line-height: 0;"> <!-- 长图内容 --> <section style="height: 0;" data-author="公众号：懂点君"> <svg viewbox="0 0 1000 1779" style="display: block;width: 100%;background: url(https://mmbiz.qpi原创 2021-07-19 14:10:34 · 897 阅读 · 0 评论 -
SVG互动排版公众号图文 『两次物体移动与展开长图』 模板代码
模板效果模板代码<section style="overflow: hidden;"> <!-- 长图内容模块 --> <section style="height: 0;line-height: 0;font-size: 0;"> <svg style="display: block;pointer-events: none;vertical-align: top;weixin: dong_dian_jun;" vi.原创 2021-07-16 11:06:52 · 531 阅读 · 0 评论 -
SVG互动排版公众号图文『一次点击，连续播放gif』模板代码
模板代码<section style="line-height: 0;overflow: hidden;"> <!-- 第一张gif --> <svg viewbox="0 0 1000 1000" style="display: block;width: 100%;background: #fff url(https://mmbiz.qlogo.cn/mmbiz_gif/JpraGu7eGqT7wBib6hKQkpEibBBLKH2EAGBAYqpRu原创 2021-07-12 17:35:16 · 724 阅读 · 0 评论 -
SVG互动排版公众号图文『路径动画与描边动画』模板代码
模板代码<section style="overflow: hidden;line-height: 0;" data-author="公众号：懂点君"> <!-- 内容区域 --> <section style="height: 0;" data-author="公众号：懂点君"> <svg viewBox="0 0 1000 4300" style="display: block;width: 100%;background原创 2021-07-08 10:06:40 · 576 阅读 · 0 评论 -
SVG互动排版公众号图文『点击播放GIF展开长图』模板代码
模板代码<section style="line-height: 0;overflow: hidden;"> <!-- 长图内容 --> <section style="height: 0;" data-author="公众号：懂点君"> <svg viewbox="0 0 1000 1779" style="display: block;width: 100%;background: url(https://mmbiz.qpi原创 2021-07-06 09:58:39 · 1028 阅读 · 0 评论 -
SVG互动排版公众号文章『描边轮廓动画绘制』模板代码
模板代码<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 370" stroke-dasharray="100000, 100000" stroke-dashoffset="100000" style="display: inline-block;width: 100%;weixin: dongdianjun;pointer-events: none;" data-author="公众号：懂点君"> <!--原创 2021-07-04 16:31:57 · 281 阅读 · 0 评论