“星战”再现：一步步带你打造《星球大战》开场动画

blzlh
VIP.1 初学乍练
283 阅读4分钟

这次我们来利用css中的动画animation和@keyframes来完成《星球大战》的开场动画。

少说废话，先看成果图

video.gif

首先让我们先了解一下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的动画功能十分强大但也很复杂。从定义关键帧到应用动画属性，每一步都为实现复杂和动态的视觉效果打下了坚实的基础。

avatar
文章
阅读
粉丝