js和css3实现能够展开和折叠的折扇效果
分类:实例代码
分享一段代码实例,它实现了能够展开和折叠的折扇效果。
具体效果大家可以使用鼠标悬浮或者离开进行测试。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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>
js和css3实现能够展开和折叠的折扇效果,这样的场景在实际项目中还是用的比较多的,关于js和css3实现能够展开和折叠的折扇效果就介绍到这了。
js和css3实现能够展开和折叠的折扇效果属于前端实例代码,有关更多实例代码大家可以查看。