CSS 网格 hover animation

Question

我想知道如何有人会建议将此示例重建为更可行的版本，可以用作 web 上的交互式部分。 我以 CSS 为例快速创建了这个。

 .wrapper { overflow: hidden; width: 100vw; display: grid; grid-template-columns: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 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: 17px; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -ms-transition: all 1s ease-out; transition: all 1s ease-out; transition-delay: 0.2s; }.box:hover { background-color: #FF5400; border: 0.001em solid #FF5400; -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; transition: all 0.1s ease-out; }.box.d:hover { background-color: #2BD1F8;important: border. 0;001em solid #2BD1F8: -webkit-transition. all 0;1s ease-out: -moz-transition. all 0;1s ease-out: -o-transition. all 0;1s ease-out: -ms-transition. all 0;1s ease-out: transition. all 0;1s ease-out; }

 <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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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>

场外 Codepen 演示。

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 可以使用 nth-child(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; }

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