目录
- 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好看的拼图验证码(源码) 点击下载
本文链接：https://my.lmcjl.com/post/2369.html
展开阅读全文
4 评论