js和css實現的扇子展開和摺疊效果程式碼例項
分享一段程式碼例項,它實現了扇子的展開和摺疊效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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和css3實現的扇子展開效果JSCSSS3
- js和css3實現能夠展開和摺疊的摺扇效果JSCSSS3
- jQuery和css3實現的開關效果程式碼例項jQueryCSSS3
- css3和js實現的圓形鐘錶效果程式碼例項CSSS3JS
- js簡單摺紙效果程式碼例項JS
- css實現圓形、橢圓和半圓效果程式碼例項CSS
- css實現矩形切角效果程式碼例項CSS
- jQuery垂直可摺疊展開導航選單程式碼例項詳解jQuery
- css3和js模擬翻頁效果程式碼例項CSSS3JS
- web 端展現報表資料時如何實現摺疊展開效果?Web
- js和css3實現的圖片立體滾動切換效果程式碼例項JSCSSS3
- 手風琴方式展開和摺疊導航選單效果
- css3實現的折角效果程式碼例項CSSS3
- css實現的div垂直居中效果程式碼例項CSS
- CSS實現的柱狀圖效果例項程式碼CSS
- css實現圖片灰度效果程式碼例項CSS
- js實現的垂直選項卡效果程式碼例項JS
- vscode摺疊展開程式碼VSCode
- 原生js實現的動態載入css和js檔案程式碼例項JSCSS
- css實現的彎彎的月亮效果程式碼例項CSS
- BootStrap | 例項 - 摺疊boot
- jquery 實現的摺疊展開的選單jQuery
- js實現的留言本效果程式碼例項JS
- js實現的div拖動效果例項程式碼JS
- js實現的元素抖動效果程式碼例項JS
- jQuery實現的動態載入css和js檔案程式碼例項 [jQueryCSSJS
- js橫向滑動摺疊導航選單程式碼例項JS
- css3實現的打折卡效果程式碼例項CSSS3
- css實現的三列等高效果程式碼例項CSS
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- js實現刮刮樂抽獎效果程式碼例項JS
- css模擬實現雙擊效果程式碼例項CSS
- CSS實現div層半透明效果程式碼例項CSS
- CSS 實現超過固定高度後出現展開摺疊按鈕CSS