- 博客(105)
- 资源 (92)
- 收藏
- 关注
原创 SVG公众号排版 | GIF动图如何禁止循环播放?PS设置了也没用!
1、根据排版需求,先在Photoshop软件里面设置GIF动图的播放次数;2、如果GIF动图是无限循环播放的,使用img或者svg插入动图都是可以的,如果是只要播放一次,建议使用svg插入动图,这样会比较靠谱一些!
2022-12-16 22:33:05
296
原创 一个分号将会导致SVG的animate动画失效,你知道吗?
animate元素属性设置多个数值时,最后一个数值的结尾不要添加分号,一定不要添加分号
2022-09-21 10:47:32
504
原创 SVG黑科技排版 | 多个区域可点击淡入显示
实现原理:把要显示的图片默认移出显示区域,点击之后再把图片移进显示区域,为了显示效果更优美一点,运用动画淡入显示。
2022-02-19 09:11:55
270
原创 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排版教程 | <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" /> <
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黑科技排版上下左右视差滚动与3D立体呈现模板代码
2022-06-10
SVG黑科技排版多次点击滑动解锁与探照灯滑动解锁公众号模板代码
2022-06-10
SVG公众号排版连续点击三次展开无缝长图、点击多次展开无缝长图、点击展开套展开
2022-04-07
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人