江苏龙网

  1. 首页 > 人文 > >

沫言|手风琴特效这么飒，你能用 JavaScript 实现吗？

实验介绍手风琴效果一直是比较流行的页面特效之一 ， 本节课将会带大家看一个不一样的手风琴效果 ， 通过 JavaScript 实现全屏手风琴 。 最终效果如下：
沫言|手风琴特效这么飒，你能用 JavaScript 实现吗？知识点

  • 视口单位
  • 绝对定位与相对定位
  • transform 属性
  • 伪元素 before 和 after
  • 通过 CSS3 完成动画
  • JavaScript 添加类
本实验完整代码获取命令如下：
wget unzip demo.zip模块基本结构我们先学习模块的基本结构 ， 新建 index.html 和 index.css ， 输入以下代码 。
index.html：
JavaScript 实现全屏手风琴index.css：
/* 第一部分 */*,*:before,*:after {/* box-sizing: border-box ， 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制 ， 不会因为设置了边距而使元素宽高改变 */-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}body {background: #1f1f1f;font-family: "Open Sans", Helvetica, Arial, sans-serif;}.cont {position: relative;overflow: hidden;height: 100vh;padding: 80px 70px;}.cont__inner {position: relative;height: 100%;background: #fff;执行如下操作预览页面：
沫言|手风琴特效这么飒，你能用 JavaScript 实现吗？预览效果：
沫言|手风琴特效这么飒，你能用 JavaScript 实现吗？注意：padding 是自己加的 ， 跟代码无关 ， 主要是方便理解 padding 的作用在哪 ， 背景色也只是为了显示 cont__inner 。 后续会删除 。
代码重点讲解之—— viewport：
viewport：可视窗口 ， 也就是浏览器 。 视口单位主要包括以下 4 个：
  • vw : 1vw 等于视口宽度的 1% 。
  • vh : 1vh 等于视口高度的 1% 。
  • vmin : 选取 vw 和 vh 中最小的那个 。
  • vmax : 选取 vw 和 vh 中最大的那个 。
100vh 代表整个浏览器可见页面的高度 ， 100vw 就是整个宽度 。
模块布局修改 index.html ， 在 cont__inner 下加入以下代码：
修改 index.css ， 新增其样式：
/* 第二部分 */.el {position: absolute;left: 0;top: 0;width: 19.2%;height: 100%;background: #ccc;}预览效果：
沫言|手风琴特效这么飒，你能用 JavaScript 实现吗？这只是其中一个模块 ， 修改 index.html 加入剩下的模块：
由于 .el 使用了绝对定位 ， 这个时候模块肯定都会全部叠加在最左边 ， 所以我们需要修改 index.css ， 加入以下代码：
/* :nth-child(n) 选择器匹配属于其父元素的第 n 个子元素 ， 不论元素的类型 。 *//* 这里代表第一个el*/.el:nth-child(1) {/* -webkit 前缀是表示兼容有 webkit 的浏览器 ，webkit 内核的浏览器有谷歌浏览器、Safari 浏览器、搜狗高速浏览器等 */-webkit-transform: translate3d(0%, 0, 0);transform: translate3d(0%, 0, 0);-webkit-transform-origin: 50% 50%; /* 设置旋转元素的基点位置 */transform-origin: 50% 50%;}.el:nth-child(2) {-webkit-transform: translate3d(105.2083333333%, 0, 0);transform: translate3d(105.2083333333%, 0, 0);-webkit-transform-origin: 155.2083333333% 50%;transform-origin: 155.2083333333% 50%;}.el:nth-child(3) {-webkit-transform: translate3d(210.4166666667%, 0, 0);transform: translate3d(210.4166666667%, 0, 0);-webkit-transform-origin: 260.4166666667% 50%;transform-origin: 260.4166666667% 50%;}.el:nth-child(4) {-webkit-transform: translate3d(315.625%, 0, 0);transform: translate3d(315.625%, 0, 0);-webkit-transform-origin: 365.625% 50%;transform-origin: 365.625% 50%;}.el:nth-child(5) {-webkit-transform: translate3d(420.8333333333%, 0, 0);transform: translate3d(420.8333333333%, 0, 0);-webkit-transform-origin: 470.8333333333% 50%;transform-origin: 470.8333333333% 50%;


推荐阅读


上一篇：电竞|绝地求生：被空投遗弃的装备武器，第3个很多新玩家都不知道

下一篇：「林允」林允手把手教你拍照！长款针织毛衣温柔有力量，上镜又出挑