怎么用純css3實現黑色炫酷開關按鈕動畫效果

本文小編為大家詳細介紹“怎么用純css3實現黑色炫酷開關按鈕動畫效果”，內容詳細，步驟清晰，細節處理妥當，希望這篇“怎么用純css3實現黑色炫酷開關按鈕動畫效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

　　這個css3開關按鈕效果模擬了現實生活中的開關按鈕。整個代碼使用純css3完成，并且帶有開關按下時的動畫效果。

　　HTML

　　html結構非常簡單，是用一個input來作為開關的主體。

　　基本CSS樣式

　　.button {

　　display: block;

　　width: 400px;

　　height: 120px;

　　position: absolute;

　　top: 50%;

　　left: 50%;

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

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

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

　　background-color: #000000;

　　box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset;

　　border-radius: 20px;

　　overflow: hidden;

　　cursor: pointer;

　　-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

　　}

　　.button span {

　　display: block;

　　position: absolute;

　　top: 6px;

　　width: 194px;

　　height: 108px;

　　background-color: #1c1d1f;

　　-webkit-transition: -webkit-transform 300ms ease, box-shadow 300ms ease;

　　transition: transform 300ms ease, box-shadow 300ms ease;

　　}

　　.button span:before {

　　position: absolute;

　　top: 50%;

　　left: 50%;

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

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

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

　　font-family: "Open Sans";

　　font-weight: 800;

　　font-size: 48px;

　　-webkit-transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;

　　transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;

　　}

　　.button span:after {

　　content: "";

　　width: 4px;

　　height: 108px;

　　position: absolute;

　　top: 0;

　　background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.5) 0%, transparent 50%);

　　background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, transparent 50%);

　　-webkit-transition: opacity 300ms ease;

　　transition: opacity 300ms ease;

　　}

讀到這里，這篇“怎么用純css3實現黑色炫酷開關按鈕動畫效果”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。