设计一个类似“赛博朋克2077”风格的视频网站

技术四毛喵
3,175 阅读14分钟

本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！

前言

早在半年前，我就开始设计了“赛博朋克2077”游戏类似风格的一个视频网站，但是当时由于太懒了，只写了个大体布局，没有坚持写下去，直到最近我才开始将剩余的代码补上。

这篇文章用来总结和分享我在设计网站的整个过程以及展示成果。

网站介绍

网站名称：TvStation2077

网站地址：出于某些原因，暂且不开放网站地址。

网站简介：这是一个很酷、未来派、赛博朋克风格的电视台网站，你可以在这里看到全国各地的电视台，甚至可以看外国的电视台，高达78个电视台任君选择。高清、无广告、实时直播，你确定不来康康吗？（编不下去了......）

网站类型及用途：视频网站，用于播放电视台。

网站背景（狗头）：2077年，我访问的视频网站被评为全球最烂网站。为什么呢？广告诈骗层出不穷，贫困送钱的人流量全球第一。这是事实，无法否认......但人们还是蜂拥而来，这网站总会给你一丝希望，谎言也好，幻觉也罢。但如此近，仿佛触手可及，让人奋不顾身。这里充斥着迷梦。而我，正是逐梦之人！

网站声明：该网站仅用于学术研究和作品展示，不以盈利为目的。电视台信号和部分素材来源于互联网，如有侵权，请联系本人（邮箱：only1zhuo@qq.com），本人将积极配合处理。

网站技术：vue2.x + DPlayer.js + SCSS + Animation.css

网站展示：网站目前仅有4个页面，分别是“首页”、“电视台”、“关于”、“播放页”。

下面展示网站各个页面，仅供参考，建议各位大爷亲自到电脑上浏览网站，还没有做移动端，请不要用手机浏览。

  • “首页”展示： 首页2 (1).png

  • “电视台”展示： 电视台 (1).png

  • “关于”展示： 关于 (1).png

  • “播放页”展示： 播放页 (1).png

网站起源

这个网站的灵感主要来源于2020年12月09日蠢驴发售的一款游戏“赛博朋克2077”，我觉得这款游戏很 coooooool（这很暴雪），于是我就打算开发一个“赛博朋克”风格的网站。其实就是想蹭 “赛博朋克2077” 的热度，顺便恶搞一下。

网站的灵感也和与我在公司负责开发直播网站前端部分的过程有关，在开发直播网站时，有时候需要测试播放器，但后端无法及时提供测试直播源，所以我自己在网上找到了一个电视台直播源来做测试，这个电视台直播源立刻激发了我的灵感，当时我就想为什么自己不去做一个个人网站，一个播放电视台的网站，这不很 coooooooooooool 吗？

当然，原因不只有上面两个，那也是因为我当时看到了“CodingStartup起码课”写的一篇文章“纯 CSS 制作赛博朋克 2077 “故障风”按钮”，很感兴趣，自己就立刻用键盘照着操了一遍，woooow，这特效很 coooooooooooooooooool！我也想制作拥有这样类似特效的网站。

总之很 cool 就是了，我二话不说，就写了起来......

image.png

然而，当时太懒了，就写了个布局什么的，就没写了（捂脸）......最近才补上剩余的代码。

果然立下 flag 什么的都很简单，但实际上一做起来却艰难重重。

在这里很感谢“掘金”平台，能够举行这么多活动来帮助我扶稳 flag。没错！我最近恶补剩余的代码就是为了出产这篇文章，参与“好文召集令活动”，这是我做这个网站最后的一个原因。我要白嫖“掘金”奖品！！！

设计风格

TvStation2077 （下文均简称 TvStation）的设计很大程度参考了“赛博朋克2077”的官网，个人很喜欢“赛博朋克2077”官网（“赛博朋克2077”在下文均简称为“2077”）的科技感、故障效果、不规则图形设计和亮暗色调搭配，但是即使参考了很多相关因素，我写的 TvStation 看起来与 2077 官网并没有太多的相同点，毕竟一个是视频网站，另一个是游戏官网，两者的侧重点原本就不尽相同，而且后者的设计空间更大，另一点是因为 TvStation 融入了一些个人元素。

颜色

设计一个网站，我想多数人的思考的第一个问题就是“选择哪种颜色作为主色调”。

我希望 TvStation 有一定的科技感、未来感，拥有一些电子元素、黑客元素。

在这里我是直接到 2077 官网找灵感，我很喜欢 2077 官网的颜色搭配，很亮眼以及未来派，因此我确定了采用 2077 官网的几个色调作为主色调。

  • 点缀色调：#ff003c（红色）
  • 活跃色调：#f8f005（黄色）
  • 阴影色调：#00e6f6（蓝色）
  • 部分背景色调：#000000（黑色）

于是，我在全局的 scss 里写下了这三个色调变量，黑色的色调不用写变量。在整个网站里，所有元素基本都是使用了这四个色调进行搭配。

image.png

有一个地方需要说明一下，网站的头部在最初是用红色（#c03）。

微信图片_20210711184424 (1).png

在网站设计上，很少有人会用渐变，我想设计大胆一点，后面就采用了 #ff003c 到 #f8f005 的渐变。

UI素材

先说说这个 logo，原本的想法是下载一款像 2077 游戏一样很有科技感的字体，然后用样式去控制每个字体的间距，拼凑出一个 logo 出来，但是当时没有找到合适的字体。然后我就自己动手设计 logo 了，这个 logo 真的是我自己用数位板在 ps 里一笔一笔画出来，我设计了一整天（我太难了）。logo 是仿照 2077 的 logo，主要是使用了黄色和蓝色，黄色作为主色调，蓝色作为阴影。

TvStation2077.png

后来我才找到了 2077 游戏设计的字体（奔溃）......蠢驴的字体设计得真的很有艺术感。

字体来源的网站上面有说字体是免费的，可商用的，但我不敢保证事实是否如此（如果真的是，蠢驴也太良心了吧），喜欢的同学可以去看看。

image.png (蠢驴设计的字体)

字体

关于字体，我这里主要用了三套的外来字体，一套是 2077 设计的字体，另外两套是站酷网设计的可商用字体，分别是“站酷快乐体2016修订版”和“站酷高端黑修订151105”。

网站的主要字体是“站酷快乐体2016修订版”，其次是苹果设计的“PingFang SC”。“2077 字体”和“站酷高端黑修订151105”并没有用上，但是项目还是会引用，作为备用字体。

为什么我暂时没有用上蠢驴的字体，那是因为蠢驴设计的某些字母的辨别度并不好，它的字体适合用来制作 logo 或做图标，但我认为并不适合常规地方所用，你看 2077 的官网除了 logo 外也没有使用到这个字体。

我在 scss 的 mixin 里写了三套字体组合方案，分别以 “2077字体”、“站酷快乐体”和苹果设计的“PingFang SC”字体为主，这里不详细说明，具体可以看下述代码。

scss 代码

// 三套外来字体
@font-face {
  font-family: Cyberpunk;
  src: url('~@/assets/font/Cyberpunk.ttf'),
    url('~@/assets/font/Cyberpunk.otf');
}

@font-face {
  font-family: '站酷快乐体2016修订版';
  src: url('~@/assets/font/站酷快乐体2016修订版.ttf');
}

@font-face {
  font-family: '站酷高端黑修订151105';
  src: url('~@/assets/font/站酷高端黑修订151105.ttf');
}

// 三套字体组合方案
@mixin font-family($type) {
  @if $type=='cyber' {
    font-family: Cyberpunk, '站酷快乐体2016修订版', PingFang SC, tahoma, arial, 'Microsoft Yahei', 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
  }

  @if $type=='zkkl' {
    font-family: '站酷快乐体2016修订版', PingFang SC, tahoma, arial, 'Microsoft Yahei', 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
  }

  @if $type=='ping' {
    font-family: PingFang SC, tahoma, arial, 'Microsoft Yahei', 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
  }
}

个人元素

TvStation 应该是一个很硬核和有科技感的网站，我相信绝大多数人听到“硬核”这两个字，联想到的图形不会是圆形，而是方方正正的图形或不规则的直边图形。所以在这个网站里，你基本不会看到有圆形，多数是一些直边图形。

  • 头像 image.png

  • 搜索框

image.png

而科技感主要是利用了“电脑系统样式”和“故障特效”来实现。

  1. “电脑系统样式”

  • 列表元素：参考了 win/mac 窗口 image.png

  • 文章链接三连提示：参考了 linux 命令行界面 image.png

  1. “故障特效”下面进行单独介绍。

故障特效

在“CodingStartup起码课” 写的一篇文章“纯 CSS 制作赛博朋克 2077 “故障风”按钮”里就已经很详细地说明了如何实现类似 2077 官网的“故障特效”，而 TvStation 的 “故障特效” 是在这个代码的基础下做了一些更改，有兴趣的同学可以看看“CodingStartup起码课”写的文章，又或者看看我下面写的代码（想实现功能的，我更建议看“CodingStartup起码课”所写的文章，我这里的代码由于部分是贴合项目的，可能会望文生义）。

你在首页看到的“正在热播”一闪一闪的，这个就是“故障特效”。

QQ录屏20210711195819.gif

首先我写的“故障特效”有两种，我分别命名为 “bug” 和 “bugB”（其实对于“故障特效”，我更习惯叫它“Bug特效”，下面），对应我写的两个 scss 的 @mixin。这两种效果事实上是一样的，只是用来解决不同的场景。

动画

“故障特效”使用到 animation 动画，而这个动画的核心代码是 clip-path 和 transform，clip-path 用于裁剪元素制作切片，transform 用来位移切片。因为我这里要做的故障动画并不是只有一种，有几种，为了省力，就把定义好的切片值赋予给变量里面。

这是项目里的切片变量，一共十个切片

$slice-1: inset(29% 0px 64% 0);
$slice-2: inset(31% 0px 64% 0);
$slice-3: inset(35% 0px 40% 0);
$slice-4: inset(40% 0px 43% 0);
$slice-5: inset(24% 0px 67% 0);
$slice-6: inset(60% 0px 29% 0);
$slice-7: inset(79% 0px 14% 0);
$slice-8: inset(52% 0px 33% 0);
$slice-9: inset(56% 0px 39% 0);
$slice-10: inset(10% 0px 82% 0);

然后就可以开始写 @keyframes 了，将 clip-path 和 transform 写进相应的关键帧就可以了，transform 的位移自己进行设定合适值即可，下面给出 bug-1 特效的示例，项目里还有4种 @keyframes（如：bug-2，bug-3），都是 clip-path 和 transform 的组合，这里就不一一贴出来了。

@keyframes bug-1 {
  0% {
    clip-path: $slice-1;
    transform: translate(-10px, -10px);
    visibility: visible;
  }

  5% {
    clip-path: $slice-2;
    transform: translate(10px, 10px);
  }

  10% {
    clip-path: $slice-3;
    transform: translate(-10px, 10px);
  }

  15% {
    clip-path: $slice-4;
    transform: translate(0px, 5px);
  }

  20% {
    clip-path: $slice-5;
    transform: translate(-5px, 0px);
  }

  25% {
    clip-path: $slice-6;
    transform: translate(5px, 0px);
  }

  30% {
    clip-path: $slice-7;
    transform: translate(5px, 10px);
  }

  35% {
    clip-path: $slice-8;
    transform: translate(-10px, 10px);
  }

  40% {
    clip-path: $slice-9;
    transform: translate(20px, -10px);
  }

  45% {
    clip-path: $slice-10;
    transform: translate(-10px, 0px);
  }

  50% {
    clip-path: $slice-1;
    transform: translate(0);
  }

  55% {
    visibility: hidden;
  }

  100% {
    visibility: hidden;
  }
}

@mixin bug

这是第一种“故障特效”方案，采用伪类的方式添加，$name 就是动画名，传上面的 “bug-1” 字符串值，$content 是“故障特效”里面的文字，比如，你的 div 里有“正在直播”四个字，如果你需要闪烁“正在直播”这四个字，就将“正在直播”字符串赋予给 $content。$bg 就是特效的背景颜色，$delay 是动画的延迟时间。

@mixin bug($name, $content, $bg: #000, $delay: 0s) {
  &:before {
    content: $content;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    pointer-events: none;
    text-align: center;
    letter-spacing: 3px;
    background: $bg;
    text-shadow: -4px -4px 0px #f8f005, 4px 4px 0px #00e6f6;
    animation: $name 2s infinite;
    animation-timing-function: steps(2, end);
    animation-delay: $delay;
  }
}

使用示例

div {
    ...
    @include bug("bug-1", "正在热播_");
}

这种方案使用简单，但是只适合用于静态的展示，如果遇到像下面动态列表数据，一开始是根本不知道 div 里面要显示什么文字，因此不能通过上面的 $content 去赋予特效闪烁的文字。

image.png

因此就有了下面 @mixin bugB 的方案

@mixin bugB

bugB 是用来给动态数据添加“故障特效”（事实上它也可以给静态数据添加特效），bugB 比 bug 少了一个 $content 参数，因为它不再依赖于传递的文字，它只负责去给指定的内容添加特效。

@mixin bugB($name, $bg: #000, $delay: 0s) {
  pointer-events: none;
  letter-spacing: 3px;
  background: $bg;
  text-shadow: -4px -4px 0px #f8f005, 4px 4px 0px #00e6f6;
  animation: $name 2s infinite;
  animation-timing-function: steps(2, end);
  animation-delay: $delay;
}

使用示例

<div class="tv-card">
    <div class="name">CCTV-1 综合频道</div>
    <div class="special-name">CCTV-1 综合频道</div>
</div>

<style lang="scss">
    .tv-card {
        position: relative;
        width: 100px;
        height: 100px;
        ...
        .name {
            ...
        }
        .special-name {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            visibility: hidden;
        }
        &:hover {
            .special-name {
                @include bugB("bug-1");
            }
        }
    }
</style>

在例子里，写了一个 special-name 的 div，这个 div 就是用来专门显示“故障特效”，在 special-name 引入 bugB 动画即可。那么在动态数据场境中，我们只要将动态数据赋予到 special-name 里面，我们就可以给动态数据添加“故障特效”了。

随机效果

我还想进行对列表数据随机添加“故障特效”的动画（在项目里，是有5种“故障特效”动画），这里就使用了 scss 的 @for 和 random。

@for $i from 1 through 30 {
  &:hover {
    &:nth-child(#{$i}) {
      .tv-title {
        .special-name {
          line-height: 50px;
          padding-left: 30px;
          padding-right: 20px;
          @include bugB("bug-"+random(5), $theme);
        }
      }
    }
  }
}

一些想法

我对 TvStation 的想法实在太多了，满脑子的创意想塞满这个网站，但是可惜我一个人的时间、精力以及技术能力有限（小声地说：“又不赚钱，弄这么好干嘛？（狗头）”），导致我有时候不得不舍弃大部分的创意，这些创意包含以下的内容。

  • 做一个宣传视频，放到网站上
  • 做一个炫酷的全局故障特效，在特定情况下触发
  • 开发弹幕功能，这个功能有违我的“个人网站零成本开发”原则，所以很遗憾，没实现。“电视台弹幕网站”是不是很高端大气上档次
  • 自创不规则图形，目前的不规则图形基本是用了蠢驴的 ui 素材或只是一些缺角的图形
  • 等等

同时我也不得不放弃了某些已实现的功能或效果

  • 视频第一次加载时会出现“电视雪花效果”，因为感觉用户体验不是很好，所以删掉了（特效代码是从这个网站里抠出来做更改的，可以到我的 demo 页面看效果）。
  • “关于”页面里面原本有个 2077 的剪辑视频，当字体动画播放完毕后，会弹出这个视频。但这个视频没怎么弄，实在没精力再做下去（小声地说：“这玩意又不赚钱（狗头）”）。

网站还有一些不满意的地方，看看我写的搜索框，这tm也太普通了吧......（后面也许会改）

image.png

再看看蠢驴的输入框，还有动画效果，高端大气上档次！

QQ录屏20210711215507.gif

还有我写的那个赶工的播放页面......根本就没有怎么设计......

结语

这个网站一开始我只是觉得好玩就开发了起来，并没有觉得它有很大的意义，但是事实上它带给我的思考是很大的。一般上我们在公司都是各司其职，产品确定功能，ui 画图，前端就根据 ui 图进行开发网页，而当这些职责全部压在一个人的身上，真的很可怕。一个顺眼的网站的诞生真的很不容易，即使不考虑后端部分，它也需要精心布局，给元素调色，设计 ui 图，同时又要考虑到用户体验设计各种交互，还要代码实现......真心觉得那些白手起家的创业公司和小团队牛逼轰轰（特别点名Klei、Super Giant Games、炉石团队......额，我点名的好像都是游戏公司......）。

在整个过程中，我的大部分脑细胞基本都是用来想象和设计这个网站应该是什么样子，只有小部分脑细胞才是用来写代码实现功能，真的让我体验到了产品和设计师的艰苦。

总之，完整开发了一个网站，觉得自己很 cool（狗头）。

cool_text_slow.gif

em......我是不是忘记了还没有开发移动端......想想就觉得可怕，不知道后面还有没有精力开发。

喜欢 TvStation2077 以及这篇文章的就点个赞咯。

image.png

参考资料

  1. “CodingStartup起码课”写的文章：“纯 CSS 制作赛博朋克 2077 “故障风”按钮”
  2. 赛博朋克2077官网
  3. 赛博朋克2077字体
  4. 电视雪花效果
avatar
文章
阅读
粉丝
相关推荐
24个最新创意进度条设计，分分钟让你灵感爆表！！！
6.2k阅读
 · 
8点赞
详解App中几个常见动效的实现方式
1.7k阅读
 · 
28点赞
【canvas】网易云音乐鲸云动效『水晶音波』的简单实现
584阅读
 · 
0点赞
【canvas】网易云音乐鲸云动效『孤独星球』的简单实现
506阅读
 · 
0点赞
前端就是要炫一点
948阅读
 · 
6点赞
精选7款前端CSS动画特效分享（附效果图及在线演示）
195阅读
 · 
2点赞
分享一个vue 时钟组件
1.7k阅读
 · 
1点赞
Html5 canvas创意特效合集
688阅读
 · 
1点赞
分享4款实战的前端动画特效（附效果图及在线演示）
110阅读
 · 
1点赞