目录
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好看的拼图验证码(附源码)》对你有帮助,请点赞、收藏,并留下你的观点哦!