介绍 解题思路 没啥好说的，考验基本排版功底，上代码: HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1…
介绍 效果 解题思路 使用#box父容器的hover伪类来改变子元素的transform属性. #box:hover #item12 { transform: rotate(60deg); } #box:hover #item11 { transform: rotate(50deg); } #box:hover #item10 { transform: rotate(40deg); } #box:…
目标 效果 解题思路 在CSS对应位置填上: flex-direction: column; 来使用flex纵向排列布局. 再加上: flex-wrap: wrap; 当排列到页面底部时,将剩余水果自动换入下一列排布.