使用CSS實(shí)現(xiàn)一個(gè)同態(tài)效果

發(fā)布時(shí)間：2024-03-25 14:09:44 作者：一條會coding的Shark

這周了解到一個(gè)新的名詞，同態(tài),同態(tài)可以理解成一種特殊形態(tài)吧，這篇文章主要為大家詳細(xì)介紹了如何使用CSS實(shí)現(xiàn)這種同態(tài)效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下

前言

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

效果預(yù)覽

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

HTML

我們首先看到HTML部分，這里是效果的基礎(chǔ)。相關(guān)代碼如下。

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

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

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

CSS

接著我們就要給整個(gè)效果添磚加瓦了。相關(guān)代碼如下。

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

首先是.container類的樣式。設(shè)置容器的背景顏色為淺灰色，并將容器寬度和高度設(shè)置為視口的寬度和高度，使其占據(jù)整個(gè)屏幕。然后使用經(jīng)典的三段代碼display: flex; justify-content: center; align-items: center對容器內(nèi)的內(nèi)容實(shí)現(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類的樣式，并且包括了動(dòng)畫效果。初始時(shí)，設(shè)置盒子寬高為60px，并且設(shè)置盒子的圓角為20px。然后通過box-shadow來添加盒子的陰影效果，包括外陰影和內(nèi)陰影。

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

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