一篇文章带你学会如何用CSS与HTML建出一个炫酷的页面

黑马王子13
783 阅读8分钟

星球大战特效页面解析：CSS3 动画与布局技巧

引言

CSS 与 HTML5作为大厂切图崽必备技能，掌握之后基本可以摆烂养老，为了让每个人以后都能工作稳定，今天我用一篇文章教会你如何使用，这篇文章我将用此来创造出一个酷炫的《星球大战：源力觉醒》电影开始页面，希望大家能从中收获经验。

页面结构

要想有一个帅气酷炫的页面，我们要先构造好页面基本结构。首先，在你的HTML页面中输入！或html:5获得一个基本框架，在title中输入我们的页面名称，也就是星球大战,其实再输入emmet语句快捷输入得到整个div组合(若不会用emmet语句请看博主之前的文章），获得主容器.starwars里面嵌套了两个图片元素与标题元素The Force Awakens。

<!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>
<body>
  <div class="starwars">
    <img src="./star.svg" class="star" alt="">
    <img src="./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</force>
      <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>
</body>
</html>

CSS重置与基本样式

为了确保页面在不同浏览器中具有一致的表现，我们首先引入了一个基于Eric Meyer的CSS重置规则。此规则重置了所有HTML元素的默认样式，避免了因浏览器差异导致的显示问题。

注意，其实我们有更简单的方法，就是*{,这是CSS中的通配符，包含所有元素，可以替代下面如此多行的代码，但我们为什么不这样做呢？ 是因为*{的性能不太好，所有我们更宁愿列出来所有标签，以免程序出现BUG。

/* 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, 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;
}

这样做后，我们的初始页面会变的干净且适配所有浏览器

接着，我们设置了页面的整体样式，包括背景颜色、背景图片以及.starwars容器的3D透视效果。 要想我们的图片有类似消失的效果，必须设置3D效果，使图片往里缩小，达到类似消失的效果。为了让图片在页面最中间，我们使用了绝对定位position: absolute概念，再加上top,left,transform:translate达到图片再页面最中间展示的效果（这只是css中的一种方法而已）。再设置了标题元素byline的属性，字体，颜色，位置等。

/* 设置 html 和 body 高度为视窗高度的100%，确保页面占据整个浏览器窗口 */
html, body {
    height: 100vh;
  }
  
  /* 给 body 添加背景色和背景图，并设置背景图不重复 */
  body {
    background: #000 url('./bg.jpg');
  }
  
  /* 创建一个具有3D透视效果的容器，用于“Star Wars”滚动文本动画 */
  .starwars {
    perspective:800px; /* 设置3D透视效果的距离 */
    transform-style:preserve-3d; /* 保留子元素的3D转换 */
    height: 17em; /* 设置容器的高度 */
    width: 34em; /* 设置容器的宽度 */
    position: absolute; /* 使用绝对定位来放置容器 */
    top: 50%; /* 垂直居中定位 */
    left: 50%; /* 水平定位居中 */
    transform: translate(-50%, -50%); /* 调整自身位置以实现精确居中 */
  }
  /* 设置图片的宽度为100%，使其适应其父元素的宽度 */
  img {
    width: 100%;
  }
  
  /* 为 'star', 'wars' 和 'byline' 元素设置绝对定位，以便在 '.starwars' 容器内自由移动 */
  .star, .wars, .byline {
    position: absolute;
  }
  
  /* 设置 'star' 元素的位置 */
  .star {
    top: -0.75em; /* 向上偏移 */
  }
  
  /* 设置 'wars' 元素的位置 */
  .wars {
    bottom: -0.5em; /* 向下偏移 */
  }
  
  /* 设置 'byline' 元素的样式，包括颜色、字体大小、水平对齐方式等 */
  .byline {
    color: #fff; /* 文字颜色为白色 */
    font-size: 2.25em; /* 设置字体大小 */
    left: -2em; /* 左边向内缩进 */
    right: -2em; /* 右边向内缩进 */
    text-align: center; /* 文本居中对齐 */
    text-transform: uppercase; /* 将文本转换为大写 */
    top: 42%; /* 设置垂直位置 */
  }

动画效果

图片动画

为了让“star”和“wars”两个图片元素产生动态效果，我们分别为它们定义了动画。这两个动画的主要目的是让图片从远处逐渐靠近，然后又慢慢远离，最终消失不见。通过调整opacity属性和transform属性，我们可以实现这一效果。我们需要使用animation，使图片有动画属性，设置持续时间，延迟，循环次数。和@keyframes关键帧属性，图片在某一瞬间的改变行为。

/* 为 'star' 元素添加动画效果，包括动画名称、持续时间、缓动函数和播放次数 */
.star {
    animation: star 10s ease-out infinite;  // 由快到慢
}
.wars {
    animation: wars 10s ease-out infinite; 
  }

/* 定义 'star' 动画的关键帧，控制 'star' 元素从透明到显示再到消失的过程 */
@keyframes star {
    0%{
      opacity: 0; /* 开始时完全透明 */
      transform:scale(1.5) translate(-0.75em); /* 放大并定位 */
    }
    20%{
      opacity:1; /* 在20%的时间点变得完全不透明 */
    }
    89%{
      opacity:1; /* 在89%的时间点保持不透明 */
      transform: scale(1); /* 回到原始大小 */
    }
    100%{
      opacity:0; /* 结束时完全透明 */
      transform: translateZ(-1000em); /* 向后移动很远的距离，看起来像是消失了 */
    }
 }

这两组代码有什么区别呢？细心的同学可以发现，在第三个行为改变点时，star为89%时改变，而wars中则是90%时才改变，我们这样做的好处是什么呢，答案是：让这两张图片的消失有一个顺序，显得更加真实和有层次感。有时候，这样一个小小的细节，就是你和别人之间的差距。

@keyframes wars {
   0%{
     opacity: 0; /* 开始时完全透明 */
     transform:scale(1.5) translate(0.5em); /* 放大并定位 */
   }
   20%{
     opacity:1; /* 在20%的时间点变得完全不透明 */
   }
   90%{
     opacity:1; /* 在90%的时间点保持不透明 */
     transform: scale(1); /* 回到原始大小 */
   }
   100%{
     opacity:0; /* 结束时完全透明 */
     transform: translateZ(-1000em); /* 向后移动很远的距离，看起来像是消失了 */
   }
 }
文字动画

对于副标题.byline及其内部的span元素，我们也定义了动画效果，使其产生一种从屏幕深处逐渐浮现出来的视觉感受。同时，每个字母还会单独进行旋转动画rotate，增强整体的动感。这中间也有细节，在我们设置文字旋转的时候，因为inline 元素不支持transform,所有我们要用display将属性切换为inline-block，这样，我们的旋转效果才能顺利展现出来。这是个很难发现的错误，写的时候要注意仔细。

/* 为 'byline' 元素添加动画效果 */
.byline {
    animation: movie-byline 10s linear infinite;
}

/* 为 'byline' 下的 span 元素添加旋转动画效果 */
.byline span {
    animation: spin-letters 10s linear infinite;
    display: inline-block; /* 让 span 元素像块级元素一样显示，以便应用旋转动画 */
}

/* 定义 'movie-byline' 动画的关键帧，使 'byline' 元素产生深度变化的效果 */
@keyframes movie-byline {
    0%{
      transform: translateZ(5em); /* 开始时向用户方向移动 */
    }
    100%{
      transform: translateZ(0em); /* 结束时回到原位 */
    }
}

/* 定义 'spin-letters' 动画的关键帧，让 'byline' 中的文字产生旋转效果 */
@keyframes spin-letters {
    0%,10%{
      opacity: 0; /* 开始时文字完全不可见 */
      transform:rotateY(90deg); /* 初始旋转角度为90度，文字面向侧面 */
    }
    30%{
      opacity: 1; /* 在30%的时间点文字完全可见 */
    }
    70%,86%{
      transform:rotateY(0); /* 在70%-86%的时间段内文字面向用户 */
      opacity: 1; /* 文字保持完全可见 */
    }
    95%,100%{
      opacity: 0; /* 接近结束时文字再次变得不可见 */
    }
}

结论

image.png 假如一切顺利的话，我们会得到这样一个炫酷的页面，他会循环播放。是不是很像电影的开场画面呢？

这个过程中，我们不仅实践了CSS3中的一些高级特性，如3D变换和关键帧动画，还学习了如何通过巧妙的设计使静态网页变得生动有趣。这样的技术不仅可以应用于娱乐项目，也能为网站增加互动性和吸引力，提升用户体验。

为了巩固这次的学习，建议大家在网上寻找别的主题来自己创建出一个炫酷的页面，这样我们的水平才会有所提高，为了以后的生活，各位切图崽们努力起来吧！

avatar
文章
阅读
粉丝