CSS网格悬停动画

Question

想知道如何有人建议将这个例子重建成一个更可行的版本，可以用作网络上的交互式部分。

使用CSS快速创建了这个工作示例。

HTML

<div class="wrapper">
<div class="box a"></div>
<div class="box b"></div>
<div class="box c"></div>
<div class="box d"></div>
<div class="box e"></div>
<div class="box f"></div>
<div class="box a"></div>
<div class="box b"></div>
<div class="box c"></div>
<div class="box d"></div>
<div class="box e"></div>
<div class="box f"></div>
</div>

CSS

.wrapper {
overflow: hidden;
width: 100vw;
display: grid;
grid-template-columns: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px;
grid-gap: 0px;
background-color: #fff;
color: #444;
}
.box {
background-color: #fff;
color: #fff;
border: 0.001em solid #efefef;
border-radius: 0px;
padding: 0px;
height:1 7px;
transition: all 1s ease-out;
transition-delay: 0.2s;
}
.box:hover {
background-color: #FF5400;
border: 0.001em solid #FF5400;
transition: all 0.1s ease-out;
}
.box.d:hover {
background-color: #2BD1F8 !important;
border: 0.001em solid #2BD1F8;
transition: all 0.1s ease-out;
}

Answer 1

你可以这样做，运行一个for循环，生成你想要的div数量，我看到在codepen上，每个nth元素都会改变颜色，所以我认为这是比codepen更可行的解决方案。

let row = document.querySelector('.row');
for(let i = 0; i <= 50; i++){

if(i % 5 === 0){
row.innerHTML += `
<div class="box-blue"></div>
`
}else{
row.innerHTML += `
<div class="box-orange"></div>
`
}
}

.box-orange{
width: 50px;
height: 50px;
margin: 1rem;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.box-orange:hover{
background: orange;
}
.box-blue{
width: 50px;
height: 50px;
margin: 1rem;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.box-blue:hover{

background: blue;
}

<div class="container">
<div class="row">

</div>
</div>

Answer 2

您可以在简化代码的同时使其更通用。

这个片段删除了CSS上的供应商前缀，使事情变得更清楚，但如果您支持旧浏览器，当然会将它们放回原处。

您想要的框数是在JS中设置的。然后，代码段计算每行的数量，并在包装器中设置CSS变量，以将信息传递给样式。

它执行一个for循环来创建div。

没有必要将类放入框中(除非您出于其他原因需要它们(。CSS可以通过使用第n个子项(6n-2(来处理每6个颜色为淡蓝色的子项，其中第一个颜色为4。

通过将框的宽度设置为一个变量，可以很容易地构建更通用性，并且可以对数字进行四舍五入，以使一行能够准确填充等。

const numBoxes = 300;// set this to the number of boxes you want
const wrapper = document.createElement('div');
wrapper.classList.add('wrapper');
wrapper.style.setProperty('--numBoxes', numBoxes);
wrapper.style.setProperty('--numInRow', Math.floor(window.innerWidth / 20));
for (let i=0; i<numBoxes; i++) {
const box = document.createElement('div');
box.classList.add('box');
wrapper.appendChild(box);
}
document.body.appendChild(wrapper);

.wrapper {
overflow:hidden;
width:100vw;
display: grid;
grid-template-columns: repeat(var(--numInRow), 20px);
grid-gap: 0px;
background-color: #fff;
color: #444;
}
.box {
background-color: #FFF;
color: #fff;
border: 0.001em solid #efefef;
height:17px;
transition: all 1s ease-out;
transition-delay:0.2s;
}
.box:hover {
background-color: #FF5400;
border: 0.001em solid #FF5400;
transition: all 0.1s ease-out;
}
.box:nth-child(6n-2):hover {
background-color:  #2BD1F8;
border: 0.001em solid #2BD1F8;
}

如果视口大小发生变化，则必须设置用于设置变量和删除/创建框的代码才能重新运行。