純CSS 精美按鈕UI設(shè)計(jì)、實(shí)現(xiàn)及實(shí)例

文中我們對CSS超炫加載動(dòng)畫設(shè)計(jì)、實(shí)現(xiàn)與實(shí)例進(jìn)行了講解與說明，通過學(xué)習(xí)可知使用CSS提供的animation屬性及偽元素等可以實(shí)現(xiàn)精美的CSS動(dòng)畫效果的設(shè)計(jì)與開發(fā)。本文我們將繼續(xù)介紹CSS在Web頁面元素設(shè)計(jì)中的應(yīng)用。

純CSS實(shí)現(xiàn)開關(guān)元素設(shè)計(jì)

按鈕開關(guān)設(shè)計(jì)要求及效果

本例我們使用CSS完成開關(guān)的設(shè)計(jì)，主要要求是在點(diǎn)擊開關(guān)時(shí)開關(guān)標(biāo)識(shí)顏色需要改變，另外需要體現(xiàn)出元素點(diǎn)擊前與點(diǎn)擊后的動(dòng)態(tài)變化與立體效果。本例最終設(shè)計(jì)呈現(xiàn)效果描述如下圖所示：

開關(guān)按鈕實(shí)現(xiàn)效果展示

設(shè)計(jì)思路與語法說明

要實(shí)現(xiàn)如上圖所示的開關(guān)按鈕效果，需要針對元素改變鼠標(biāo)點(diǎn)擊前后的CSS樣式，因?yàn)橹皇褂肅SS實(shí)現(xiàn)，我們選擇本身具有點(diǎn)擊屬性的INPUT元素。因此還需要考慮對INPUT元素外觀進(jìn)行設(shè)置，其設(shè)置也主要是依托于CSS選擇器及相關(guān)屬性的設(shè)置。

CSS選擇器及屬性設(shè)置

另一方面本例中出現(xiàn)的開關(guān)標(biāo)志，主要使用第三方字體庫提供的圖標(biāo)實(shí)現(xiàn)，因此需要對font相關(guān)屬性及CSS外部link方法有所學(xué)習(xí)掌握。本例所使用字體如下所示：

字體圖標(biāo)

在明確基本思路之后，我們可以使用submine進(jìn)行代碼編寫，主要編寫步驟如下：

1、鏈接字體樣式

本例使用如上圖所示提供的on圖標(biāo)，即Font Awesome圖標(biāo)字體庫和CSS框架，因此需要外部鏈接或者下載相應(yīng)CSS文件，這里我們選擇外部鏈接，通過使用CSS提供的link，實(shí)現(xiàn)代碼如下：

字體鏈接

鏈接完成之后我們在設(shè)置字體時(shí)可直接使用FontAwesome字體，其中on圖標(biāo)對應(yīng)的編碼為f011。

2、定義頁面內(nèi)容

本例頁面內(nèi)容主要使用input元素checkbox屬性進(jìn)行按鈕設(shè)置。因此頁面內(nèi)容部分定義如下所示：

頁面主體部分

3、定義checkbox樣式

在完成頁面元素添加之后就需要對頁面元素進(jìn)行CSS樣式的設(shè)置，本例通過元素加type屬性作為選擇器，選擇指定元素并進(jìn)行樣式設(shè)置。代碼如下：

checkbox屬性設(shè)置

checkbox屬性設(shè)置描述如上圖所示，設(shè)置效果如下：

checkbox屬性效果

4、input添加checked、after等樣式

為進(jìn)一步實(shí)現(xiàn)點(diǎn)擊效果切換及圖標(biāo)按鈕的效果，需要對check狀態(tài)及after偽元素進(jìn)行CSS樣式的設(shè)置。其中after為元素主要用于在上圖中添加on開關(guān)圖標(biāo)。實(shí)現(xiàn)代碼描述如下：

after偽元素選擇器及樣式設(shè)置

after偽元素選擇器及樣式設(shè)置如上圖所示，主要完成content內(nèi)容即on圖標(biāo)設(shè)置，字體選擇、字體顏色及字體大小設(shè)置，設(shè)置完成預(yù)覽效果如下：

after為元素設(shè)置效果

要實(shí)現(xiàn)點(diǎn)擊效果就需要在點(diǎn)擊之后對input元素樣式進(jìn)行設(shè)置，因此我們使用checked作為選擇器對該狀態(tài)下input樣式進(jìn)行設(shè)置。設(shè)置代碼如下所示：

checked狀態(tài)CSS設(shè)置

checked狀態(tài)CSS設(shè)置如上圖所示，我們只對box-shadow陰影進(jìn)行設(shè)置，通過陰影變化實(shí)現(xiàn)按鈕動(dòng)態(tài)效果。

5、點(diǎn)擊之后on圖標(biāo)顏色變化

點(diǎn)擊之后on圖標(biāo)顏色變化主要通過對input[type="checkbox"]:checked，進(jìn)一步使用after偽元素定義字體顏色實(shí)現(xiàn)。實(shí)現(xiàn)代碼如下所示：

on圖標(biāo)（字體）顏色改變

通過使用該選擇器，會(huì)在input點(diǎn)擊之后，on字體顏色變?yōu)榧t色。以上給出了input按鈕效果實(shí)現(xiàn)的基本思路與部分核心實(shí)現(xiàn)代碼。如需完整案例代碼請關(guān)注并私信作者。

本頭條號(hào)長期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓(xùn)。如果您對以上方面有興趣或代碼錯(cuò)誤、建議與意見，可在評論區(qū)回復(fù)。更多程序設(shè)計(jì)相關(guān)教程及實(shí)例分享，期待大家關(guān)注與閱讀！

載說明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載

俗話說得好，興趣是最好的老師。本篇文章搜集了幾個(gè)漂亮的宇宙風(fēng)格按鈕動(dòng)畫效果的代碼，希望它們能夠激發(fā)你對 CSS 的熱愛。作為前端開發(fā)者，我們不僅僅是制作寫頁面和與后端 API 打交道，偶爾也需要調(diào)味劑。廢話不多說，讓我們一起來解讀這些 CSS 代碼吧。

1、粒子動(dòng)畫效果的按鈕

HTML部分

<button class="btn" type="button">
  <strong>SPACE</strong>
  <div id="container-stars">
    <div id="stars"></div>
  </div>

  <div id="glow">
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</button>

CSS部分

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 13rem;
  height: 3rem;
  background-size: 300% 300%;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
  transition: 0.5s;
  animation: gradient_301 5s ease infinite;
  border: double 4px transparent;
  background-image: linear-gradient(#212121, #212121),  linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

#container-stars {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
}

strong {
  z-index: 2;
  font-family: 'Avalors Personal Use';
  font-size: 12px;
  letter-spacing: 5px;
  color: #FFFFFF;
  text-shadow: 0 0 4px white;
}

#glow {
  position: absolute;
  display: flex;
  width: 12rem;
}

.circle {
  width: 100%;
  height: 30px;
  filter: blur(2rem);
  animation: pulse_3011 4s infinite;
  z-index: -1;
}

.circle:nth-of-type(1) {
  background: rgba(254, 83, 186, 0.636);
}

.circle:nth-of-type(2) {
  background: rgba(142, 81, 234, 0.704);
}

.btn:hover #container-stars {
  z-index: 1;
  background-color: #212121;
}

.btn:hover {
  transform: scale(1.1)
}

.btn:active {
  border: double 4px #FE53BB;
  background-origin: border-box;
  background-clip: content-box, border-box;
  animation: none;
}

.btn:active .circle {
  background: #FE53BB;
}

#stars {
  position: relative;
  background: transparent;
  width: 200rem;
  height: 200rem;
}

#stars::after {
  content: "";
  position: absolute;
  top: -10rem;
  left: -100rem;
  width: 100%;
  height: 100%;
  animation: animStarRotate 90s linear infinite;
}

#stars::after {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
}

#stars::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 170%;
  height: 500%;
  animation: animStar 60s linear infinite;
}

#stars::before {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
  opacity: 0.5;
}

@keyframes animStar {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-135rem);
  }
}

@keyframes animStarRotate {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0);
  }
}

@keyframes gradient_301 {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulse_3011 {
  0% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }

  100% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

代碼解釋

按鈕的文字是“SPACE”，使用了strong標(biāo)簽來加粗字體。
按鈕背景是一個(gè)漸變色背景，使用了linear-gradient函數(shù)來實(shí)現(xiàn)。
按鈕邊框是一個(gè)空心的圓角矩形，使用了border屬性來實(shí)現(xiàn)。
按鈕內(nèi)部有一個(gè)含有星星動(dòng)畫效果的div，使用了position:fixed來實(shí)現(xiàn)全屏，以及兩個(gè)偽元素before和after來生成星星。
按鈕內(nèi)部還有一個(gè)發(fā)光的圓形動(dòng)畫效果，使用了兩個(gè).circle元素，以及animation屬性和filter屬性來實(shí)現(xiàn)。
當(dāng)鼠標(biāo)懸停在按鈕上時(shí)，星星背景會(huì)出現(xiàn)，并且按鈕會(huì)放大。
當(dāng)按鈕被點(diǎn)擊時(shí)，發(fā)光效果變成粉色，并且漸變色背景和星星動(dòng)畫效果都停止。

@keyframes pulse_3011

這個(gè)動(dòng)畫定義了一個(gè)名為“pulse_3011”的關(guān)鍵幀動(dòng)畫。在該動(dòng)畫中，元素從開始狀態(tài)縮小到0.75倍，同時(shí)有一個(gè)0.7不透明度的黑色陰影。在動(dòng)畫執(zhí)行的70％處，元素?cái)U(kuò)大到原始大小，同時(shí)黑色陰影消失。最終，元素再次縮小到0.75倍，而黑色陰影再次消失。該動(dòng)畫無限重復(fù)。

stars::before 和 stars::after 相關(guān)的代碼是實(shí)現(xiàn)星星循環(huán)動(dòng)畫的關(guān)鍵，設(shè)置了背景為一個(gè)由白色和透明顏色交替組成的徑向漸變色，這樣就形成了一些閃閃發(fā)光的小星星。通過 animation 屬性設(shè)置了動(dòng)畫效果，其中 animStar 是一個(gè)移動(dòng)動(dòng)畫，設(shè)置了 60s 的動(dòng)畫時(shí)間，并且使用 linear 動(dòng)畫函數(shù)，使得小星星以勻速向上移動(dòng)的方式出現(xiàn)在屏幕上，并且使用 infinite 讓其循環(huán)播放。這樣就形成了一些往上移動(dòng)的小星星，從而實(shí)現(xiàn)了整個(gè)星空的動(dòng)態(tài)效果。

月亮和太陽效果切換的按鈕

HTML部分

<button>
<div id="moon" class="state"> Moony</div>
<div id="sun" class="state">Sunny</div>
<span class="border border1"></span>
<span class="border border2"></span>
</button>

CSS部分

button {
  --sunGradient: linear-gradient(to right, #fa709a 0%, #fee140 100%);
  --moonGradient: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 85px;
  height: 85px;
  color: white;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 70px;
  background-color: transparent;
  transition: 0.09s;
  box-shadow: 0 20px 30px black;
  overflow: hidden;
}

button:hover {
  transform: rotate(360deg);
}

button:active {
  transform: rotate(360deg) scale(1.2);
  box-shadow: -15px -15px 500px white,inset 0 0 5px black, 0px -15px 20px white;
}

.state {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: inherit;
  width: 90%;
  height: 90%;
  border: 4px groove black;
}

#sun {
  display: none;
  transition: 2s;
  background: var(--sunGradient);
}

#moon {
  background: var(--moonGradient);
}

button:hover #sun {
  display: flex;
}

button:active #moon {
  display: none;
}

.border {
  position: absolute;
  transition: 0.4s;
  z-index: -1;
  border-radius: inherit;
  background: var(--moonGradient);
}

button:hover .border {
  background: var(--sunGradient);
}

.border1 {
  width: 45px;
  height: 100px;
  animation: 1s linear reverse infinite rotation_91;
}

.border2 {
  width: 200px;
  height: 35px;
  animation: 3s linear reverse infinite rotation_91;
}

@keyframes rotation_91 {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

代碼解釋：

這段代碼實(shí)現(xiàn)了一個(gè)狀態(tài)切換的動(dòng)畫按鈕效果，它包含兩個(gè)狀態(tài)：一個(gè)是太陽狀態(tài)，另一個(gè)是月亮狀態(tài)。當(dāng)鼠標(biāo)懸停在按鈕上時(shí)，太陽狀態(tài)會(huì)出現(xiàn)，月亮狀態(tài)會(huì)消失。當(dāng)用戶點(diǎn)擊按鈕時(shí)，按鈕會(huì)放大并旋轉(zhuǎn)，并且太陽狀態(tài)會(huì)替換成月亮狀態(tài)，月亮狀態(tài)則替換成太陽狀態(tài)。

具體實(shí)現(xiàn)的邏輯如下：

HTML部分：

一個(gè)<button>元素，作為容器來包含按鈕的其他元素。
兩個(gè)狀態(tài)元素：<div id="sun" class="state">和<div id="moon" class="state">，它們分別表示太陽和月亮狀態(tài)，并且它們都有一個(gè)state類，用于設(shè)置它們的共同樣式。
兩個(gè)邊框元素：<span class="border border1"></span>和<span class="border border2"></span>，它們用于設(shè)置按鈕的邊框樣式。

CSS部分：

設(shè)置按鈕的基本樣式：它是一個(gè)圓形的容器，它的背景顏色是透明的。它有一個(gè)黑色的描邊，以及一個(gè)白色的陰影。
當(dāng)用戶懸停在按鈕上時(shí)，它會(huì)旋轉(zhuǎn)360度。
當(dāng)用戶點(diǎn)擊按鈕時(shí)，它會(huì)放大并旋轉(zhuǎn)360度，并且它的陰影會(huì)變成白色的。
兩個(gè)狀態(tài)元素的共同樣式：它們的位置是絕對定位的，它們都是圓形的，它們都有一個(gè)4像素的黑色描邊，它們的寬度和高度都是按鈕的90%。
太陽狀態(tài)元素的樣式：它的背景是一個(gè)漸變，當(dāng)用戶懸停在按鈕上時(shí)，它會(huì)顯示出來。
月亮狀態(tài)元素的樣式：它的背景也是一個(gè)漸變。
當(dāng)用戶懸停在按鈕上時(shí)，它的邊框會(huì)變成太陽狀態(tài)元素的漸變顏色。
兩個(gè)邊框元素的樣式：它們的位置是絕對定位的，它們的顏色是按鈕的月亮狀態(tài)的漸變顏色，它們分別有兩個(gè)不同的大小和不同的動(dòng)畫，它們都是無限循環(huán)的動(dòng)畫。
最后，使用keyframes關(guān)鍵字定義兩個(gè)動(dòng)畫rotation_91，使它們旋轉(zhuǎn)360度。

3、小行星光圈帶環(huán)繞

HTML部分

<button>
  Button
</button>

CSS部分：

button {
  position: relative;
  padding: 18px 55px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(87deg, #6d67e4, #7743db, #4e31aa, #6d67e4, #6d67e4);
  background-size: 600% 600%;
  border: 3px solid #7743db;
  border-radius: 8px;
  /* filter: drop-shadow(0 0 4px #9F73AB); */
  box-shadow: inset 0 0 10px 1px #7743db, 0 0 10px 5px #7743db;
  cursor: pointer;
  transition: all 0.5s;
  animation: GradientAnimation 25s ease infinite;
}

button::after {
  content: "";
  position: absolute;
  width: 202px;
  height: 54px;
  top: 0;
  left: -17px;
  border: 5px solid #453c67;
  border-width: 0 2px 4px 0;
  border-radius: 100%;
  filter: drop-shadow(0px 0px 6px rgba(78, 49, 180, 1));
  transform: rotate(-30deg);
  animation: LinerAfter 15s ease infinite;
}

button::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 50px;
  top: 0;
  left: -20px;
  border: 5px solid #6d67e4;
  border-width: 0 12px 8px 4px;
  border-radius: 100%;
  filter: drop-shadow(0px 0px 6px rgba(109, 103, 228, 1));
  /* box-shadow: inset 0 0 10px 1px #4E31AA, 0 0 10px 5px #4E31AA; */
  transform: rotate(-30deg);
  transition: all 0.5s;
  animation: LinerBefore 15s ease infinite;
}

@keyframes GradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes LinerAfter {
  0% {
    left: -27px;
    height: 54px;
  }

  50% {
    left: -7px;
    height: 37px;
  }

  100% {
    left: -27px;
    height: 54px;
  }
}

@keyframes LinerBefore {
  0% {
    left: -30px;
    height: 50px;
  }

  50% {
    left: -10px;
    height: 33px;
  }

  100% {
    left: -30px;
    height: 50px;
  }
}

代碼解釋：

CSS代碼設(shè)置了按鈕的樣式，包括位置、內(nèi)邊距、字體大小、加粗程度、顏色、背景、邊框、圓角、光標(biāo)形狀、過渡效果、動(dòng)畫等。其中background屬性使用了線性漸變，border屬性設(shè)置了3px寬度的實(shí)線邊框，border-radius屬性設(shè)置了8px的圓角。box-shadow屬性設(shè)置了兩個(gè)陰影效果，一個(gè)是內(nèi)陰影，另一個(gè)是外陰影。button::after和button::before是button的偽元素，分別表示按鈕前面和后面的圓圈。這兩個(gè)圓圈都是絕對定位，大小、位置、邊框、圓角等屬性不同，但都使用了drop-shadow濾鏡和rotate旋轉(zhuǎn)變換效果。動(dòng)畫效果分別由GradientAnimation、LinerAfter和LinerBefore三個(gè)關(guān)鍵幀動(dòng)畫控制，分別設(shè)置了不同的屬性變化規(guī)則，實(shí)現(xiàn)了按鈕和圓圈的不同的動(dòng)態(tài)效果。

結(jié)束

今天的內(nèi)容就分享到這里，太多了就不利于我們?nèi)ダ斫?，雖然就三個(gè)案例，但是需要我們?nèi)ヂ屠斫?，才能成為自己的知識(shí)，建議大家還是親自實(shí)現(xiàn)下上述的按鈕動(dòng)畫效果，這些案例雖然我們在平常的工作中很少用到，但是如果你接到酷炫的項(xiàng)目，比如某品牌的宣傳站點(diǎn)時(shí)，我相信這些效果還是能派上用場的。

如果你喜歡這樣的文章，請點(diǎn)贊支持下，后續(xù)我會(huì)持續(xù)分享這類的內(nèi)容，如果太少，我會(huì)覺得大家不太喜歡這樣的文章，我只能自己私藏了，最后別忘記關(guān)注「前端達(dá)人」，你的支持將是我分享最大的動(dòng)力，后續(xù)我會(huì)持續(xù)輸出更多內(nèi)容，敬請期待。

ss實(shí)現(xiàn)常用的開關(guān)按鈕功能，常用在一些網(wǎng)站的設(shè)置頁面中，一般用在手機(jī)端的頁面比較多，實(shí)現(xiàn)的做法有很多，可以利用圖片完成，也可以用css和js完成！具體效果如下：

實(shí)現(xiàn)代碼：

html結(jié)構(gòu)：

css樣式：

js:

在線咨詢

上一篇：html是web前端的基礎(chǔ)知識(shí)，初學(xué)者們真的學(xué)對了嗎
下一篇：人人都在合成的「大西瓜」，你知道它是怎么賺錢的嗎？