、制作网页动画(了解)

本章目标

• 会使用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旋转相册设计及实现过程核心知识点及实现思路过程、核心代码说明。如需完整代码请关注并私信。

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！