网易云音乐高端3d轮播图效果
网易云音乐高端3d轮播图效果~emmm...和那些外面的妖艳贱货不一样
JavaScript 图片展示处理
共1Star
详细介绍
网易云3d轮播图效果
话说看见网易云音乐的轮播图做的真好啊~遂做了个小组件出来备用
想做高端效果的童鞋们可以参考下。
预览地址
https://wengzs.github.io/Carousel-banner/index.html
效果
思路
-
动态切换id以达到图片运动效果,也就是每个运动效果都要写一个css样式;
-
运动完毕之后更改回原位置id
-
通过CSS3
animation / @keyframes
制作动画 -
通过
perspective
属性来实现3d透视效果(rotateY处理之后的div还是等高的,而不是梯形),这个属性只有safari和chrome支持。