* { margin:0; padding:0; } .box { width:600px; height:300px; border-bottom:3px solid; margin:100px auto; position:relative; } .box div { width:50px; height:210px; background-color:#9D2933; position:absolute; left:270px; top:50px; box-shadow:3px 3px 5px #333; border-radius:0px 0px 90px 90px; transform-origin:center bottom; transition:all 1s ease-out 0s; transform-origin:50% 90%; text-align:center; font-size:14px; line-height:30px; font-style:italic; font-weight:bolder; letter-spacing:12px; text-shadow:1px 1px 1px #09f; color:#fff; } .box div:nth-child(1) { background-color:orange; } .box:hover div:nth-child(1) { transform:rotate(15deg); opacity:0.8; text-shadow:2px 2px 10px #09f; } .box div:nth-child(2) { background-color:yellow; } .box:hover div:nth-child(2) { transform:rotate(30deg); opacity:0.8; text-shadow:2px 2px 10px #09f; } .box div:nth-child(3) { background-color:green; } .box:hover div:nth-child(3) { transform:rotate(45deg); opacity:0.8; text-shadow:2px 2px 10px #09f; } .box div:nth-child(4) { background-color:blue; } .box:hover div:nth-child(4) { transform:rotate(60deg); opacity:0.8; text-shadow:2px 2px 10px #09f; } .box div:nth-child(5) { background-color:aqua; } .box:hover div:nth-child(5) { transform:rotate(75deg); opacity:0.8; text-shadow:2px 2px 10px #09f; } .box div:nth-child(6) { background-color:#8A2BE2; opacity:0.8; } .box:hover div:nth-child(13) { transform:rotate(90deg); opacity:0.8; text-shadow:2px 2px 10px #09f; } .box div:nth-child(7) { background-color:#999; } .box:hover div:nth-child(7) { transform:rotate(-15deg); opacity:0.8; text-shadow:2px 2px 10px #09f; } .box div:nth-child(8) { background-color:#b0929f; } .box:hover div:nth-child(8) { transform:rotate(-30deg); opacity:0.8; text-shadow:2px 2px 10px #09f; } .box div:nth-child(9) { background-color:#333; } .box:hover div:nth-child(9) { transform:rotate(-45deg); opacity:0.8; text-shadow:2px 2px 10px #09f; } .box div:nth-child(10) { background-color:#D24D57; } .box:hover div:nth-child(10) { transform:rotate(-60deg); opacity:0.8; text-shadow:2px 2px 10px #09f; } .box div:nth-child(11) { background-color:#09f; } .box:hover div:nth-child(11) { transform:rotate(-75deg); opacity:0.8; text-shadow:2px 2px 10px #09f; } .box div:nth-child(12) { background-color:#EAF2D3; } .box:hover div:nth-child(12) { transform:rotate(-90deg); opacity:0.8; text-shadow:2px 2px 10px #09f; }
更新时间:2020-03-18 00:06:22
简单易懂