跳至主要內容
超酷的HTML5 3D旋转相册动画

今天来教大家实现一个非常炫酷但又比较实用的 HTML5 3D 相册轮播动画。该相册动画有以下几个特点:

  • 相册中的图片围成一个立体圆,并且沿着顺时针方向不停地循环转动。
  • 每一张图片都有一个倒影的效果,更好地为相册呈现了 3D 视觉效果。
  • 你也可以拖拽鼠标,实现相册的 360 度全景查看。
  • 不仅支持图片,而且还支持 mp4 视频。
  • 支持背景音乐播放。

先来看看最终效果吧!

效果预览



XXXWeii...大约 3 分钟HTMLHTML
8个你可能不知道的 HTML 实用技巧

今天要介绍的这些 HTML 技巧,绝对会让你大吃一惊!

1. 使用 capture 属性打开设备摄像头


正如input标签具有emailtextpassword属性一样,我们也可以通过一些属性打开移动设备的摄像头以捕获图像。

那就是capture属性,属性值有两个:

  • user用于前置摄像头
  • environment用于后置摄像头

XXXWeii...大约 2 分钟HTMLHTML
仅用 1 个标签,实现抖音 Logo~

先上结果,最终实现效果如下:

还原度应该还可以吧?

抖音 Logo 结构


想要用 CSS 来画抖音的 Logo,前提要先了解它的构造,一定是一些几何图形的拼接组合,因为之前很多业界大佬已经扒过抖音的 Logo 的结构了,我就拿来借用一下:

好的,有点复杂,简化一下,其实就是 4 个部分


XXXWeii...大约 10 分钟HTMLHTML