原生JS实现影集展示特效

分享一个用原生JS实现的影集展示特效，效果如下：

实现的代码如下：

<!doctype html>
<html><head><meta charset="utf-8"><title>原生JS实现影集展示特效</title><style type="text/css">* {margin: 0;padding: 0;list-style: none;}li {width: 300px;height: 200px;position: absolute;transition: 0.8s;transform: perspective(800px);}li img {width: 100%;height: 100%;}li.s0 {left: 50%;margin-left: 450px;top: 50%;margin-top: -100px;transform: perspective(800px) rotateY(-90deg);opacity: 0;}li.s1 {left: 50%;margin-left: -750px;top: 50%;margin-top: -100px;transform: perspective(800px) rotateY(90deg);opacity: 0;}li.s2 {left: 50%;margin-left: -550px;top: 50%;margin-top: -100px;transform: perspective(800px) rotateY(60deg);opacity: 0.5;}li.s3 {left: 50%;margin-left: -350px;top: 50%;margin-top: -100px;transform: perspective(800px) rotateY(30deg);}li.s4 {left: 50%;margin-left: -150px;top: 50%;margin-top: -100px;z-index: 3;}li.s5 {left: 50%;margin-left: 50px;top: 50%;margin-top: -100px;transform: perspective(800px) rotateY(-30deg);z-index: 2;}li.s6 {left: 50%;margin-left: 250px;top: 50%;margin-top: -100px;transform: perspective(800px) rotateY(-60deg);opacity: 0.5}</style>
</head><body><ul><li class='s0'><img src="data:images/0.png"></li><li class='s1'><img src="data:images/1.png"></li><li class='s2'><img src="data:images/2.png"></li><li class='s3'><img src="data:images/3.png"></li><li class='s4'><img src="data:images/4.png"></li><li class='s5'><img src="data:images/5.png"></li><li class='s6'><img src="data:images/7.png"></li></ul><script type="text/javascript">var array = [];var list = document.getElementsByTagName('li');for (var i = 0; i < list.length; i++) {array.push(list[i].className);};onclick = function () {// 删除开头的压入最后array.push(array.shift());// 重新赋值样式类for (var i = 0; i < list.length; i++) {list[i].className = array[i];}}</script></body></html>

原生JS实现影集展示特效相关推荐

2021年原生JS实现影集展示特效
JS最全最好的免费教程放在,码蝗网, <!doctype html> <html><head><meta charset="utf-8"& ...
原生JS实现球面展示特效
分享一个由原生JS实现的球面展示效果,效果如下: 实现代码如下: <!DOCTYPE html> <html><head><meta http-equiv=& ...
原生JS实现飘浮关键词特效
分享一个原生JS实现的飘浮关键词的效果,鼠标悬停可让关键词停止运动,点击关键词可跳转到对应的页面,效果如下: 实现的代码如下: <!DOCTYPE html> <html>&l ...
原生JS实现翻书特效
给大家分享一个用原生JS实现的翻书效果图,效果如下: 实现代码如下,欢迎大家复制粘贴. <!doctype html> <html><head><meta c ...
原生js开灯关灯特效
今天练习js写的开关灯特效老开心了老有成就感了嘻嘻嘻~~~ ps:白色效果不明显,我又改成粉色了 <!DOCTYPE html> <html lang="en&quo ...
原生js实现canvas粒子特效
要实现的效果当鼠标移入容器时,让鼠标作为中心点半径为80到圆内的粒子散开当粒子不在圆的范围后,粒子返回原来的位置主要代码创建初始位置 // NUM_PARTICLES是粒子总个数for ( i ...
如何用 CSS 和原生 JS 创作一个展示苹果设备的交互动画
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gBKWdW 可交互视频 ...
button点击后出现的边框_代码分享：原生js实现，鼠标点击按钮时，多彩粒子散射特效。...
原地址,可以在线查看演示效果,要是下面的代码复制后运行有问题,可以从原地址去复制,我试过了,OK的. 原生js实现,鼠标点击按钮时,多彩粒子散射特效.fairysoftware.com 完整代码,复 ...
原生JS实现拖动拉开序幕特效
给大家分享一个用原生JS实现的拖动拉开序幕特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en" ...

原生JS实现影集展示特效

原生JS实现影集展示特效相关推荐

最新文章

热门文章