js和css实现的扇子展开和折叠效果代码实例
分类:实例代码
分享一段代码实例,它实现了扇子的展开和折叠效果。
代码实例如下:
<!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>
上面的代码实现了我们的要求,更多内容可以参阅相关阅读。
相关阅读:
(1).transform-origin可以参阅CSS3 transform-origin一章节。
(2).transition可以参阅CSS3 transition一章节。
(3).:hover可以参阅CSS E:hover一章节。
(4).:nth-of-type()可以参阅nth-of-type()一章节。
(5).addEventListener()可以参阅addEventListener()一章节。
js和css实现的扇子展开和折叠效果代码实例,这样的场景在实际项目中还是用的比较多的,关于js和css实现的扇子展开和折叠效果代码实例就介绍到这了。
js和css实现的扇子展开和折叠效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。