前言

這周了解到一個新的名詞，同態(tài)。同態(tài)可以理解成一種特殊形態(tài)吧，在沒看到具體的效果之前，我也不知道怎么描述它，哪怕我看到了具體效果，我也只能把它描述為一種特殊形態(tài)。話不多說，大家直接看到下面的效果預覽。

效果預覽

以上就是最終的實現(xiàn)效果了，咱們接下來便一步一步來實現(xiàn)它。

HTML

我們首先看到HTML部分，這里是效果的基礎。相關代碼如下。

  <div class="container">
      <div class="box"></div>
    </div>

這里我們創(chuàng)建了了兩個 <div> 元素，<div class="container">：這是一個容器元素，通常用于包裹內容并應用樣式。<div class="box"></div>：這是容器內部的一個盒子元素。

一直寫CSS到現(xiàn)在，包括在日常開發(fā)中，我們經常使用到container和box之類的命名方式，標簽和類名的使用結合了語義性和樣式定義，這樣的類名命名具有很好的可讀性，指定這兩個元素的外觀、排列方式或動畫效果。這種結構是為了良好的代碼組織和可維護性，同時也可以簡化對頁面元素的樣式化和交互效果的管理。

CSS

接著我們就要給整個效果添磚加瓦了。相關代碼如下。

.container {
  background-color: #f0f0f0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

首先是.container類的樣式。設置容器的背景顏色為淺灰色，并將容器寬度和高度設置為視口的寬度和高度，使其占據整個屏幕。然后使用經典的三段代碼display: flex; justify-content: center; align-items: center對容器內的內容實現(xiàn)水平垂直居中顯示。

.box {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  background-color: #f0f0f0;
  box-shadow: 0 0 0 #ccc, 0 0 0 #fff, 10px 10px 10px #ccc inset;
  animation: anime 3s cubic-bezier(0.16, 1, 0.3, 1) 1s infinite alternate;
}

@keyframes anime {
  0% {
    width: 60px;
    height: 60px;
    background-color: #f0f0f0;
    box-shadow: 0 0 0 #ccc, 0 0 0 #fff, 10px 10px 10px #ccc inset,
      -10px -10px -10px #fff inset;
  }
  25% {
    width: 60px;
    height: 60px;
    background-color: #f8f8f8;
    box-shadow: 10px 10px 10px #ccc, 10px 10px 10px #fff, 0 0 0 #ccc inset,
      0 0 0 #fff inset;
  }
  50% {
    width: 60px;
    height: 240px;
    background-color: #f8f8f8;
    box-shadow: 10px 10px 10px #ccc, 10px 10px 10px #fff, 0 0 0 #ccc inset,
      0 0 0 #fff inset;
  }
  100% {
    width: 480px;
    height: 240px;
    background-color: #fafafa;
    box-shadow: 40px 40px 40px #ccc, 0 0 0 #fff, 0 0 0 #ccc inset,
      2px 2px 2px #fff inset;
  }
}

這里是.box類的樣式，并且包括了動畫效果。初始時，設置盒子寬高為60px，并且設置盒子的圓角為20px。然后通過box-shadow來添加盒子的陰影效果，包括外陰影和內陰影。

最后animation: anime 3s cubic-bezier(0.16, 1, 0.3, 1) 1s infinite alternate;：應用名為 anime 的關鍵幀動畫，持續(xù)3秒，使用緩動函數(shù) cubic-bezier，延遲1秒開始，無限循環(huán)并在每次交替方向執(zhí)行動畫。通過關鍵幀定義了從初始狀態(tài)到結束狀態(tài)的動畫效果。在不同百分比處，設置了不同的寬高、背景色、盒子陰影等屬性值，實現(xiàn)了盒子的尺寸和顏色漸變效果。在 50% 處，盒子的高度變?yōu)?strong>240px，呈現(xiàn)出放大的效果。在 100% 處，盒子的寬度變?yōu)?strong>480px，高度繼續(xù)保持240px，并且背景顏色和陰影效果發(fā)生變化，完成整個動畫周期。

通過以上代碼就可以實現(xiàn)一個簡單的同態(tài)動畫效果，使盒子在尺寸和顏色上呈現(xiàn)多次變化，增強了頁面的視覺吸引力。

總結

到此就是整個效果的實現(xiàn)過程了，代碼簡單易懂，另外，感興趣的小伙伴們還可以在現(xiàn)有基礎上發(fā)散思維，比如增加點其他效果等等。

到此這篇關于使用CSS實現(xiàn)一個同態(tài)效果的文章就介紹到這了,更多相關CSS內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

最新評論