CSS動畫制作

、制作網(wǎng)頁動畫(了解)

本章目標(biāo)

會使用transform 2D變形設(shè)置網(wǎng)頁元素樣式
會使用transition制作過渡動畫
會使用animation制作網(wǎng)頁動畫

如何在網(wǎng)頁中實現(xiàn)動畫效果？

動態(tài)圖片
Flash
JavaScript

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

CSS3變形
CSS3過渡
CSS3動畫

6.1、CSS變形

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

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

在這里插入圖片描述

tml：

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

<h1>水平翻轉(zhuǎn)</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%);
}

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

總結(jié)

翻轉(zhuǎn)卡片效果使用了以下css的知識點：

背景色—— background-color
背景漸變 —— background-image: linear-gradient()
css 轉(zhuǎn)換 —— transform
css 旋轉(zhuǎn) —— rotateY、rotateX
css 透視 —— perspective

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

純CSS技術(shù)實現(xiàn)旋轉(zhuǎn)相冊效果展示

核心技術(shù)說明

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

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

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

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

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

2、3D變換屬性與方法

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

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

3、flex布局

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

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

設(shè)計與實現(xiàn)

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

3D旋轉(zhuǎn)相冊圖片素材

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

頁面布局代碼

完成頁面元素設(shè)置之后，就要考慮頁面布局問題，本例需要實現(xiàn)旋轉(zhuǎn)因此需要將每一個圖片所對應(yīng)元素進(jìn)行旋轉(zhuǎn)等變換設(shè)置。部分代碼如下：

CSS樣式設(shè)置

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

動畫關(guān)鍵幀定義

通過關(guān)鍵幀定義之后，整個gallery層就會繞著y軸進(jìn)行旋轉(zhuǎn)最終實現(xiàn)動態(tài)旋轉(zhuǎn)效果。本例靜態(tài)展示如下圖所示：

3D旋轉(zhuǎn)相冊靜態(tài)效果展示

以上給出了3D旋轉(zhuǎn)相冊設(shè)計及實現(xiàn)過程核心知識點及實現(xiàn)思路過程、核心代碼說明。如需完整代碼請關(guān)注并私信。

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

在線咨詢

上一篇：4K高清重置經(jīng)典帝國！2019年最香冷飯游戲就是它了
下一篇：手摸手帶你實現(xiàn)一個靜態(tài)服務(wù)器，超詳細(xì)

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。