火影忍者html模板,index.html

火影轮播图

* {

margin: 0;

padding: 0;

}

body {

width: 100vw;

height: 100vh;

background: radial-gradient(#c6f35e, #5d6549);

/* background: radial-gradient(#353633, #e8ebe0);

background: radial-gradient(#c1dd89, #9ccf0e); */

}

.container {

width: 400px;

height: 400px;

position: relative;

left: 40%;

top: 15%;

}

.container div {

widows: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

filter: blur(5px);

transition: all 1s;

z-index: 3;

}

.container .left {

left: -500px;

}

.container .middle {

transform: scale(1.3);

filter: blur(0);

z-index: 99;

}

.container .right {

border: 3px solid blue;

left: 500px;

}

.container img {

width: 400px;

height: 400px;

}

.count {

z-index: 1;

}

let divs = document.querySelector('.container').querySelectorAll('div');

divs.forEach((item, i, ele) => {

item.addEventListener('click', () => {

item.classList.remove('left', 'middle', 'right');

item.classList.add('middle');

document.body.style.background = item.getAttribute('data-color');

let left = item.previousElementSibling || ele[ele.length - 1];

left.classList.remove('left', 'middle', 'right', 'count');

left.classList.add('left', 'count');

let right = item.nextElementSibling || ele[0];

//console.log(right);

right.classList.remove('left', 'middle', 'right', 'count');

right.classList.add('right');

});

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史