js和css3實現能夠展開和摺疊的摺扇效果
分享一段程式碼例項,它實現了能夠展開和摺疊的摺扇效果。
具體效果大家可以使用滑鼠懸浮或者離開進行測試。
程式碼例項如下:
[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>
相關文章
- js和css實現的扇子展開和摺疊效果程式碼例項JSCSS
- js和css3實現的扇子展開效果JSCSSS3
- web 端展現報表資料時如何實現摺疊展開效果?Web
- 手風琴方式展開和摺疊導航選單效果
- jquery 實現的摺疊展開的選單jQuery
- js和css3實現的空調效果JSCSSS3
- css3和js實現的大白動畫效果CSSS3JS動畫
- css3實現動態摺疊生成立方體旋轉效果CSSS3
- CoordinatorLayout實現酷炫摺疊效果
- 用Javascript實現選單摺疊效果JavaScript
- vue使用element元件實現選單的摺疊與展開Vue元件
- js和css3實現的圓形鐘錶效果JSCSSS3
- js輕鬆實現摺疊皮膚JS
- 微信小程式實現多摺疊展開酷炫選單微信小程式
- css3實現的箱子拆開和封裝效果CSSS3封裝
- js和css3實現360旋轉滾動效果JSCSSS3
- CSS 實現超過固定高度後出現展開摺疊按鈕CSS
- jQuery/CSS3實現圖片層疊展開特效jQueryCSSS3特效
- 給 RecyclerView 加上摺疊的效果View
- Material Design之CollapsingToolbarLayout,實現Toolbar的摺疊效果Material Design
- jQuery實現的點選展開其他專案摺疊導航選單jQuery
- css3和javascript實現的時鐘效果CSSS3JavaScript
- vscode摺疊展開程式碼VSCode
- jQuery和css3實現的開關效果程式碼例項jQueryCSSS3
- 摺疊屏的出現將帶動5G和AI的發展去向何方?AI
- 使用Jquery和CSS摺疊影象jQueryCSS
- jQuery和css3實現的電子錶效果jQueryCSSS3
- css3和js實現的圓形鐘錶效果程式碼例項CSSS3JS
- 蘋果OLED摺疊手機和可摺疊平板電腦情景分析蘋果
- el-tree全部展開全部摺疊方法
- JS和Css實現紅包雨的效果JSCSS
- jquery和css3實現的動態時鐘效果jQueryCSSS3
- jQuery和css3實現的摩天輪旋轉效果jQueryCSSS3
- 那些不用js也能實現的效果JS
- css3和jQuery實現的點選出現波紋效果CSSS3jQuery
- CSS中上下margin的傳遞和摺疊CSS
- jquery和css3實現的巴西里約奧運火炬效果jQueryCSSS3
- CSS3垂直摺疊導航選單CSSS3