* {
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
原始数据
按行查看
历史