CSS3导演：让你体验到星球大战的开头

aggression
28 阅读3分钟

CSS3为什么是导演？

  1. 控制呈现方式：就像导演决定演员的表情、走位和节奏，CSS 决定 HTML 元素的颜色、大小、位置、间距、字体等。
  2. 不改变本质内容：即使没有 CSS，HTML 依然存在并有意义（就像没有导演，剧本还是剧本），但加上 CSS 后，整个“演出”才变得生动、美观、有层次。
  3. 统一风格与节奏：一个好导演会让整部戏风格统一、节奏流畅；同样，良好的 CSS 能让整个网站视觉一致、用户体验顺畅。

星球大战的开头情况

Snipaste_2025-11-09_22-22-29.png

建造思路：

一、思考动画效果

✅ STAR和 WARS 分为两部分 出现有 大小变化 和 出现消失效果
✅ 中间的文，大小有改变，并且最后消失
✅ 文字有3D透视感，在空中旋转

二 、html基本架构 搭建电影舞台
<div class="starwars">
        <img src="star.svg" alt="star" class="star">
        <img src="wars.svg" alt="wars" class="wars">
        <h2 class="byline" id="line">
        <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>
        </h2>
    </div>
  • starwars主舞台：整个画面在这里显示
  • star.svg ，wars.svg 和 byline 舞台上的演员（svg图片便于高清缩放）

h2是语义化标签，在这里比div更加适合
span标签可以使每个文字的效果互不影响

三、CSS3 “导演”总领全局
  • 每次在写css文件时开始记得css重置，保持好习惯✅
  • 如果不知道的可以直接问AI(提示词：请返回标准的 css reset 代码，业内推荐的)

1. 让演员在“舞台”中央“演出”（水平垂直居中布局）

    perspective: 800px;
    transform-style: preserve-3d;
    width: 34em;
    height: 17em;
    /* 绝对定位 */
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

关键核心：

perspective：创建3D视角（也就是有了我们现实中的Z轴）
transform-style: preserve-3d:保持3D 变换
position: absolute ：（子绝父相的口诀），定位祖先（这里是body） transform: translate(-50%,-50%)：虽然盒子是从中间开始，但是我们要将盒子的中心定位到整体中心

属性效果
perspective决定了 3D 变换元素的“观察距离，决定3D效果的深度感
transform-style: preserve-3d子元素保持在 3D 空间中，能正确呈现深度、旋转和层级关系

2. 图片“动”起来的关键

  • @keyframes wars设计动画的关键帧
.star {
    animation: star 10s ease-out infinite;
}
.wars {
    animation: wars 10s ease-out infinite;
}
@keyframes star {
 0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
 }
 20% {
    opacity: 1;   
 }
 89%{
    opacity: 1;
    transform: scale(1);
 }
 100% {
    opacity: 0;
    transform: translateZ(-10000em);
 }
}
@keyframes wars {
    0% {
        opacity: 0;
        transform: scale(1.5) translateY(0.5em);
    }
    20% {
        opacity: 1;
    }
    90% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: translateZ(-10000em);
    }
}
属性介绍
star动画名称，后面设置关键帧的名称
10s动画持续时间
ease-out缓动函数，表示动画开始快、结束慢
infinite无限循环播放
  • 0%，这一类的都是动画的关键帧 - scale(1)：放大函数，里面的数字是放大倍数
  • translateZ(-10000em) ：让内容“飞向”远处，结合3D效果可以向飞船一样飞走的效果

3. 文字的旋转入场

.byline {
    animation: move-byline 10s linear infinite;
}
.byline span {
    display: inline-block; 
    animation: spin-letters 10s linear infinite;
}
@keyframes move-byline {
 0% {
    transform: translateZ(5em);
 }      
 100% {
    transform: translateZ(0);
 }
}
@keyframes spin-letters {
    0%,10% {
        opacity: 0;
        transform: rotateY(90deg);
    }
    30% {
        opacity: 1;
    }
    70%,86% {
        opacity: 1;
        transform: rotateY(0);
    }
    95%,100% {
        opacity: 0;
    }
}

⚠️由于span为行内元素，不支持旋转，所以我们要 display: inline-block 使其变为行内块元素

  • 从transform: rotateY(90deg) 到transform: rotateY(0) 使文字从开始的垂直屏幕到屏幕产生旋转效果
avatar
文章
阅读
粉丝