Mickey's Blog ·

HTML5&CSS3

HTML5&CSS3

这么大的标题我是怎么敢起的？

说实话从2014年HTML5正式定稿到现在这三年，我确实看到了太多变化。Flash在死，移动端起来了，网页游戏突然有了新的可能性。

我blog那个Flash仓鼠，其实我早就意识到我可能要失去他了。虽然最近我用Ruffle（一个Flash模拟器，用WebAssembly写的）把他复活了，但2017年这个时间点，Adobe已经宣布2020年停止支持Flash，Chrome默认禁用了，iOS从来不支持。那小仓鼠当时真的面临"去世"的问题。

也正是这件事让我开始认真看HTML5和CSS3能做什么。结果发现，不仅能替代Flash，很多方面还做得更好。

跨终端这件事

以前做网页，你需要一大帮人，做很多前端细节，依然不能达到很好的用户体验。现在不用了，媒体查询加响应式布局，一套代码全平台跑。

@media (max-width: 768px) {
  .content { width: 100%; }
}

就这么简单。

更关键的是iOS从来不支持Flash，Android上Flash也卡得要死。移动端只能用HTML5，没别的选择。

微信里那些刷屏的H5页面，2015年开始大爆发，本质上都是HTML5加CSS3动画。技术成熟了，移动端浏览器支持好了，才有了这波营销玩法。

Canvas和WebGL，游戏的新世界

Canvas给了浏览器一个画布，WebGL更是把3D带进来了。

对网页游戏来说这是个大事。以前只能做Flash游戏，或者简单的HTML4+JS做的文字游戏。现在Canvas可以跑2D游戏引擎（Cocos2d-JS、白鹭Egret这些），WebGL能做3D的（Three.js）。

我自己试着在Canvas上写过一个简单的弹球游戏，60fps流畅跑，手机上也没问题。这要是在几年前根本不敢想。

const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
// requestAnimationFrame保证流畅
function gameLoop() {
  // 画游戏画面
  requestAnimationFrame(gameLoop);
}

那些专业的H5游戏引擎现在甚至能做大型RPG了。WebGL虽然还有性能瓶颈，但理论上能达到接近原生游戏的画面。

我那个Flash仓鼠要是早几年用Canvas重写，根本不用担心他"去世"。

CSS3的动画能力

以前做个渐变效果，要么切图，要么用jQuery写动画。现在CSS直接搞定，而且性能更好，因为浏览器会用GPU加速。

.box {
  transition: all 0.3s ease;
  background: linear-gradient(45deg, #667eea, #764ba2);
}
.box:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

渐变、阴影、旋转、缩放，全是硬件加速。配合Canvas做游戏UI，体验直接起飞。

关键帧动画更夸张，以前要Flash才能做的动画，现在纯CSS：

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.character { animation: bounce 0.5s infinite; }

做个游戏角色跳跃，几行代码搞定。

我看到那个小仓鼠在Flash里的动画其实就是补间动画，CSS3的keyframes完全能复刻。只是当时我还没学会怎么用。

本地存储和IndexedDB

LocalStorage给了5-10MB空间，够存不少东西了——游戏进度、配置、缓存资源。

但IndexedDB，这是个完整的浏览器端数据库，支持事务、索引、异步操作。做复杂的网页游戏，比如RPG需要存大量数据的，IndexedDB就是本地最佳解决方案，我们都知道游戏为了体验是一定要搞一部分本地数据的，不然操作流畅度下降很多，这也是很多游戏外挂进绝不止的原因，都在本地。

// 简单的存档
localStorage.setItem('save_slot_1', JSON.stringify(gameData));

// IndexedDB可以存更复杂的结构
const request = indexedDB.open('GameDB', 1);

配合Application Cache（现在更推荐Service Worker了），游戏资源可以离线缓存，第二次打开秒加载。

以前网页游戏最烦的就是每次刷新数据就没了，或者只能用Cookie那可怜的4KB。现在完全不是问题。

这对网页游戏来说简直是如虎添翼。以前Flash游戏也能用SharedObject存本地数据，但那是Flash Player的功能。现在HTML5原生就支持，而且空间更大，API更标准。

Flash的黄昏

Adobe已经宣布2020年停止支持Flash。YouTube切HTML5了，各大视频网站也都切了。Chrome默认禁用Flash，需要手动开启才能用。

这不是偶然，是HTML5全面碾压的结果。

Flash的优势——动画、视频、游戏——HTML5全都能做，而且性能更好，移动端支持更好，安全性也更高（Flash的漏洞太多了）。

我以前也做过Flash动画，当时的感觉是做起来很简单，帧间补充，再多的也没尝试了，他是上个时代我能看到的余晖，感谢他的付出

仓鼠是我2015年加到blog上的，当时觉得挺好玩。没想到才两年，他就面临"失业"。好在最近我找到了Ruffle这个方案，算是给他续命了。但长期来看，HTML5才是未来。

我可能会用Canvas重写一个仓鼠，或者找其他HTML5的小宠物插件。Flash这条路是真的走不通了。

web的未来

HTML5+CSS3+Canvas/WebGL+本地存储，这套组合拳让网页游戏真正有了和原生游戏掰手腕的可能。

app变成一个➕壳的浏览器，跨终端适配多端成为一种很低成本的可能性

面向用户体验和前端开发会有很多机会和变化，不再是美工影响力>前端工程师，或者干脆两个岗位就是一个人了

写到这里突然意识到，标题确实起大了。但HTML5和CSS3对Web的影响，确实配得上这个标题。只是这场革命还在进行中，远没有结束。

我那个小仓鼠的故事，就是这场变革的一个缩影吧。

一些有用的资源：

MDN文档：https://developer.mozilla.org/zh-CN/
HTML5 Rocks（Google的教程站）：https://www.html5rocks.com/
Cocos2d-JS官网：http://www.cocos2d-x.org/products#cocos2d-js
白鹭引擎：http://www.egret.com/
Three.js（WebGL库）：https://threejs.org/

Canvas游戏开发可以看看这篇：https://developer.mozilla.org/zh-CN/docs/Games

关于Ruffle（Flash模拟器）：https://ruffle.rs/
我就是用这个让小仓鼠复活的，虽然有点卡，但至少还能动。