在当今互联网时代，随着技术的不断进步，传统的验证码验证方式已经无法满足对安全性和用户体验的需求。为了应对日益狡猾的机器人和恶意攻击，许多网站和应用程序开始引入图形验证码，其中一种备受欢迎的形式就是图片旋转验证功能。这项技术通过利用用户交互、视觉识别和动态效果，为用户提供了一种全新、有趣且高效的验证方式。本文将深入探讨如何实现这一引人注目的图片旋转验证功能，让您轻松保护网站安全，同时提升用户体验

效果展示

功能介绍:

在vue项目中将此验证弹框封装成一个单独的组件，完整代码如下；

此功能中的图是利用canvas技术随机画10个图形拼接而成，然后就是画缺口和缺口的内阴影。

拖动滑轨调整小图移动位置，完成验证功能，验证失败会自动刷新再次验证，点击“刷新”也可以收到刷新图案，这是一个由纯前端实现的验证功能；

完整代码—组件封装

<!-- 滑块拼图验证模块 -->

<template>

<div>

<!-- <div @click="changeBtn" class="btn">开始验证</div> -->

<div></div>

<!-- 本体部分 -->

<div v-show="shoWData" :class="['vue-puzzle-vcode', { show_: show }]" @mousedown="onCloseMouseDown"

@mouseup="onCloseMouseUp" @touchstart="onCloseMouseDown" @touchend="onCloseMouseUp">

<div class="vue-auth-box_" @mousedown.stop @touchstart.stop>

<div class="auth-body_" :style="`height: ${canvasHeight}px`">

<!-- 主图，有缺口 -->

<canvas style="border-radius: 10px" ref="canvas1" :width="canvasWidth" :height="canvasHeight"

:style="`width:${canvasWidth}px;height:${canvasHeight}px`" />

<!-- 成功后显示的完整图 -->

<canvas ref="canvas3" :class="['auth-canvas3_', { show: isSuccess }]" :width="canvasWidth"

:height="canvasHeight" :style="`width:${canvasWidth}px;height:${canvasHeight}px`" />

<!-- 小图 -->

<canvas :width="puzzleBaseSize" class="auth-canvas2_" :height="canvasHeight" ref="canvas2" :style="`width:${ puzzleBaseSize}px;height:${ canvasHeight}px;transform:translateX(${ styleWidth -

sliderBaseSize -

(puzzleBaseSize - sliderBaseSize) *

((styleWidth - sliderBaseSize) /

(canvasWidth - sliderBaseSize))}px)`

" />

<div :class="['info-box_', { show: infoBoxShow }, { fail: infoBoxFail }]">

{ { infoText }}

</div>

<div :class="['flash_', { show: !isSuccess }]" :style="`transform: translateX(${ isSuccess

? `${ canvasWidth + canvasHeight * 0.578}px`

: `-${ canvasHeight * 0.578}px`

}) skew(-30deg, 0);`

"></div>

<img class="reset_" @click="reset" :src="resetSvg" />

</div>

<div class="auth-control_">

<div class="range-box" :style="`height:${sliderBaseSize}px`">

<div class="range-text">{ { sliderText }}</div>

<div class="range-slider" ref="range-slider" :style="`width:${styleWidth}px`">

<div :class="['range-btn', { isDown: mouseDown }]" :style="`width:${sliderBaseSize}px`"

@mousedown="onRangeMouseDown($event)" @touchstart="onRangeMouseDown($event)">

<!-- 按钮内部样式 -->

<div></div>

<div></div>

<div></div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</template>

<script>

import resetSvg from "@/assets/images/pc/login/Vector.png";

export default {

props: {

canvasWidth: { type: Number, default: 350 }, // 主canvas的宽

canvasHeight: { type: Number, default: 200 }, // 主canvas的高

// 是否出现，由父级控制

show: { type: Boolean, default: true },

puzzleScale: { type: Number, default: 1 }, // 拼图块的大小缩放比例

sliderSize: { type: Number, default: 50 }, // 滑块的大小

range: { type: Number, default: 10 }, // 允许的偏差值

// 所有的背景图片

imgs: {

type: Array

},

successText: {

type: String,

default: "验证通过！"

},

failText: {

type: String,

default: "验证失败，请重试"

},

sliderText: {

type: String,

default: "拖动滑块完成拼图验证"

},

shoWData: {

type: Boolean,

default: false

}

},

data() {

return {

verSuccess: false,

isShow: false,

mouseDown: false, // 鼠标是否在按钮上按下

startWidth: 50, // 鼠标点下去时父级的width

startX: 0, // 鼠标按下时的X

newX: 0, // 鼠标当前的偏移X

pinX: 0, // 拼图的起始X

pinY: 0, // 拼图的起始Y

loading: false, // 是否正在加在中，主要是等图片onload

isCanSlide: false, // 是否可以拉动滑动条

error: false, // 图片加在失败会出现这个，提示用户手动刷新

infoBoxShow: false, // 提示信息是否出现

infoText: "", // 提示等信息

infoBoxFail: false, // 是否验证失败

timer1: null, // setTimout1

closeDown: false, // 为了解决Mac上的click BUG

isSuccess: false, // 验证成功

imgIndex: -1, // 用于自定义图片时不会随机到重复的图片

isSubmting: false, // 是否正在判定，主要用于判定中不能点击重置按钮

resetSvg,

};

},

/** 生命周期 **/

mounted() {

// document.body.appendChild(this.$el);

document.addEventListener("mousemove", this.onRangeMouseMove, { passive: false });

document.addEventListener("mouseup", this.onRangeMouseUp, { passive: false });

document.addEventListener("touchmove", this.onRangeMouseMove, { passive: false });

document.addEventListener("touchend", this.onRangeMouseUp, { passive: false });

if (this.show) {

document.body.classList.add("vue-puzzle-overflow");

this.reset();

}

// if (this.shoWData) {

// this.isShow = this.shoWData;

// console.log('我收到了验证！');

// }

},

beforeDestroy() {

clearTimeout(this.timer1);

document.removeEventListener("mousemove", this.onRangeMouseMove, { passive: false });

document.removeEventListener("mouseup", this.onRangeMouseUp, { passive: false });

document.removeEventListener("touchmove", this.onRangeMouseMove, { passive: false });

document.removeEventListener("touchend", this.onRangeMouseUp, { passive: false });

},

/** 监听 **/

watch: {

show(newV) {

// 每次出现都应该重新初始化

if (newV) {

document.body.classList.add("vue-puzzle-overflow");

this.reset();

} else {

this.isSubmting = false;

this.isSuccess = false;

this.infoBoxShow = false;

document.body.classList.remove("vue-puzzle-overflow");

}

},

},

/** 计算属性 **/

computed: {

// styleWidth是底部用户操作的滑块的父级，就是轨道在鼠标的作用下应该具有的宽度

styleWidth() {

const w = this.startWidth + this.newX - this.startX;

return w < this.sliderBaseSize

? this.sliderBaseSize

: w > this.canvasWidth

? this.canvasWidth

: w;

},

// 图中拼图块的60 * 用户设定的缩放比例计算之后的值 0.2~2

puzzleBaseSize() {

return Math.round(

Math.max(Math.min(this.puzzleScale, 2), 0.2) * 52.5 + 6

);

},

// 处理一下sliderSize，弄成整数，以免计算有偏差

sliderBaseSize() {

return Math.max(

Math.min(

Math.round(this.sliderSize),

Math.round(this.canvasWidth * 0.5)

),

10

);

}

},

/** 方法 **/

methods: {

changeBtn() {

this.isShow = true;

},

// 关闭

onClose() {

if (!this.mouseDown && !this.isSubmting) {

clearTimeout(this.timer1);

}

},

onCloseMouseDown() {

this.closeDown = true;

this.isShow = false;

this.init(true);

//给父组件传一个状态

this.$emit('submit', 'F')

},

onCloseMouseUp() {

if (this.closeDown) {

this.onClose();

}

this.closeDown = false;

},

// 鼠标按下准备拖动

onRangeMouseDown(e) {

if (this.isCanSlide) {

this.mouseDown = true;

this.startWidth = this.$refs["range-slider"].clientWidth;

this.newX = e.clientX || e.changedTouches[0].clientX;

this.startX = e.clientX || e.changedTouches[0].clientX;

}

},

// 鼠标移动

onRangeMouseMove(e) {

if (this.mouseDown) {

// e.preventDefault();

this.newX = e.clientX || e.changedTouches[0].clientX;

}

},

// 鼠标抬起

onRangeMouseUp() {

if (this.mouseDown) {

this.mouseDown = false;

this.submit();

}

},

/**

* 开始进行

* @param withCanvas 是否强制使用canvas随机作图

*/

init(withCanvas) {

// 防止重复加载导致的渲染错误

if (this.loading && !withCanvas) {

return;

}

this.loading = true;

this.isCanSlide = false;

const c = this.$refs.canvas1;

const c2 = this.$refs.canvas2;

const c3 = this.$refs.canvas3;

const ctx = c.getContext("2d", { willReadFrequently: true });

const ctx2 = c2.getContext("2d", { willReadFrequently: true });

const ctx3 = c3.getContext("2d", { willReadFrequently: true });

const isFirefox = navigator.userAgent.indexOf("Firefox") >= 0 && navigator.userAgent.indexOf("Windows") >= 0; // 是windows版火狐

const img = document.createElement("img");

ctx.fillStyle = "rgba(255,255,255,1)";

ctx3.fillStyle = "rgba(255,255,255,1)";

ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

ctx2.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

// 取一个随机坐标，作为拼图块的位置

this.pinX = this.getRandom(this.puzzleBaseSize, this.canvasWidth - this.puzzleBaseSize - 20); // 留20的边距

this.pinY = this.getRandom(20, this.canvasHeight - this.puzzleBaseSize - 20); // 主图高度 - 拼图块自身高度 - 20边距

img.crossOrigin = "anonymous"; // 匿名，想要获取跨域的图片

img.onload = () => {

const [x, y, w, h] = this.makeImgSize(img);

ctx.save();

// 先画小图

this.paintBrick(ctx);

ctx.closePath();

if (!isFirefox) {

ctx.shadowOffsetX = 0;

ctx.shadowOffsetY = 0;

ctx.shadowColor = "#000";

ctx.shadowBlur = 0;

//ctx.globalAlpha = 0.4;

ctx.fill();

ctx.clip();

} else {

ctx.clip();

ctx.save();

ctx.shadowOffsetX = 0;

ctx.shadowOffsetY = 0;

ctx.shadowColor = "#000";

ctx.shadowBlur = 0;

//ctx.globalAlpha = 0.3;

ctx.fill();

ctx.restore();

}

ctx.drawImage(img, x, y, w, h);

ctx3.fillRect(0, 0, this.canvasWidth, this.canvasHeight);

ctx3.drawImage(img, x, y, w, h);

// 设置小图的内阴影

ctx.globalCompositeOperation = "source-atop";

this.paintBrick(ctx);

ctx.arc(

this.pinX + Math.ceil(this.puzzleBaseSize / 2),

this.pinY + Math.ceil(this.puzzleBaseSize / 2),

this.puzzleBaseSize * 1.2,

0,

Math.PI * 2,

true

);

ctx.closePath();

ctx.shadowColor = "rgba(255, 255, 255, .8)";

ctx.shadowOffsetX = -1;

ctx.shadowOffsetY = -1;

ctx.shadowBlur = Math.min(Math.ceil(8 * this.puzzleScale), 12);

ctx.fillStyle = "#ffffaa";

ctx.fill();

// 将小图赋值给ctx2

const imgData = ctx.getImageData(

this.pinX - 3, // 为了阴影 是从-3px开始截取，判定的时候要+3px

this.pinY - 20,

this.pinX + this.puzzleBaseSize + 5,

this.pinY + this.puzzleBaseSize + 5

);

ctx2.putImageData(imgData, 0, this.pinY - 20);

// ctx2.drawImage(c, this.pinX - 3,this.pinY - 20,this.pinX + this.puzzleBaseSize + 5,this.pinY + this.puzzleBaseSize + 5,

// 0, this.pinY - 20, this.pinX + this.puzzleBaseSize + 5, this.pinY + this.puzzleBaseSize + 5);

// 清理

ctx.restore();

ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

// 画缺口

ctx.save();

this.paintBrick(ctx);

ctx.globalAlpha = 1;

ctx.fillStyle = "#ffffff";

ctx.fill();

ctx.restore();

// 画缺口的内阴影

ctx.save();

ctx.globalCompositeOperation = "source-atop";

this.paintBrick(ctx);

ctx.arc(

this.pinX + Math.ceil(this.puzzleBaseSize / 2),

this.pinY + Math.ceil(this.puzzleBaseSize / 2),

this.puzzleBaseSize * 1.2,

0,

Math.PI * 2,

true

);

ctx.shadowColor = "#ffffff";

ctx.shadowOffsetX = 2;

ctx.shadowOffsetY = 2;

ctx.shadowBlur = 16;

ctx.fill();

ctx.restore();

// 画整体背景图

ctx.save();

ctx.globalCompositeOperation = "destination-over";

ctx.drawImage(img, x, y, w, h);

ctx.restore();

this.loading = false;

this.isCanSlide = true;

};

img.onerror = () => {

this.init(true); // 如果图片加载错误就重新来，并强制用canvas随机作图

};

if (!withCanvas && this.imgs && this.imgs.length) {

let randomNum = this.getRandom(0, this.imgs.length - 1);

if (randomNum === this.imgIndex) {

if (randomNum === this.imgs.length - 1) {

randomNum = 0;

} else {

randomNum++;

}

}

this.imgIndex = randomNum;

img.src = this.imgs[randomNum];

} else {

img.src = this.makeImgWithCanvas();

}

},

// 工具 - 范围随机数

getRandom(min, max) {

return Math.ceil(Math.random() * (max - min) + min);

},

// 工具 - 设置图片尺寸cover方式贴合canvas尺寸 w/h

makeImgSize(img) {

const imgScale = img.width / img.height;

const canvasScale = this.canvasWidth / this.canvasHeight;

let x = 0,

y = 0,

w = 0,

h = 0;

if (imgScale > canvasScale) {

h = this.canvasHeight;

w = imgScale * h;

y = 0;

x = (this.canvasWidth - w) / 2;

} else {

w = this.canvasWidth;

h = w / imgScale;

x = 0;

y = (this.canvasHeight - h) / 2;

}

return [x, y, w, h];

},

// 绘制拼图块的路径

paintBrick(ctx) {

const moveL = Math.ceil(15 * this.puzzleScale); // 直线移动的基础距离

ctx.beginPath();

ctx.moveTo(this.pinX, this.pinY);

ctx.lineTo(this.pinX + moveL, this.pinY);

ctx.arcTo(

this.pinX + moveL,

this.pinY - moveL / 2,

this.pinX + moveL + moveL / 2,

this.pinY - moveL / 2,

moveL / 2

);

ctx.arcTo(

this.pinX + moveL + moveL,

this.pinY - moveL / 2,

this.pinX + moveL + moveL,

this.pinY,

moveL / 2

);

ctx.lineTo(this.pinX + moveL + moveL + moveL, this.pinY);

ctx.lineTo(this.pinX + moveL + moveL + moveL, this.pinY + moveL);

ctx.arcTo(

this.pinX + moveL + moveL + moveL + moveL / 2,

this.pinY + moveL,

this.pinX + moveL + moveL + moveL + moveL / 2,

this.pinY + moveL + moveL / 2,

moveL / 2

);

ctx.arcTo(

this.pinX + moveL + moveL + moveL + moveL / 2,

this.pinY + moveL + moveL,

this.pinX + moveL + moveL + moveL,

this.pinY + moveL + moveL,

moveL / 2

);

ctx.lineTo(

this.pinX + moveL + moveL + moveL,

this.pinY + moveL + moveL + moveL

);

ctx.lineTo(this.pinX, this.pinY + moveL + moveL + moveL);

ctx.lineTo(this.pinX, this.pinY + moveL + moveL);

ctx.arcTo(

this.pinX + moveL / 2,

this.pinY + moveL + moveL,

this.pinX + moveL / 2,

this.pinY + moveL + moveL / 2,

moveL / 2

);

ctx.arcTo(

this.pinX + moveL / 2,

this.pinY + moveL,

this.pinX,

this.pinY + moveL,

moveL / 2

);

ctx.lineTo(this.pinX, this.pinY);

},

// 用canvas随机生成图片

makeImgWithCanvas() {

const canvas = document.createElement("canvas");

const ctx = canvas.getContext("2d", { willReadFrequently: true });

canvas.width = this.canvasWidth;

canvas.height = this.canvasHeight;

ctx.fillStyle = `rgb(${ this.getRandom(100, 255)},${ this.getRandom(

100,

255

)},${ this.getRandom(100, 255)})`;

ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);

// 随机画10个图形

for (let i = 0; i < 12; i++) {

ctx.fillStyle = `rgb(${ this.getRandom(100, 255)},${ this.getRandom(

100,

255

)},${ this.getRandom(100, 255)})`;

ctx.strokeStyle = `rgb(${ this.getRandom(100, 255)},${ this.getRandom(

100,

255

)},${ this.getRandom(100, 255)})`;

if (this.getRandom(0, 2) > 1) {

// 矩形

ctx.save();

ctx.rotate((this.getRandom(-90, 90) * Math.PI) / 180);

ctx.fillRect(

this.getRandom(-20, canvas.width - 20),

this.getRandom(-20, canvas.height - 20),

this.getRandom(10, canvas.width / 2 + 10),

this.getRandom(10, canvas.height / 2 + 10)

);

ctx.restore();

} else {

// 圆

ctx.beginPath();

const ran = this.getRandom(-Math.PI, Math.PI);

ctx.arc(

this.getRandom(0, canvas.width),

this.getRandom(0, canvas.height),

this.getRandom(10, canvas.height / 2 + 10),

ran,

ran + Math.PI * 1.5

);

ctx.closePath();

ctx.fill();

}

}

return canvas.toDataURL("image/png");

},

// 开始判定

submit() {

this.isSubmting = true;

// 偏差 x = puzzle的起始X - (用户真滑动的距离) + (puzzle的宽度 - 滑块的宽度) * （用户真滑动的距离/canvas总宽度）

// 最后+ 的是补上slider和滑块宽度不一致造成的缝隙

const x = Math.abs(

this.pinX -

(this.styleWidth - this.sliderBaseSize) +

(this.puzzleBaseSize - this.sliderBaseSize) *

((this.styleWidth - this.sliderBaseSize) /

(this.canvasWidth - this.sliderBaseSize)) -

3

);

if (x < this.range) {

// 成功

this.infoText = this.successText;

this.infoBoxFail = false;

this.infoBoxShow = true;

this.isCanSlide = false;

this.isSuccess = false;

// 成功后准备关闭

clearTimeout(this.timer1);

this.timer1 = setTimeout(() => {

// 成功的回调

this.isSubmting = false;

this.isShow = false;

this.verSuccess = true;

this.$emit('submit', 'F', this.verSuccess);

this.reset();

}, 800);

} else {

// 失败

this.infoText = this.failText;

this.infoBoxFail = true;

this.infoBoxShow = true;

this.isCanSlide = false;

// 失败的回调

// this.$emit("fail", x);

// 800ms后重置

clearTimeout(this.timer1);

this.timer1 = setTimeout(() => {

this.isSubmting = false;

this.reset();

}, 800);

}

},

// 重置 - 重新设置初始状态

resetState() {

this.infoBoxFail = false;

this.infoBoxShow = false;

this.isCanSlide = false;

this.isSuccess = false;

this.startWidth = this.sliderBaseSize; // 鼠标点下去时父级的width

this.startX = 0; // 鼠标按下时的X

this.newX = 0; // 鼠标当前的偏移X

},

// 重置

reset() {

if (this.isSubmting) {

debugger

return;

}

this.resetState();

this.init();

}

}

};

</script>

<style lang="scss" scoped>

.btn {

cursor: pointer;

background-color: #6aa0ff;

width: 80px;

height: 30px;

text-align: center;

line-height: 30px;

color: #fff;

}

.vue-puzzle-vcode {

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

background-color: rgba(0, 0, 0, 0.3);

z-index: 999;

opacity: 1;

pointer-events: none;

transition: opacity 200ms;

&.show_ {

opacity: 1;

pointer-events: auto;

}

}

.vue-auth-box_ {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

padding: 20px;

background: #fff;

user-select: none;

border-radius: 20px;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

.auth-body_ {

position: relative;

overflow: hidden;

border-radius: 3px;

.loading-box_ {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

background-color: rgba(0, 0, 0, 0.8);

z-index: 20;

opacity: 1;

transition: opacity 200ms;

display: flex;

align-items: center;

justify-content: center;

&.hide_ {

opacity: 0;

pointer-events: none;

.loading-gif_ {

span {

animation-play-state: paused;

}

}

}

.loading-gif_ {

flex: none;

height: 5px;

line-height: 0;

@keyframes load {

0% {

opacity: 1;

transform: scale(1.3);

}

100% {

opacity: 0.2;

transform: scale(0.3);

}

}

span {

display: inline-block;

width: 5px;

height: 100%;

margin-left: 2px;

border-radius: 50%;

background-color: #888;

animation: load 1.04s ease infinite;

&:nth-child(1) {

margin-left: 0;

}

&:nth-child(2) {

animation-delay: 0.13s;

}

&:nth-child(3) {

animation-delay: 0.26s;

}

&:nth-child(4) {

animation-delay: 0.39s;

}

&:nth-child(5) {

animation-delay: 0.52s;

}

}

}

}

.info-box_ {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 24px;

line-height: 24px;

text-align: center;

overflow: hidden;

font-size: 13px;

background-color: #83ce3f;

opacity: 0;

transform: translateY(24px);

transition: all 200ms;

color: #fff;

z-index: 10;

&.show {

opacity: 0.95;

transform: translateY(0);

}

&.fail {

background-color: #ce594b;

}

}

.auth-canvas2_ {

position: absolute;

top: 0;

left: 0;

width: 60px;

height: 100%;

z-index: 2;

}

.auth-canvas3_ {

position: absolute;

top: 0;

left: 0;

opacity: 0;

transition: opacity 600ms;

z-index: 3;

&.show {

opacity: 1;

}

}

.flash_ {

position: absolute;

top: 0;

left: 0;

width: 30px;

height: 100%;

background-color: rgba(255, 255, 255, 0.1);

z-index: 3;

&.show {

transition: transform 600ms;

}

}

.reset_ {

position: absolute;

top: 2px;

right: 2px;

width: 35px;

height: auto;

z-index: 12;

cursor: pointer;

transition: transform 200ms;

transform: rotate(0deg);

&:hover {

transform: rotate(-90deg);

}

}

}

.auth-control_ {

.range-box {

position: relative;

width: 100%;

background-color: #eef1f8;

margin-top: 20px;

border-radius: 3px;

// box-shadow: 0 0 8px rgba(240, 240, 240, 0.6) inset;

box-shadow: inset -2px -2px 4px rgba(50, 130, 251, 0.1), inset 2px 2px 4px rgba(34, 73, 132, 0.2);

border-radius: 43px;

.range-text {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-size: 14px;

color: #b7bcd1;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

text-align: center;

width: 100%;

/* 背景颜色线性渐变 */

/* linear为线性渐变，也可以用下面的那种写法。left top，right top指的是渐变方向，左上到右上 */

/* color-stop函数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。所以本次渐变为两边灰色，中间渐白色 */

background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));

/* 设置为text，意思是把文本内容之外的背景给裁剪掉 */

-webkit-background-clip: text;

/* 设置对象中的文字填充颜色 这里设置为透明 */

-webkit-text-fill-color: transparent;

/* 每隔2秒调用下面的CSS3动画 infinite属性为循环执行animate */

-webkit-animation: animate 1.5s infinite;

}

/* 兼容写法，要放在@keyframes前面 */

@-webkit-keyframes animate {

/* 背景从-100px的水平位置，移动到+100px的水平位置。如果要移动Y轴的，设置第二个数值 */

from {

background-position: -100px;

}

to {

background-position: 100px;

}

}

@keyframes animate {

from {

background-position: -100px;

}

to {

background-position: 100px;

}

}

.range-slider {

position: absolute;

height: 100%;

width: 50px;

/**background-color: rgba(106, 160, 255, 0.8);*/

border-radius: 3px;

.range-btn {

position: absolute;

display: flex;

align-items: center;

justify-content: center;

right: 0;

width: 50px;

height: 100%;

background-color: #fff;

border-radius: 3px;

/** box-shadow: 0 0 4px #ccc;*/

cursor: pointer;

box-shadow: inset 0px -2px 4px rgba(0, 36, 90, 0.2), inset 0px 2px 4px rgba(194, 219, 255, 0.8);

border-radius: 50%;

&>div {

width: 0;

height: 40%;

transition: all 200ms;

&:nth-child(2) {

margin: 0 4px;

}

border: solid 1px #6aa0ff;

}

&:hover,

&.isDown {

&>div:first-child {

border: solid 4px transparent;

height: 0;

border-right-color: #6aa0ff;

}

&>div:nth-child(2) {

border-width: 3px;

height: 0;

border-radius: 3px;

margin: 0 6px;

border-right-color: #6aa0ff;

}

&>div:nth-child(3) {

border: solid 4px transparent;

height: 0;

border-left-color: #6aa0ff;

}

}

}

}

}

}

}

.vue-puzzle-overflow {

overflow: hidden !important;

}

</style>