天我要帶大家一起來實現一款小巧玲瓏、美輪美奐的開源滑動驗證碼組件，用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

免費動畫。