分享一段代碼實例，它實現了能夠展開和摺疊的摺扇效果。
具體效果大家可以使用鼠標懸浮或者離開進行測試。
代碼實例如下:
[HTML] 純文本查看 複製代碼運行代碼
<!doctype html><html><head><metacharset="utf-8"><title>展開和摺疊的摺扇效果</title><style>html{overflow:hidden;}body{background:#00ffff;}div{width:10px;height:500px;background:#ff83fa;position:absolute;top:10%;left:50%;transform-origin:center 90%;transition: transform 2s;border-left:1px solid pink;border-right:1px solid pink;}div:before,div:after{content:'';position:absolute;height:300px;width:20px;}div:before{border-top: 300px solid #dddddd;border-right:25px solid transparent;}div:after{left:-35px;border-top:300px solid white;border-left:25px solid transparent;}div:first-of-type:after,div:last-of-type:before,div:last-of-type:after{border-top: 300px solid #ff83fa;}body:hover div:nth-of-type(1){transform:rotate(-70deg)}body:hover div:nth-of-type(2){transform:rotate(-60deg)}body:hover div:nth-of-type(3){transform:rotate(-50deg)}body:hover div:nth-of-type(4){transform:rotate(-40deg)}body:hover div:nth-of-type(5){transform:rotate(-30deg)}body:hover div:nth-of-type(6){transform:rotate(-20deg)}body:hover div:nth-of-type(7){transform:rotate(-10deg)}body:hover div:nth-of-type(8){transform:rotate(0deg)}body:hover div:nth-of-type(9){transform:rotate(10deg)}body:hover div:nth-of-type(10){transform:rotate(20deg)}body:hover div:nth-of-type(11){transform:rotate(30deg)}body:hover div:nth-of-type(12){transform:rotate(40deg)}body:hover div:nth-of-type(13){transform:rotate(50deg)}body:hover div:nth-of-type(14){transform:rotate(60deg)}body:hover div:nth-of-type(15){transform:rotate(70deg)}</style><script>window.onload = function () {document.addEventListener('mousemove', function (e) {this.body.style.transform = 'rotateZ(-' + e.y / 50 + 'deg)'}, false);}</script></head><body><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></body></html>
