网站前端开发_前端开发者丨css https://www.rokub.com 其中也发现一个问题。 transform竟然会使z-index失效。 代码: <div></div><div></div><div></div><div></div><div></div><br /> <div></div><div></div><div></div><div></div><div></div><br /> <div></div><div></div><div></div><div></div><div></div><br /> <style><br /> html{<br /> overflow:hidden;<br /> }<br /> body{<br /> background:#00ffff;<br /> }<br /> div{<br /> width:10px;<br /> height:500px;<br /> background:#ff83fa;<br /> position:absolute;<br /> top:10%;<br /> left:50%;<br /> transform-origin:center 90%;<br /> transition: transform 2s;<br /> border-left:1px solid pink;<br /> border-right:1px solid pink;<br /> }<br /> div:before,<br /> div:after{<br /> content:”;<br /> position:absolute;<br /> height:300px;<br /> width:20px;<br /> }<br /> div:before{<br /> border-top: 300px solid #dddddd;<br /> border-right:25px solid transparent;<br /> }<br /> div:after{<br /> left:-35px;<br /> border-top:300px solid white;<br /> border-left:25px solid transparent;<br /> }<br /> div:first-of-type:after,<br /> div:last-of-type:before,<br /> div:last-of-type:after{<br /> border-top: 300px solid #ff83fa;<br /> }<br /> body:hover div:nth-of-type(1){<br /> transform:rotate(-70deg)<br /> }<br /> body:hover div:nth-of-type(2){<br /> transform:rotate(-60deg)<br /> }<br /> body:hover div:nth-of-type(3){<br /> transform:rotate(-50deg)<br /> }<br /> body:hover div:nth-of-type(4){<br /> transform:rotate(-40deg)<br /> }<br /> body:hover div:nth-of-type(5){<br /> transform:rotate(-30deg)<br /> }<br /> body:hover div:nth-of-type(6){<br /> transform:rotate(-20deg)<br /> }<br /> body:hover div:nth-of-type(7){<br /> transform:rotate(-10deg)<br /> }<br /> body:hover div:nth-of-type(8){<br /> transform:rotate(0deg)<br /> }<br /> body:hover div:nth-of-type(9){<br /> transform:rotate(10deg)<br /> }<br /> body:hover div:nth-of-type(10){<br /> transform:rotate(20deg)<br /> }<br /> body:hover div:nth-of-type(11){<br /> transform:rotate(30deg)<br /> }<br /> body:hover div:nth-of-type(12){<br /> transform:rotate(40deg)<br /> }<br /> body:hover div:nth-of-type(13){<br /> transform:rotate(50deg)<br /> }<br /> body:hover div:nth-of-type(14){<br /> transform:rotate(60deg)<br /> }<br /> body:hover div:nth-of-type(15){<br /> transform:rotate(70deg)<br /> }<br /> </style><br /> <script><br /> document.addEventListener(‘mousemove’, function(e) {<br /> this.body.style.transform = ‘rotateZ(-‘ + e.y / 50 + ‘deg)'<br /> }, false);<br /> </script> 网站前端开发_前端开发者丨css https://www.rokub.com » 本文来自:前端开发者 » 《我也用CSS画一把扇子》 » 本文链接地址:https://www.rokub.com/2490.html » 您也可以订阅本站:https://www.rokub.com
不好