- 博客(112)
- 资源 (92)
- 收藏
- 关注
原创 SVG黑科技排版教程 | 左右滑动“竟然”存在bug问题?
懂点君开发SVG排版时,研究测试发现左右滑动图片在安卓手机上存在一个问题,而且这个问题非常隐蔽,正常来说极少人能够发现,那我们在“堵车的路上”来看看到底是什么兼容问题?
2023-05-03 19:52:56 279 1
原创 SVG黑科技排版教程 | 如何解决点击视频号产生高亮“蓝色”背景?
大家可能平时没有去关注发现,安卓手机点击视频号、地图等的时候会出现高亮“蓝色”背景,影响SVG排版的美观,懂点君今天来给大家分享如何解决视频号高亮背景的问题。先来说说视频号美化原理,我们才好理解如何解决这个问题。
2023-04-17 15:40:12 299
原创 SVG排版教程 | image元素与img元素有什么区别?
image元素和img元素都是用来显示图片,表面上来看他们好像没有什么区别,那到底是不是这样呢?
2023-04-08 15:41:17 306
原创 SVG排版教程 | image元素如何正确引入图片?
SVG公众号排版遇到image元素通过xlink:href属性引入图片,在公众号图文里无法正常显示,这是为什么?懂点君写个案例给大家看看。
2023-04-04 12:22:28 357
原创 【展开系列】SVG排版公众号交互图文案例库
SVG排版公众号交互图文的大部分创意是离不开下拉展开的效果,常见的展开效果有点击下拉展开、自动下拉展开、点击逆向下拉展开、多段下拉展开、伸缩展开、展开套多个展开、点击互动下拉展开、点击播放动图GIF下拉展开等。
2023-03-17 17:59:23 792
原创 【SVG案例库】SVG公众号排版交互图文案例汇总
按照SVG排版交互方式进行归类汇总,整理形成SVG案例库,方便大家定制开发和学习SVG交互排版。
2023-02-28 14:58:51 3047
原创 SVG公众号排版 | GIF动图如何禁止循环播放?PS设置了也没用!
1、根据排版需求,先在Photoshop软件里面设置GIF动图的播放次数;2、如果GIF动图是无限循环播放的,使用img或者svg插入动图都是可以的,如果是只要播放一次,建议使用svg插入动图,这样会比较靠谱一些!
2022-12-16 22:33:05 740
原创 一个分号将会导致SVG的animate动画失效,你知道吗?
animate元素属性设置多个数值时,最后一个数值的结尾不要添加分号,一定不要添加分号
2022-09-21 10:47:32 816
原创 SVG黑科技排版 | 多个区域可点击淡入显示
实现原理:把要显示的图片默认移出显示区域,点击之后再把图片移进显示区域,为了显示效果更优美一点,运用动画淡入显示。
2022-02-19 09:11:55 522
原创 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 444
原创 SVG排版教程 | 样式背景属性详解与应用
SVG黑科技排版的每一篇文章都少不了精美的图片,那我们如何在SVG元素上显示图片呢?SVG元素显示的图片在不同的手机上如何实现自适应适配呢?今天我们就来接触SVG样式背景属性。
2021-12-24 09:21:35 1006
原创 SVG排版教程 | <SVG>元素属性原理详解与应用
本教程的目的● 了解SVG元素的特性● 了解xmlns属性● 了解width和height属性● 了解viewBox属性的作用● 了解preserveAspectRatio属性● 实际开发应用viewBox属性
2021-12-11 11:57:02 1210
原创 解答疑问 | 公众号文章中为什么不能添加外部超链接?
咱们能经常遇到文章中需要添加外部超链接,但是有的公众号是无法添加外部超链接,这到底是什么回事呢?是有什么条件限制吗?懂点君查阅相关资料给大家归纳整理了一下,让大家了解的更清楚!
2021-11-29 11:10:05 3006
原创 SVG排版教程 | SVG排版入门基础知识汇总
编程零基础想要入门学习SVG互动排版之前,建议大家还是先了解一下HTML5网页基础知识,因为SVG是HTML5的一小部分,掌握HTML5网页基础有利于学习和上手SVG互动排版的相关知识
2021-11-24 23:03:12 1631
原创 SVG公众号排版『iOS手机长按禁止选中文字』解决方法
最近一位老铁向懂点君提问了一个问题:在iOS手机中长按切换图片会选中文字(SVG效果上下有文本内容),安卓手机则不会选中文字。看到问题后,脑子里立马蹦出了一个解决方法,在svg元素和p元素添加禁止文本复制的CSS属性:user-select: none,在iOS手机测试了一下,发现问题仍然没有解决,长按还是能选中文本内容。
2021-11-22 10:36:43 2583
原创 SVG公众号排版『大尺寸背景图重复安卓不显示』解决方法
今天懂点君给大家分享一个兼容问题,大尺寸背景图平铺/重复在安卓微信上不能正常显示,也就是背景图显示不出来。一开始我是猜测跟平铺/重复没有关系,是图片尺寸太大导致背景图不显示,具体咱们来看如下案例。
2021-11-22 10:32:07 2415
原创 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 587
原创 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 852
原创 SVG互动小游戏『2秒之内连续点击解锁』
游戏提示:2秒之内快速点击图片,直至显示“挑战成功”就停止点击,否则挑战失败;重新挑战,刷新页面即可;案例拆解 第1步 - 点击单张图片消失 第2步 - 连续点击多张图片消失 第3步 - 连续点击多张图片慢慢消失 第4步 - 图片慢慢消失提示挑战成功 第5步 - 搭建点击障碍 第6步 - 点击图片消失与点击障碍结合 第1步 - 点击单张图片消失<!DOCTYPE html><html><head&g
2021-11-15 09:52:54 441
原创 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 251
原创 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 268
原创 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 341
原创 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 337
原创 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 229
原创 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 317
原创 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 465
原创 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 592
原创 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 321
原创 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 773
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人