网易云音乐高端3d轮播图效果

网易云音乐高端3d轮播图效果~emmm...和那些外面的妖艳贱货不一样

JavaScript 图片展示处理

访问GitHub主页

共1Star

详细介绍

网易云3d轮播图效果

话说看见网易云音乐的轮播图做的真好啊~遂做了个小组件出来备用
想做高端效果的童鞋们可以参考下。

预览地址

https://wengzs.github.io/Carousel-banner/index.html

效果

Image text

思路

  • 动态切换id以达到图片运动效果，也就是每个运动效果都要写一个css样式；

  • 运动完毕之后更改回原位置id

  • 通过CSS3 animation / @keyframes 制作动画

  • 通过perspective属性来实现3d透视效果(rotateY处理之后的div还是等高的，而不是梯形)，这个属性只有safari和chrome支持。

推荐源码