江苏龙网

  1. 首页 > 人文 > >

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

实验介绍手风琴效果一直是比较流行的页面特效之一 ， 本节课将会带大家看一个不一样的手风琴效果 ， 通过JavaScript实现全屏手风琴 。 最终效果如下：
wgetunzipdemo.zip模块基本结构【手风琴特效这么飒，你能用 JavaScript 实现吗？】我们先学习模块的基本结构 ， 新建index.html和index.css ， 输入以下代码 。
index.html：
JavaScript实现全屏手风琴修改index.css ， 新增其样式：
/*第二部分*/.el{position:absolute;left:0;top:0;width:19.2%;height:100%;background:#ccc;}预览效果：
由于.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%;预览效果：
transform-origin是变形原点 ， 原点就是元素绕着旋转或变形的点 ， 该属性只有在设置了transform属性的时候才起作用 ， 如果在不设置的情况下 ， 元素的基点默认的是其中心位置 。
语法：
transform-origin:x-axisy-axisz-axis;x-axis：定义视图被置于X轴的何处 。 y-axis：定义视图被置于Y轴的何处 。 z-axis：定义视图被置于Z轴的何处 。 模块样式修改index.html ， 在第一个.el下加入以下代码：
Section1Whatever11分析一下.el的结构 ， 每个.el包含两部分 ， 一部分是包含了图片、文字以及按钮（el__overflow） ， 它的高度需要继承自父级（.el）的百分百 ， 另一部分是底部的数字部分（el__index） 。
el__overflow结构解释el__overflow中包含el__inner ， el__inner是主要内容 ， 包含三部分：
主体图片和遮罩层部分（el__bg） ， 其中伪元素el__bg:before是图片部分 ， el__bg:after是遮罩层部分 。 图片中间文字内容部分（el__preview-cont） 。 图片放大后的标题和关闭按钮部分（el__content） 。完整学完本课程后 ， 将习得以下知识点：
视口单位绝对定位与相对定位transform属性伪元素before和after通过CSS3完成动画JavaScript添加类前端特效需要很多CSS操作 ， 课程中的动画效果有一些抽象需要大家多思考才能理解 。 本课程是JavaScript的简单课 ， 所以对于JavaScript部分是比较简单且容易理解的 ， 希望大家多多动手 ， 不要只进行简单的复制粘贴 ， 才能更好的学习本课程 。
快点击链接 ， 进入课程学习吧！


    推荐阅读


    上一篇：苹果发布会确认，iPhone12将无缘首发，平板手表将成主角

    下一篇：好酒小管教|红酒瓶上有这2个特征，再好都不要买！常喝红酒的人也不清楚，为何