天我要带大家一起来实现一款小巧玲珑、美轮美奂的开源滑动验证码组件，用React打造，让我们的网页增添一丝神秘与乐趣！

一、初衷与设计

验证码，一个看似简单却又不可或缺的存在。在网络安全日益受到重视的今天，验证码成为了区分人类和机器人的一大法宝。而滑动验证码，凭借其新颖、有趣的形式，逐渐受到了广大用户的喜爱。

我们的目标是，用React实现一个既小巧又美观的滑动验证码组件，让用户在滑动的同时，也能感受到一丝丝的艺术气息。

二、实现步骤

1. 创建项目

首先，我们需要创建一个新的React项目。可以使用

create-react-app

快速搭建项目框架。

npx create-react-app sliding-captcha  
cd sliding-captcha

2. 设计组件结构

我们的滑动验证码组件可以分为三个主要部分：背景图、滑块和缺口。

• 背景图：用于展示验证码的背景图案，可以是任意美观的图片。
• 滑块：用户通过拖动这个滑块来完成验证。
• 缺口：在背景图上预留一个缺口，用户需要将滑块拖动到缺口位置以完成验证。

3. 编写代码

接下来，我们开始编写组件的代码。

import React, { useState, useRef, useEffect } from 'react';  
import './SlidingCaptcha.css';  
  
const SlidingCaptcha=({ onVerified })=> {  
  const [sliderPosition, setSliderPosition]=useState(0);  
  const sliderRef=useRef(null);  
  const gapPosition=200; // 缺口位置，可以根据实际情况调整  
  
  useEffect(()=> {  
    const handleSliderMove=(e)=> {  
      const newPosition=e.clientX - sliderRef.current.offsetWidth / 2;  
      newPosition > 0 && newPosition < gapPosition  
        ? setSliderPosition(newPosition)  
        : setSliderPosition(sliderPosition);  
    };  
  
    const handleSliderUp=()=> {  
      if (Math.abs(sliderPosition - gapPosition) < 10) {  
        onVerified();  
      } else {  
        setSliderPosition(0);  
      }  
    };  
  
    window.addEventListener('mousemove', handleSliderMove);  
    window.addEventListener('mouseup', handleSliderUp);  
  
    return ()=> {  
      window.removeEventListener('mousemove', handleSliderMove);  
      window.removeEventListener('mouseup', handleSliderUp);  
    };  
  }, [sliderPosition, gapPosition, onVerified]);  
  
  return (  
    <div className="captcha-container">  
      <img src="background.jpg" alt="captcha-background" />  
      <div  
        className="slider"  
        style={{ left: `${sliderPosition}px` }}  
        ref={sliderRef}  
      />  
    </div>  
  );  
};  
  
export default SlidingCaptcha;

4. 样式调整

在SlidingCaptcha.css文件中，我们可以对组件进行样式调整，使其更加美观。

.captcha-container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  overflow: hidden;  
}  
  
.captcha-container img {  
  width: 100%;  
  height: 100%;  
}  
  
.slider {  
  position: absolute;  
  width: 50px;  
  height: 50px;  
  background-color: #3498db;  
  border-radius: 50%;  
  cursor: pointer;  
  user-select: none;  
  touch-action: none;  
}

三、使用方法

在需要使用滑动验证码的地方，引入SlidingCaptcha组件，并传入一个onVerified回调函数，当验证通过时调用。

import React from 'react';  
import SlidingCaptcha from './SlidingCaptcha';  
  
const App=()=> {  
  const handleVerified=()=> {  
    alert('验证通过！');  
  };  
  
  return (  
    <div>  
      <h1>滑动验证码示例</h1>  
      <SlidingCaptcha onVerified={handleVerified} />  
    </div>  
  );  
};  
  
export default App;

四、结语

通过以上步骤，我们就实现了一个简单而美观的滑动验证码组件。当然，这只是一个基础版本，还有许多可以改进和扩展的地方。

五、扩展与改进

1. 安全性增强：目前的实现并没有考虑到安全性因素。在实际应用中，滑动验证码的背景图、缺口位置和滑块移动的逻辑都应该经过精心设计和加密处理，以防止被恶意用户或者机器人破解。
2. 性能优化：对于大型项目或者对性能要求较高的场景，可以考虑使用更高效的滑动验证逻辑，比如使用requestAnimationFrame来代替mousemove和mouseup事件监听。
3. 用户体验：可以增加更多的用户反馈，比如滑动成功或失败时的动画和提示信息，以及适应不同设备和屏幕尺寸的响应式设计。
4. 自定义性：可以提供更多的props，让用户可以自定义滑动验证码的样式、大小、颜色等，以满足不同项目的需求。

六、结语

通过以上的介绍，我们可以看到，用React实现一款滑动验证码组件并不是一件难事。只要你敢于尝试和创新，就能够创造出有趣而实用的前端组件。希望这篇文章能够给你带来一些启发和乐趣，也期待你在开源社区中展现出你的才华和热情！

滑动验证码小贴士： 当你在网页上遇到滑动验证码时，不妨尝试一下用鼠标、触摸板或者手机来滑动，看看哪种方式更顺手。也许你会发现，滑动验证码也是一种有趣的小游戏呢！

天的推文是之前答应大家的配色网站分享

文中提到的所有网站

基本上都是小编经常在用的

就觉得还蛮好用的

真诚地分享给大家

这些网站里有纯色配色网站，也有渐变色网站，大家可以根据自己的喜好选择适合自己的哦~言外之意就是，我觉得好用但你不一定觉得好用，如果你觉得不好用，那请别杠……谢谢

纯色配色网站

1

https://colordrop.io/

这个网站主要以四宫格颜色为一组配色，选择自己喜欢的一组颜色点击，然后在页面右边会显示每个颜色的颜色值：

2

https://colorhunt.co/

这个网站的配色也是以四个颜色为一组，但它对配色有进行分类：

3

http://zhongguose.com/

这个网站的颜色主要是一些中国传统色，每种颜色都有命名。然后，同色系的颜色是摆在一起的，所以用来做同色系配色也蛮好用的：

4

https://www.happyhues.co/

之前和咱们粉丝聊天时，她说直接拿到一组配色，完全不知道哪个颜色适合做背景，哪个颜色适合做点缀，就不太适合新手小白。

那这个网站呢，除了有配色方案，它还会给一张图片，图片的配色会根据配色方案来显示，所以颜色比例会比较直观。

然后在图片的下方，会有颜色值，注明了哪个颜色可以用作背景，哪个颜色可以用作高亮等，大家就可以参考着来完成自己的配色。

5

https://mycolor.space/

这个网站既可以提供纯色配色方案，也可以自主调整渐变色。

点击紫色按钮，选择一个颜色，再点下方的GENERATE生成按钮，页面往下滑，就会看到一些以该颜色生成的配色方案：

然后，我们可以点页面右上角第二个入口GRADIENT进入两种颜色渐变设置页面，第三个入口3-COLOR-GRADIENT是三种颜色渐变设置页面，两者的操作是一样的。

渐变色网站

1

http://gradientsguru.com/

这个网站都是现成的渐变色，找到自己喜欢的渐变色，点右上角的复制图标，复制颜色代码。

2

https://webgradients.com/

这也是一个现成的渐变色网站，点颜色圆圈右下角的Copy CSS可以复制渐变色颜色代码

3

https://cssgradient.io/

这个网站可以用来调渐变色，颜色长条一左一右的两个滑块可以左右滑动，调整颜色的区域：

鼠标点击长条中间任意位置，可以添加颜色：

调色区域下方可以选择线性渐变还是径向渐变，以及设置渐变角度：

4

https://www.css-gradient.com/

这个网站也是用来自主调渐变色的，主要是两种颜色渐变。

颜色可以自己选择，还可以设置径向渐变和线性渐变，也可以设置渐变角度：

5

https://www.grabient.com/

这个网站虽然有现成的渐变色，但我觉得更适合用它来自主调整渐变色。

它默认的有两色或三色渐变，点渐变色显示区域下面的加号可以自主增加渐变的颜色，点颜色圆圈可以修改颜色，想要删掉颜色拖动到加号即可删掉：

点左下角的角度图标，再用鼠标沿圆环转动，可以调整渐变角度：

好啦~

以上就是今天的全部内容

如果你们有其他用起来比较好的配色网站

也欢迎在留言里发出来讨论一下哦~

众号 web前端开发

英文 | https://hulyakarakaya.medium.com/level-up-your-css-with-these-38-resources-c0de7ecd8714

翻译 | 杨小二

大家好，今天我将向你分享38个可以用来创建漂亮样式的 CSS 工具。

1、Layoutit Grid

地址：https://grid.layoutit.com/

Layoutit grid 是一个 CSS Grid 布局生成器。使用干净的编辑器可以快速绘制网页布局，并获取HTML和CSS代码以快速启动你的下一个项目。你也可以在 CodePen上看到代码！

2、Sarah Drasner 的 CSS 网格生成器

地址：https://cssgrid-generator.netlify.app/

该站点收集了示例、视频和其他信息，可帮助你学习 CSS 网格布局。由Rachel Andrew开发和维护。

3、Grid by Example

地址：https://gridbyexample.com/

4、CSS Grid Garden

地址：https://cssgridgarden.com/

在学习 CSS Grid 的同时种植您的胡萝卜园。

5、Mastery Games

地址：https://mastery.games/

在这里，你可以奠定周围的僵尸和实践Flexbox的; 在学习 CSS 网格的同时拯救一个可爱的外星物种。

6、Grid Malven

地址：https://grid.malven.co/

7、CSS Tricks

地址：https://css-tricks.com/snippets/css/complete-guide-grid/

CSS Tricks 的 CSS 网格综合指南。

8、三次贝塞尔

地址：https://cubic-bezier.com/#.17,.67,.83,.67

使用此工具可以快速生成预览三次贝塞尔曲线。

9、CSS 动画

地址：http://cssanimation.io/

使用这个工具可以非常容易的创建你的动画，它还支持 GSAP。

10、CSS 动画 101 电子书

地址：https://cssanimation.rocks/css-animation-101/

11、 CSS 晚餐

地址：https://flukeout.github.io/

使用 CSS Diner 练习你的 CSS 定位技巧。

12、弹性盒模式

地址：https://www.flexboxpatterns.com/

在这里你可以获得很多使用 Flexbox 的技巧和模式。

13、 Flexbox Froggy

地址：https://flexboxfroggy.com/

14、 Flexbox Cheatsheet

地址：https://darekkay.com/flexbox-cheatsheet/

15、 Devinduct Flexbox

地址：https://devinduct.com/workshop/flexbox

16、Css - tricks

地址：https://css-tricks.com/almanac/

17、Keyframes

地址：https://keyframes.app/

简单的可视化工具可帮助你为项目生成 CSS。

类似于视频编辑软件的可视化编辑器，可以用CSS创建基本或复杂的动画效果。

只需移动一些滑块即可创建单层或多层框阴影。并且可以获取 CSS 输出。

选择你喜欢的颜色，在十六进制和 RGB 之间转换，并创建和保存调色板。

18、CSS 选择器速查表

地址：https://frontend30.com/css-selectors-cheatsheet/

此工具旨在快速查询搜索 CSS 选择器。

19、CSS 字体栈

地址：https://www.cssfontstack.com/

从 Dan 的工具中获取 Web 安全字体等。

20、Bennett Feely 的 Clippy

地址：https://bennettfeely.com/clippy/

获取你的剪辑路径的工具。

21、Codrops CSS 参考

地址：https://tympanus.net/codrops/css_reference/

包含所有重要属性和广泛 CSS 信息参考，可帮助你从基础知识中学习CSS。

22、CSS 参考

地址：https://cssreference.io/

这是另一个 CSS 参考资源。

23、Frontend Mentor

地址：https://www.frontendmentor.io/

Frontend Mentor 有很多基于 HTML 和 CSS 的项目，你可以通过实际项目来完成挑战并改进你的风格。

24、代码播放器

地址：https://thecodeplayer.com/

视频样式演练展示了从头开始创建的很酷的东西。

25、CSS 数据库

地址：https://cssdb.org/

cssdb 是 CSS 功能及其在成为已实现的 Web 标准过程中的位置的综合列表。

26、边界半径生成器

地址：https://border-radius.com/

27、CSS按钮创建器

地址：https://cssbuttoncreator.com/

28、CSS 按钮生成器

地址：https://www.bestcssbuttongenerator.com/

29、Samantha Ming

地址：https://www.samanthaming.com/

30、Specificity

地址：https://specificity.keegan.st/

一种理解 CSS 特异性的直观方式。更改选择器或粘贴您自己的选择器。

31、CleanCSS

地址：https://www.cleancss.com/css-minify/

压缩你的 CSS。

32、100 天 CSS 挑战

地址：https://100dayscss.com/

33、 Csslayout

地址：https://csslayout.io/

使用 CSS 制作的流行布局和模式的集合。

34、Pattern-Generator

地址：https://doodad.dev/pattern-generator/

35、Free Frontend

地址：https://freefrontend.com/css-code-examples/

来自codepen.io和其他资源的免费 CSS 代码示例。

36、 Glassmorphism CSS 生成器

地址：https://hype4.academy/tools/glassmorphism-generator

37、 Smol CSS

地址：https://smolcss.dev/

现代 CSS 布局和组件的最小片段。

38、 Lottie 文件

地址：https://lottiefiles.com/featured

免费动画。