分享幾個漂亮的宇宙風格的按鈕動畫效果，讓你喜歡上CSS

載說明：原創不易，未經授權，謝絕任何形式的轉載

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

1、粒子動畫效果的按鈕

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標簽來加粗字體。
按鈕背景是一個漸變色背景，使用了linear-gradient函數來實現。
按鈕邊框是一個空心的圓角矩形，使用了border屬性來實現。
按鈕內部有一個含有星星動畫效果的div，使用了position:fixed來實現全屏，以及兩個偽元素before和after來生成星星。
按鈕內部還有一個發光的圓形動畫效果，使用了兩個.circle元素，以及animation屬性和filter屬性來實現。
當鼠標懸停在按鈕上時，星星背景會出現，并且按鈕會放大。
當按鈕被點擊時，發光效果變成粉色，并且漸變色背景和星星動畫效果都停止。

@keyframes pulse_3011

這個動畫定義了一個名為“pulse_3011”的關鍵幀動畫。在該動畫中，元素從開始狀態縮小到0.75倍，同時有一個0.7不透明度的黑色陰影。在動畫執行的70％處，元素擴大到原始大小，同時黑色陰影消失。最終，元素再次縮小到0.75倍，而黑色陰影再次消失。該動畫無限重復。

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

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

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)
  }
}

代碼解釋：

這段代碼實現了一個狀態切換的動畫按鈕效果，它包含兩個狀態：一個是太陽狀態，另一個是月亮狀態。當鼠標懸停在按鈕上時，太陽狀態會出現，月亮狀態會消失。當用戶點擊按鈕時，按鈕會放大并旋轉，并且太陽狀態會替換成月亮狀態，月亮狀態則替換成太陽狀態。

具體實現的邏輯如下：

HTML部分：

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

CSS部分：

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

3、小行星光圈帶環繞

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

結束

今天的內容就分享到這里，太多了就不利于我們去理解，雖然就三個案例，但是需要我們去慢慢消化和理解，才能成為自己的知識，建議大家還是親自實現下上述的按鈕動畫效果，這些案例雖然我們在平常的工作中很少用到，但是如果你接到酷炫的項目，比如某品牌的宣傳站點時，我相信這些效果還是能派上用場的。

如果你喜歡這樣的文章，請點贊支持下，后續我會持續分享這類的內容，如果太少，我會覺得大家不太喜歡這樣的文章，我只能自己私藏了，最后別忘記關注「前端達人」，你的支持將是我分享最大的動力，后續我會持續輸出更多內容，敬請期待。

SS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

之前也有寫過 CSS 優惠券樣式《CSS3徑向漸變實現優惠券波浪造型》，這次再來溫習一遍，并且將更為詳細的講解，從布局到具體樣式說明，最后定義 CSS 變量，自定義主題顏色。

布局

布局其實是學習前端的重要部分，最常用的方式就是從上而下、從左而右、亦或者兩個相結合。

看上圖，而這里，我們就只是最簡單的布局方式，從上而下：

1、優惠券金額和過期時間

2、優惠券描述

3、按鈕（其實按鈕也可以放到“2”里面去）

這樣分析，我們就有了 html 架構了

<div class="coupon">
  <!-- 1、優惠券金額和過期時間 -->
  <div class="price">
    100元
    <span>優惠券</span>
    <p class="timeout">2020-12-31 18:18:18過期</p>
  </div>

  <!-- 2、優惠券描述 -->
  <div class="describe">
    <p>1、商城、美食可用</p>
    <p>2、過期作廢</p>
  </div>

  <!-- 3、按鈕 -->
  <div class="btns">
    <button>立即使用</button>
  </div>
</div>

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

CSS修飾

接下來我們用 CSS 美化我們的 html 。同理，我們也根據布局分步進行樣式書寫。

1、優惠券金額和過期時間樣式

這里的核心就是上方的凹槽和下方的鋸齒

.coupon{
  background-color: #E0E0E0;
  width: 200px;
  /* css變量 */
  --main-color: #EC407A;
  --f-color: #444;
}
.price {
  position: relative;
  height: 120px;
  background-image: radial-gradient(
      circle at 100px -8px, #fff 20px, var(--main-color) 21px
  );
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding-top: 40px;
}
.price .timeout{
  color: var(--f-color);
  font-size: 14px;
  margin-top: 25px;
}
.price span{
  font-size: 14px;
}

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

這里用到了徑向漸變，不清楚用法的小伙伴可以看看語法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

注釋：

（1）、shape 確定圓的類型:

ellipse (默認): 指定橢圓形的徑向漸變。

circle ：指定圓形的徑向漸變

（2）、size 定義漸變的大小，可能值：

farthest-corner (默認) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊

closest-corner ：指定徑向漸變的半徑長度為從圓心到離圓心最近的角

farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊

（3）、position 定義漸變的位置。可能值：

center（默認）：設置中間為徑向漸變圓心的縱坐標值。

top：設置頂部為徑向漸變圓心的縱坐標值。

bottom：設置底部為徑向漸變圓心的縱坐標值。

（4）、start-color, ..., last-color 用于指定漸變的起止顏色。

這樣價格上方的凹槽就有了，接下來下方的鋸齒我們也可以用徑向漸變的方式實現：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: 0px;
  height: 10px;
  width: 100%;
  /* background-size: 11px 200px; */
  background-image: 
    radial-gradient(
    circle at 5px 10px, 
    #E0E0E0 6px, 
    var(--main-color) 7px);
}

偽類元素 ::after 設置徑向漸變背景為一個圓，后進行平鋪就形成了鋸齒，調整位置。

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

其實還有更簡單的方法，可以直接用一個虛線邊框即可搞定，請看：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: -5px;
  width: 100%;
  border-bottom: 10px dotted #E0E0E0;
}

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

當然也有缺陷，間隔位置不好控制

2、優惠券描述與按鈕優惠券核心鋸齒已經搞定了，下面都是小菜啦，非常簡單咯

.describe{
  color: #333;
  padding: 10px;
  font-size: 14px;
}
.btns {
  /* 使其button可以居中 */
  text-align: center;
}
.btns button{
  /* 重置按鈕樣式 */
  border: none;
  box-shadow: none;
  outline: none;

  background-color: var(--main-color);
  color: #fff;
  width: 50%;
  border-radius: 20px;
  line-height: 30px;
  margin: 40px 0 20px;
  cursor: pointer;
}

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

主題顏色

大家都看到了，我們上方代碼主要顏色都采用的變量，而且變量是定義在 .coupon 類選擇器里面的。這樣的原因是：

1、CSS變量作用域（CSS變量只能作用于自身以及后代元素。兄弟元素，祖先元素都不能享用。）

2、方便主題使用

ok，我們就可以copy 多個優惠券，并給每個添加一個不同的 class，比如下方的 theme1、theme2、theme3

<div class="coupon theme1">
  ...
</div>
<div class="coupon theme2">
  ...
</div>
<div class="coupon theme3">
  ...
</div>
<div class="coupon">
  ...
</div>

接下來我們就為不同主題定義不同的顏色變量

.coupon.theme1{
  --main-color: #8E24AA;
  --f-color: #fff;
}

.coupon.theme2{
  --main-color: #039BE5;
  --f-color: #fff;
}

.coupon.theme3{
  --main-color: #26A69A;
  --f-color: #fff;
}

這樣，theme1主題下的優惠券，就是紫色主題，theme2主題下的優惠券，就是藍色主題...，而默認主題顏色就是我們 .coupon 類選擇器里面的定義的變量顏色（紅色）。

小結

今天你學到了嗎？從布局分析到具體實現，再到主題顏色，相信小伙伴們都各有所得。

形元素的應用是在網頁設計中一個相對較新的發展。與互聯網普及初期相比，如今的網頁設計水平已經超出很多人的想象，比如圓形的應用，現在的CSS工具使圓圈的創建越來越容易，所以他們在網頁設計中的使用變得更加普遍。

當然還有許多人認為圓在網頁設計中使用比較困難，并且它的存在仍有爭議。然而，如果我們保持一個良好的網格布局，留有大量的空白，基于圓形的設計會成為網頁設計的亮點。

YES!為什么不大膽探索？你會發現，如果能成功運用圓形元素，會有令你意想不到的效果，要知道，圓形要素往往是很吸引眼球的，它會讓你脫穎而出。所以，今天我們就與大家共同學習如何選擇合適的元素，并把它應用在圓形圖案中。

Logo

首先來說說圓形LOGO如何運用：圓形LOGO，會給人一種干凈、簡約的感覺，也容易給人以優雅和高級的印象。圓是人類已知的最古老的圖形之一，生活中無處不存在圓形。產生這個事實的原因可能是，許多設計師用它來代表自己的品牌和網站。下面的以圓形為基礎的logo設計就值得學習。

導航欄

在今天的成長和不斷發展的移動市場，用圓圈作為導航正在成為一個日益流行和合乎邏輯的選擇。隨著的觸摸屏設備的興起，除了智能手機和平板電腦，這種圖案的導航應用越來越廣泛，并有很好的理由。采用圓形的按鈕，可以直觀地與用戶連接，甚至模仿指尖的形狀，激勵用戶按它。

圖標

圓形標志肯定是在網頁設計中最常用的和運行時間最長的圓形元素。因為它們通常是圖像，所以甚至不需要CSS提供太多的功能就可以達到運用的要求，沒錯，圓形可以自己去完美勝任任務，也許有人會認為，圓形圖標已經在網頁設計中運用了一段時間了，也應有一些變化了，是不是應該開發更多樣化的趨勢？但我們也發現不知為何圓形越來越廣泛運用，可能It just work吧，它就是有這樣的能力。

圖片預覽

我們已經在很多網站中看到這種技術了，不得不說還是很賞心悅目的的。而且，把一個預覽圖巧妙的放在一個剪裁圈里通常會讓人覺得很炫酷哦，這就達到了吸睛的效果，是的，圓形不僅會在視覺上引導用戶，還能更好的引導互動與交流。至于可用性，只要給圓形圖像足夠的空間，它們一樣可以匹配網站創意與和諧的外觀。

Calls to action

網站導航和觸摸屏設備的普及讓CTAs呼吁欄也有了很好的圓形素材使用效果，不過，如果你在網站上以類似的方式同時呈現導航和CTAs，那就不太好了，你應該盡量讓他們用不同方式脫穎而出。導航很必要，CTAs也非常重要，如何把兩部分都做得漂亮？對新的網頁設計師來說，創建一個可視化的層次是不錯的意見。

本文來源：視覺中國

在線咨詢

上一篇：一文讀懂 CSS 單位
下一篇：「按鍵精靈」旋轉驗證

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

分享幾個漂亮的宇宙風格的按鈕動畫效果，讓你喜歡上CSS

1、粒子動畫效果的按鈕

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

3、小行星光圈帶環繞

結束

布局

CSS修飾

1、優惠券金額和過期時間樣式

主題顏色

小結

Logo

導航欄

圖標

圖片預覽

Calls to action

您的項目需求