CSS動畫實例：一顆躁動的心

時間 2020-08-21

標籤 css 動畫實例一顆躁動欄目 CSS 简体版

原文原文鏈接

在頁面中放置一個類名爲container的層做爲盛放心心的容器，在該層中再定義一個名爲heart的子層，HTML代碼描述以下：html

<div class="container">瀏覽器

<div class="heart"></div>ide

</div>flex

分別爲container和heart定義CSS樣式規則以下：動畫

.containerspa

{code

margin: 0 auto;orm

width: 300px;htm

height:300px;blog

position: relative;

display:flex;

justify-content:center;

align-items:center;

background-image: radial-gradient(#FFC0CB, #FF8888);

border: 4px solid rgba(255, 0, 0, 0.9);

border-radius: 10%;

}

.heart

{

width: 100px;

height: 100px;

background-color: #FF6347;

position: relative;

animation:beat .6s infinite ease-in;

}

.heart:before, .heart:after

{

content:"";

position: absolute;

width: 100px;

height: 100px;

background-color: #FF6347;

border-radius: 50%;

}

.heart:before

{

left: 50px;

}

.heart:after

{

top: -50px;

}

在CSS樣式的做用下，這2個層在瀏覽器中顯示如圖1所示，其中心心由三個部分構成：一個高度和寬度均爲100px的正方形（由.heart樣式規則決定）、正方形右邊拼接的一個半圓（由.heart:before樣式規則決定）和正方形上邊拼接的一個半圓（由.heart:after樣式規則決定）。

圖1 一顆心心

若將上面的CSS屬性設置中「left: 50px;」改爲「left: -50px;」，「top: -50px;」改爲「top: 50px;」，則顯示如圖2所示的心心。

圖2 另外一顆心心

若將圖1的心心逆時針旋轉45°，即在.heart樣式定義中加上語句「transform:rotate(-45deg);」，則顯示如圖3所示的心心。

圖3 正放的心心

現爲圖3所示的心心添加動畫效果，編寫的完整HTML文件以下。

<!DOCTYPE html>
<html>
<head>
<title>躁動的心</title>
<style>
  .container
  {
     margin: 0 auto;
     width: 300px;
     height:300px;
     position: relative;
     display:flex;
     justify-content:center;
     align-items:center;
     background-image: radial-gradient(#FFC0CB, #FF8888);
     border: 4px solid rgba(255, 0, 0, 0.9);
     border-radius: 10%;
   } 
   .heart
   {
      width: 100px;
      height: 100px;
      background-color:    #FF6347;
      position: relative;
      animation: beat 0.6s infinite;
   }
    .heart:before, .heart:after
   {
      content:"";
      position: absolute;
      width: 100px; 
      height: 100px;
      background-color: #FF6347;
      border-radius: 50%;
   }
   .heart:before
   {
      left: 50px;
   }
   .heart:after
   {
      top: -50px;
   }
   @keyframes beat
   {
      0%    { transform:scale(1) rotate(-45deg); }
      40%   { transform:scale(1.1) rotate(-45deg); }
      55%   { transform:scale(1.3) rotate(-30deg); }
      70%   { transform:scale(1.1) rotate(-45deg);  }
      85%   { transform:scale(1.3) rotate(-60deg); }
      100%  { transform:scale(1) rotate(-45deg); }
   }
</style>
</head>
<body>
<div class="container">
  <div class="heart"></div>
</div>
</body>
</html>

View Code

在瀏覽器中打開包含這段HTML代碼的html文件，能夠呈現出如圖4所示的動畫效果。

圖4 一顆躁動的心

圖4中動畫效果在放大過程當中旋轉角度還有所變化，所以心心顯得躁動不安。若保持旋轉角度-45deg不變，只讓心心放大縮小，改寫關鍵幀定義爲：

@keyframes beat

{

0% { transform:scale(1) rotate(-45deg);}

50% { transform:scale(1.8) rotate(-45deg); }

100% { transform:scale(1) rotate(-45deg) ; }

}

則呈現的動畫效果如圖5所示。

圖5 心心放大後縮小

有了前面的基礎，下面咱們在容器中放4顆心心（在container層中定義4個子層），每顆心心的大小和背景色均不一樣（事先經過定義變量—scale和—color的方式肯定）。

編寫HTML文件內容以下。

<!DOCTYPE html>
<html>
<head>
<title>躁動的心</title>
<style>
  .container
  {
     margin: 0 auto;
     width: 300px;
     height:300px;
     position: relative;
     overflow: hidden;
     display:flex;
     justify-content:center;
     align-items:center;
     background-image:  radial-gradient(circle, #000, transparent);
     border: 4px solid rgba(255, 0, 0, 0.9);
     border-radius: 10%;
   } 
   .heart:nth-child(1n+0)
   {
      width: 100px;
      height: 100px;
      opacity: 0.5;
      position: absolute;
      background: var(--color);
      transform:scale(var(--scale)) rotate(-45deg);
   }
   .heart:nth-child(1n+0):before, .heart:nth-child(1n+0):after
   {
      content:"";
      position: absolute;
      width: 100px; 
      height: 100px;
      border-radius: 50%;
      background: var(--color);
   }
   .heart:nth-child(1n+0):before
   {
      left: 50px;
   }
   .heart:nth-child(1n+0):after
   {
      top: -50px;
   }
</style>
</head>
<body>
<div class="container">
    <div class="heart" style="--scale: 1.8;--color:#6f3"></div>
    <div class="heart" style="--scale: 1.4;--color:#93f"></div>
    <div class="heart" style="--scale: 1;--color:#f0f"></div>
    <div class="heart" style="--scale: 0.6;--color:#ff6"></div>
</div>
</body>
</html>