、制作網頁動畫(了解)

本章目標

• 會使用transform 2D變形設置網頁元素樣式
• 會使用transition制作過渡動畫
• 會使用animation制作網頁動畫

如何在網頁中實現動畫效果？

1. 動態圖片
2. Flash
3. JavaScript

Flash需要插件支持，文件體積大 從這次課開始學習使用CSS代碼來完成動畫：存在兼容性問題

• CSS3變形
• CSS3過渡
• CSS3動畫

6.1、CSS變形

• CSS3變形是一些效果的集合
• 如平移、旋轉、縮放、傾斜效果
• 簡言之，平移就是一個變形，旋轉就是一個變形。。。

• 每個效果都可以稱為變形（transform），它們可以分別操控元素發生平移、旋轉、縮放、傾斜等變化

在這里插入圖片描述

tml：

<h1>垂直翻轉</h1>
<div class="card vertical">
  <div class="card-side front">
    <div>正面</div>
  </div>
  <div class="card-side back">
    <div>背面</div>
  </div>
</div>

<h1>水平翻轉</h1>
<div class="card horizontal">
  <div class="card-side front">
    <div>正面</div>
  </div>
  <div class="card-side back">
    <div>背面</div>
  </div>
</div>

css:

/*卡片樣式*/
.card {
  perspective: 150rem;
  position: relative;
  height: 20rem;
  max-width: 200px;
  box-shadow: none;
  background: none;
}

.card-side {
  height: 10rem;
  border-radius: 15px;
  transition: all 0.8s ease;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  padding:2rem;
  color: white
}

/*正面背景*/
.card-side.front {
  background-color: #0093E9;
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
/*背面背景*/
.card-side.back {
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%,#C850C0 46%, #FFCC70 100%);
}

/*垂直翻轉*/
.vertical .back{
  transform: rotateX(-180deg);
}
.vertical:hover .card-side.front {
  transform: rotateX(180deg);
}
.vertical:hover .card-side.back {
  transform: rotateX(0deg);
}
/*水平翻轉*/
.horizontal .back{
  transform: rotateY(-180deg);
}
.horizontal:hover .card-side.front {
  transform: rotateY(180deg);
}
.horizontal:hover .card-side.back {
  transform: rotateY(0deg);
}

總結

翻轉卡片效果使用了以下css的知識點：

1. 背景色—— background-color
2. 背景漸變 —— background-image: linear-gradient()
3. css 轉換 —— transform
4. css 旋轉 —— rotateY、rotateX
5. css 透視 —— perspective

助CSS所提供的animation動畫屬性及2D、3D變換屬性，我們可以擺脫對JavaScript的依賴，設計開發各類效果優秀的前端動態效果，在之前文章和視頻中我們也介紹了不少基于CSS與JavaScript技術實現的各類動畫及頁面元素設計效果。本文主要介紹使用CSS技術實現精美的3D旋轉相冊效果。主要實現效果動畫展示如下：

核心技術說明

本例開發主要涉及使用技術包括animation動畫屬性、keyframes關鍵幀、transform變形等相關知識及方法、技術。部分核心技術說明如下：

1、CSS自定義屬性（變量）

在使用CSS進行樣式定義時，可以使用自定義屬性，即變量。從變量而言考慮的話，會涉及到變量的定義、賦值與使用等。自定義屬性的聲明使用--表示。其賦值與style樣式其他屬性類似可通過：（冒號）進行賦值。在使用該自定義屬性時需要用var()函數對屬性名進行包裹。如在自定義變量需要進行數學運算時需要使用calc()方法。自定義屬性實例如下：

:root{--fontSize:2em;}
p{font-size:var(--fontSize);}

CSS自定義屬性使用實例如上所示，我們定義了一個fontSize變量，在P元素選擇器中使用了該定義的變量，即設置P段落字體size為2em。

2、3D變換屬性與方法

實現3D效果需要使用3D變換相關屬性與方法，其主要屬性方法包括transform-origin（旋轉原點）、transform-style（旋轉類型2D/3D）、perspective（透視點）等屬性，主要方法包括translate位移、scale放縮、rotate旋轉與skew扭曲等。使用實例代碼如下：

position: absolute;//定位
transform-origin: center;//中心點
transform-style: preserve-3d;//類型
transform: 
translateZ(400px) rotateY(60deg);
//沿Z軸移動400px，沿Y軸旋轉60度

3、flex布局

本例需要使用flex布局用于實現將頁面元素在頁面中位置進行定位與布局設置，主要設置水平與垂直居中效果，實例代碼如下：

display: flex;
justify-content: center;
align-items: center;

設計與實現

在明確以上基本技術點之后，我們就可以收集素材完整3D旋轉相冊的設計與制作。首先第一步就是素材的采集，本例所需圖片如下所示：

在完成素材搜集基礎上就可以使用CSS頁面布局技術等，實現頁面的布局，通過旋轉變換，將10張圖片進行不同角度的分布。其中頁面布局代碼如下：

完成頁面元素設置之后，就要考慮頁面布局問題，本例需要實現旋轉因此需要將每一個圖片所對應元素進行旋轉等變換設置。部分代碼如下：

核心CSS樣式設置如上圖所示，其中我們定義了動畫animate，因此需要使用keyframes對其關鍵幀進行定義，關鍵幀定義如下：

通過關鍵幀定義之后，整個gallery層就會繞著y軸進行旋轉最終實現動態旋轉效果。本例靜態展示如下圖所示：

以上給出了3D旋轉相冊設計及實現過程核心知識點及實現思路過程、核心代碼說明。如需完整代碼請關注并私信。

本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！