这次我们来利用css中的动画animation
和@keyframes
来完成《星球大战》的开场动画。
少说废话,先看成果图
首先让我们先了解一下css中的这两个制作动画的关键属性
animation 和 @keyframes
@keyframes
规则
@keyframes
规则是用来定义动画的关键帧。每个关键帧描述了在动画过程中某个时刻的样式。通过组合多个关键帧,可以创建复杂的动画效果。
语法
@keyframes animation-name {
from { /* 起始状态 */ }
to { /* 结束状态 */ }
}
或者
@keyframes animation-name {
0% { /* 起始状态 */ }
50% { /* 中间状态 */ }
100% { /* 结束状态 */ }
}
animation
属性
animation
属性用于将 @keyframes
定义的动画应用到元素上。它可以控制动画的各种行为,如持续时间、延迟、重复次数等。
语法
element {
animation-name: keyframes-name;
animation-duration: duration;
animation-timing-function: timing-function;
animation-delay: delay;
animation-iteration-count: iteration-count;
animation-direction: direction;
animation-fill-mode: fill-mode;
animation-play-state: play-state;
}
简化写法
element {
animation: keyframes-name duration timing-function delay iteration-count direction fill-mode play-state;
}
属性说明
animation-name
: 指定@keyframes
规则的名称。animation-duration
: 动画完成一个周期所花费的时间,单位可以是秒(s)或毫秒(ms)。animation-timing-function
: 控制动画的速度曲线,常见的值有linear
,ease
,ease-in
,ease-out
,ease-in-out
等。animation-delay
: 动画开始前的延迟时间。animation-iteration-count
: 动画重复的次数,可以是具体的数字或infinite
表示无限次。animation-direction
: 动画是否反向播放,常见值有normal
,reverse
,alternate
,alternate-reverse
。animation-fill-mode
: 动画结束后的状态,常见值有none
,forwards
,backwards
,both
。animation-play-state
: 控制动画的播放状态,常见值有running
,paused
。
好了,现在让我们正式开始制作《星球大战》的开场动画。
创建HTML基本结构
使用HTML构建动画的基本框架,添加页面的主要元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星球大战</title>
<link rel="stylesheet" href="./common.css">
</head>
<div class="starwars">
<img src="./images/star.svg" class="star" alt="转存失败,建议直接上传图片文件">
<img src="./images/wars.svg" class="wars" alt="转存失败,建议直接上传图片文件">
<h2 class="byline">
<span>T</span>
<span>h</span>
<span>e</span>
<span>F</span>
<span>o</span>
<span>r</span>
<span>c</span>
<span>e</span>
<span>A</span>
<span>w</span>
<span>a</span>
<span>k</span>
<span>e</span>
<span>n</span>
<span>s</span>
</h2>
</div>
</html>
设计CSS样式
利用CSS为文本添加《星球大战》风格的视觉效果,设置太空场景背景图片,调整字体大小、颜色及行间距以匹配电影风格。
/* Eric Meyer's Reset CSS v2.0 - http://meyerweb.com/eric/tools/css/reset/ */
/* 扩展版本 */
/* css reset */
/* 小技巧: * 性能不太好 所以我们宁愿列出所有的标签 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 业务样式 */
html,
body {
height: 100vh; /*视口高度*/
}
body {
background: #000 url('./images/bg.jpg');
}
.starwars {
perspective: 800px;
/* 定义了3d的透视效果,值越大透视效果越强 */
transform-style: preserve-3d;
/* 开启3d效果 */
width: 34em;
height: 17em;
position: absolute;
/* 绝对定位 */
top: 50%;
left: 50%;
/* 移动 自身的大小 */
transform: translate(-50%, -50%);
/* background-color: red; */
}
img {
width: 100%;
}
.star,
.wars,
.byline {
position: absolute;
}
.star {
top: -0.75em
}
.wars {
bottom: -0.5em;
}
.byline {
color: #fff;
font-size: 2.25em;
left: -2em;
right: -2em;
text-align: center;
text-transform: uppercase; /*转大写*/
top: 42%;
}
实现动画
使用CSS中的 @keyframes
规则创建文字滚动动画,动画的速度曲线(easing)调整,循环播放动画。使动画完成淡出,文字旋转等效果。
/* 动作导演 */
.star {
/* 动画名字 + keyframes 定义动作 */
animation: star 10s ease-out infinite;
/* animation: 动画名字, 动画时长, 动画速度曲线, 动画次数, 动画方向 */
/* ease-out 先快后慢 infinite 无限循环 */
}
.wars {
animation: wars 10s ease-out infinite;
}
/* 通过改变不同时间的opacity透明度来完成动画的进入和淡出效果 */
@keyframes star {
0% {
/* 动画时间的百分比 */
opacity: 0;
/*透明*/
transform: scale(1.5) translateY(-0.75em);
/* scale()将元素放大到原来的几倍 */
}
20% {
opacity: 1;
/*不透明*/
}
89% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: translateZ(-1000em);
/* 向内移动,实现退场的缩小效果 */
}
}
@keyframes wars {
0% {
opacity: 0;
transform: scale(1.5) translateY(-0.75em);
}
20% {
opacity: 1;
}
90% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: translateZ(-1000em);
}
}
.byline {
animation: movie-byline 10s linear infinite;
}
/*linear 匀速移动*/
.byline span {
display: inline-block;
animation: spin-letters 10s linear infinite;
}
@keyframes movie-byline {
0% {
transform: translateZ(5em);
}
100% {
transform: translateZ(0em);
}
}
@keyframes spin-letters {
0%,
10% {
opacity: 0;
/* 0到10不可见 */
transform: rotateY(90deg);
/* rotate 旋转 */
}
30% {
opacity: 1;
}
70%,
86% {
transform: rotateY(0);
opacity: 1;
}
95%,
100% {
opacity: 0;
}
}
结语
现在,我们从零完成了《星球大战》的开场动画,css的动画功能十分强大但也很复杂。从定义关键帧到应用动画属性,每一步都为实现复杂和动态的视觉效果打下了坚实的基础。