CSS样式 下面是其中一个布局的CSS样式：
.slide--layout-1 .slide__img:first-child {
left: 0.5em;
height: 100%;
}
.slide--layout-1 .slide__img:nth-child(n+2) {
left: calc(50% + 0.5em);
height: calc(50% - 0.5em);
}
.slide--layout-1 .slide__img:nth-child(3) {
top: calc(50% + 0.5em);
}
得到的效果如下图所示：
JavaScript 每一个幻灯片布局的动画效果定义在js文件中。结构为： [layout name] : { out : {navigating out properties},in : {navigating in properties} }。可以为进入和离开的幻灯片设置不同的动画效果。下面的代码是第一个布局的示例代码：
}
},opacity : 0,duration: 1200,easing : 'eaSEOutQuint',itemsDelay : 80
},in : {
resetProps : {
translateX : {
next: '100%',prev: '-100%'
},index) {
return anime.random(0,15);
},0);
}
},},translateX : '0%',rotateZ : 0,opacity : 1,duration: 700,itemsDelay : 80
}
},layout2 : { / ... / },layout3 : { / ... / },/ ... /
}
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
