那些你不知道的炫酷開關互動效果(12種)

南城FE發表於2022-12-19

本文將繼續更新那些炫酷互動效果系列文章，今天帶來的是有關 toggle 開關相關的元件。以下是本次文章涉及到的開關元件總覽圖，總計收集12款不同互動效果，相信總有一款適合你。

那些你不知道的炫酷互動效果系列：

效果1


基於普通的開關效果增加了向內部延伸的3D效果，核心是透過設定內陰影box-shadow: inset實現，除開對元素本身增加陰影，還設定了兩個偽元素提升3D效果，以下是核心實現程式碼：

label {
        background: #af4c4c;
  border: .5px solid rgba(117, 117, 117, 0.31);
  box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.2), 0 -3px 4px rgba(0,0,0,0.15);
        &::before {
            border: none;
            width: 40px;
            height: 40px;
            box-shadow: inset 0.5px -1px 1px rgba(0, 0, 0, 0.35);
            background: #fff;
            transform: rotate(-25deg);
        }
        &::after {
            background: transparent;
            height: calc(100% + 8px);
            border-radius: 30px;
            top: -5px;
            width: calc(100% + 8px);
            left: -4px;
            z-index: 0;
            box-shadow: inset 0px 2px 4px -2px rgba(0,0,0,0.2), 0px 1px 2px 0px rgba(151, 151, 151, 0.2);
        }
}

效果2


這是一款極其簡潔的效果，透明開關效果，整體只有白色的邊框和一個白色的圓形平移控制開關的效果。這裡涉及到的程式碼相對比較簡單，就不再額外展示。

效果3

這款效果的開關過程動畫不再是簡單的平移，互動上的兩個狀態層次分明，過渡的效果也挺有創意，整體動畫效果可以拆分為以下幾個部分：

  • 顏色由綠色變為紅色
  • 移動的塊旋轉一週
  • 圖示由 √ 變化為 ✕，圖示用偽元素實現
    核心程式碼部分：
/* 選中效果 */
#checkcross:checked + label {
    .check {
        left: 68px;
        transform: rotate(360deg);
        background: #c34a4a;
    /* 圖示變化 */
        &:before {
            width: 27px;
            transform: rotate(-45deg) translate(-8px, 18px);
        }
        &:after {
            width: 27px;
        transform: rotate(45deg) translate(18px, 8px);
        }
    }
}

效果4

這是一款比較有趣味的互動效果，兩個狀態之間的切換從一個餅到多個餅堆疊的效果，在特定的場景中可以更換為其他的元素效果。核心的實現邏輯是預設只展示一個餅圖，其他的透過scale(0)隱藏，並設定不同的定位座標值，當狀態發生變化時，設定scale(1)並增加不同的延時時間，程式碼如下：

#pancake:checked  {
    + label {
        .pancakes {
            transform: translateX(70px);
        }
        .pancake {
            &:nth-child(2) {
                transform: scale(1);
                transition-delay: .2s;
            }
            &:nth-child(3) {
                transform: scale(1);
                transition-delay: .4s;
            }
        }
        .butter {
            transform: scale(1);
            transition-delay: .6s;
        }
    } 
}

效果5

這也是一款比較有趣的互動效果，整體動畫也是和#3類似，移動的過程採用旋轉一週切換狀態。但是核心的圓形部分變成了一個卡通狗狗的效果，並且在開啟狀態後狗狗的表情發生了變化，增加了微笑吐舌頭?的效果，還動了一下耳朵。這兩個效果也是基於scale實現，核心程式碼如下：

#doggo:checked  {
    + label {
        .dog {
            left: 68px;
            transform: rotate(360deg);
        }
        .mouth {
            transform: scale(1);
            transition-delay: .7s;
        }
        .ear.right {
            transform: scaleX(-1) rotate(-35deg);
            transition-delay: .6s;
        }
    }
}

效果6

這也是一款相對簡潔的效果，不同的是開關的圓形寬高會大於背景填充部分的寬高，形成一個反差效果，開啟的動畫過程也增加了貝塞爾曲線控制，而且在開啟後增加了陰影放大的效果，增強了與使用者互動的體驗感。核心程式碼如下：

  .checkbox-wrapper-3 #cbx-3:checked + .label span {
    background: #4F2EDC;
    transform: translateX(70px);
    transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
    box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2);
  }
  /*陰影放大效果*/
 .checkbox-wrapper-3 #cbx-3:checked + .label span:before {
    transform: scale(1);
    opacity: 0;
    transition: all 0.4s ease;
  }

效果7

這是一款帶有可愛風的開關效果，透過增加漸變背景色和陰影突出3D的效果，透過偽元素控制面部的表情，表情的變化過程也是極為生動有力。因為這裡在改變表情的時候對整個元素增加了一個Y軸一週旋轉，而且這裡表情裡面的眼睛和嘴所實現的偽元素都是基於content中的特殊符號實現，並沒有透過背景色實現，核心程式碼如下：

.checkbox-wrapper-5 .check label::before {
  content: "· ·";
}
.checkbox-wrapper-5 .check label::after {
  content: "●";
}
input[type="checkbox"]:checked + label::after {
  transform: rotateY(360deg);
}

效果8

看了很多正常的來一個脫離核心圓形開關的效果，開關上有 ON/OFF 文字效果，但實際這也是兩個偽元素，文字是透過標籤中的自定義屬性傳遞使用。動畫的過程就是平移兩個偽元素，偽元素的寬高和外層元素的寬高一樣，所以狀態變化時所移動的距離就是100%。核心程式碼如下：

<label class="tgl-btn" data-tg-off="OFF" data-tg-on="ON"></label>

css：

.tgl-btn:after {
  left: 100%;
  content: attr(data-tg-on);
}

.tgl-btn:before {
  left: 0;
  content: attr(data-tg-off);
}

.tgl-skewed:checked+.tgl-btn:after {
  left: 0;
}

.tgl-skewed:checked+.tgl-btn:before {
  left: -100%;
}

效果9

這也是一款較為生動的互動效果，狀態從白天到黑夜的效果，比較適用於頁面主題切換時使用。在切換的過程也增加了transition過渡，使整個過程較為柔和，核心的部分是由太陽切換到月亮的過程，太陽則是由linear-gradient線性漸變完成，月亮則是由純黑色的背景和box-shadow配合border-radius實現，核心程式碼如下：

.slider:before {
  border-radius: 20px;
  background: linear-gradient(40deg,#ff0080,#ff8c00 70%);
  transition: .4s;
}
input:checked + .slider:before {
  background: #303136;
  box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
}

效果10

這是一款類似生活中使用的按鈕開關效果，有按下彈起的效果，這裡使用了rotate和skew兩種變形使按鈕有彈起的效果，切換的過程也增加了transition過渡效果。核心部分程式碼如下：

.switch-left {
  transform: rotate(15deg) skewX(15deg);
}
input:checked + .switch-left {
  transform: rotate(0deg) skewX(0deg);
}

效果11


上面的按鈕中有YES/NO的文字顯示，這一款則是將文字和圓形開關兩者結合在了一起，動畫中也的文字和圓形元素都增加了貝塞爾曲線的效果，給使用者操作體驗增加了生動的感覺。核心程式碼如下：

.tgl-ios + .tgl-btn:after {
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
.tgl-ios + .tgl-btn:before {
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

效果12


最後來一個純文字型別的翻轉切換效果，文字內容也是透過標籤自定義屬性傳遞到偽元素中，開關翻轉效果則是透過設定旋轉Y軸rotateY(-180deg)實現。核心程式碼如下：

<label class="tgl-btn" data-tg-off="Nope" data-tg-on="Yeah!"></label>
.tgl-flip + .tgl-btn:before {
  background: #FF3A19;
  content: attr(data-tg-off);
}
.tgl-flip + .tgl-btn:active:before {
  transform: rotateY(-20deg);
}
.tgl-flip:checked + .tgl-btn:before {
  transform: rotateY(180deg);
}

彩蛋


最後來個有所誇張的彩蛋開關效果，這個效果原則上已經不是在開關元件功能層面了，但是還是可以看看具體的實現效果，有興趣的同學可以看看線上程式碼的原始碼實現過程。

線上預覽

碼上掘金線上效果預覽：
https://code.juejin.cn/pen/71...

最後

本次整理的toggle開關互動分享就結束了，希望可以在你的專案中帶來一定的收穫，如果你還有什麼好的設計互動效果歡迎留言討論。後期還會繼續整理分享其他功能元件的優質設計互動效果，如果有什麼期望整理的元件也歡迎留言哈。

看完本文如果覺得有用，記得點個贊支援，收藏起來說不定哪天就用上啦～

專注前端開發，分享前端相關技術乾貨，公眾號：南城大前端（ID: nanchengfe）

相關文章