失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 【博主推荐】html好看的拼图验证码(附源码)

【博主推荐】html好看的拼图验证码(附源码)

时间:2024-02-23 13:57:00

相关推荐

【博主推荐】html好看的拼图验证码(附源码)

目录

html好看的拼图验证码1.拼图验证码效果2.背景图配置3.边框背景色可以自定义配置5.界面代码6.源码下载

html好看的拼图验证码

你好! 拼图验证码,用于登录或者需要验证的地方。支持多图片刷新使用,布局可变,代码简洁,注释清晰,可以直接使用。

1.拼图验证码效果

拼图验证界面

成功后跳转的界面

2.背景图配置

1.可以配置本地图片路径,也可以配置服务器图片路径;

2.可以配置随机图片,多篇多少随意配置。

var imgList = [ // 图片组"./img/p1.jpg","./img/p2.jpg","./img/p3.jpg","./img/p4.jpg",];

3.边框背景色可以自定义配置

.verify-slide-con{ /* 滑动拼图容器块 */width: 360px;padding: 10px 20px;border: 1px solid orange;}.img-con{ /* 图片容器块 */width: 100%;height: 200px;display: flex;justify-content: center;align-items: center;overflow: hidden;border: 1px solid orange;position: relative;}

5.界面代码

<body><div class="verify-slide-con"> <!-- 滑动拼图容器块 --><div class="img-con"> <!-- 图片容器块 --><img class="img"> <!-- 图片 --><div class="slide-block"></div> <!-- 拼图 --><div class="slide-block-mask"></div> <!-- 缺口 --></div><div class="slide-con"> <!-- 滑块容器 --><div class="slide-btn"> <!-- 滑动按钮 --><i class="iconfont icon-arrow-right"></i> <!-- 图标 --></div></div><div class="operate-con"> <!-- 操作容器块 --><i id="refresh" class="iconfont icon-shuaxin1"></i> <!-- 刷新按钮 --></div></div></body>

6.源码下载

【博主推荐】html好看的拼图验证码(源码) 点击下载

如果觉得《【博主推荐】html好看的拼图验证码(附源码)》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。