jquery和css3實現的巴西里約奧運火炬效果
分享一段程式碼例項,它模擬實現了巴西里約奧運會火炬效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { transform-style: preserve-3d; } html, body { width: 100%; height: 100%; overflow: hidden; background-color: #fff; } body { perspective: 600px; } .mainCircle { position: absolute; width: 200px; height: 200px; left: 50%; top: 50%; margin: -100px; border: solid 1px; border-radius: 50%; } .mainCircle .itemDom { width: 20px; height: 20px; border: solid 1px rgba(0, 0, 0, 0); border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -10px; } .mainCircle .itemDom .inside { width: 20px; height: 20px; animation: rotate 10s infinite linear; } .mainCircle .itemDom .inside .line { width: 1px; height: 100px; background-color: #000; position: absolute; top: 0px; left: 10px; transform-origin: 0px 10px; } .mainCircle .itemDom .inside .line:nth-child(1) { transform: rotate(0deg); } .mainCircle .itemDom .inside .line:nth-child(2) { transform: rotate(90deg); } .mainCircle .itemDom .inside .line:nth-child(3) { transform: rotate(180deg); } .mainCircle .itemDom .inside .line:nth-child(4) { transform: rotate(270deg); } .mainCircle .itemDom .inside .line .smallCircle { background-color: rgba(0, 0, 0, 0.2); border: solid 1px; } .mainCircle .itemDom .inside .line .smallCircle:nth-child(1) { width: 20px; height: 20px; border-radius: 50%; transform: translate(80px) rotatex(90deg); } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="//cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js"></script> <script> $(function(){ var hammertime = new Hammer($(document)[0]); var $mainCircle = $('.mainCircle'); var rotate = {x:0,y:0}; var x,y; hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL }); hammertime.on('panmove',function(e){ x = rotate.x+e.deltaX; y = rotate.y+e.deltaY; $mainCircle.css({ 'transform':'rotateX('+(-y)+'deg) rotateY('+x+'deg)' }) }); hammertime.on('panend',function(e){ rotate.x = x; rotate.y = y; }); var length = 30; for(var i = 0;i < length; i++){ var dom = '<div class="itemDom" style="transform:rotate('+i*360/length+'deg) translate(0,100px) rotateY(90deg)">'; dom += '<div class="inside" style="animation-delay:'+i*10/length+'s">'; dom += '<div class="line">'; dom += '<div class="smallCircle"></div>'; dom += '<div class="smallCircle"></div>'; dom += '<div class="smallCircle"></div>'; dom += '<div class="smallCircle"></div>'; dom += '</div>'; dom += '<div class="line">'; dom += '<div class="smallCircle"></div>'; dom += '<div class="smallCircle"></div>'; dom += '<div class="smallCircle"></div>'; dom += '<div class="smallCircle"></div>'; dom += '</div>'; dom += '<div class="line">'; dom += '<div class="smallCircle"></div>'; dom += '<div class="smallCircle"></div>'; dom += '<div class="smallCircle"></div>'; dom += '<div class="smallCircle"></div>'; dom += '</div>'; dom += '<div class="line">'; dom += '<div class="smallCircle"></div>'; dom += '<div class="smallCircle"></div>'; dom += '<div class="smallCircle"></div>'; dom += '<div class="smallCircle"></div>'; dom += '</div>'; dom += '</div>'; dom += '</div>'; $mainCircle.append(dom); } }) </script> </head> <body> <div class="mainCircle"></div> </body> </html>
相關文章
- jQuery和css3實現的電子錶效果jQueryCSSS3
- jquery和css3實現的動態時鐘效果jQueryCSSS3
- jQuery和css3實現的摩天輪旋轉效果jQueryCSSS3
- css3和jQuery實現的點選出現波紋效果CSSS3jQuery
- 目睹奧運火炬傳遞
- jQuery和css3實現的開關效果程式碼例項jQueryCSSS3
- js和css3實現的空調效果JSCSSS3
- css3和js實現的大白動畫效果CSSS3JS動畫
- css3和javascript實現的時鐘效果CSSS3JavaScript
- 奧運火炬長沙傳遞路線
- js和css3實現的扇子展開效果JSCSSS3
- jquery和css實現的圓形鐘錶效果jQueryCSS
- css3實現翻牌效果CSSS3
- js和css3實現的圓形鐘錶效果JSCSSS3
- css3實現的箱子拆開和封裝效果CSSS3封裝
- css3實現的矩形切角效果CSSS3
- jQuery實現輪播效果jQuery
- css3實現的簡單動畫效果CSSS3動畫
- css3實現的紅心跳動效果CSSS3
- css3實現的旋轉的陀螺效果CSSS3
- js和css3實現360旋轉滾動效果JSCSSS3
- css3實現的文字顏色漸變和漸隱效果CSSS3
- 前端實現彈幕效果的方法總結(包含css3和canvas的實現方式)前端CSSS3Canvas
- js和css3實現能夠展開和摺疊的摺扇效果JSCSSS3
- jQuery 實現淡入淡出效果jQuery
- Jquery實現的高亮效果程式碼分享jQuery
- jQuery實現的陣列合並效果jQuery陣列
- Bloomberg:2016年巴西里約奧運會每個國家獲得獎牌與GDP關係OOM
- css3實現動畫閃爍效果CSSS3動畫
- css3實現元素垂直居中效果CSSS3
- CSS3實現多種背景效果CSSS3
- css3實現的立體滾動效果CSSS3
- CSS3實現多樣的邊框效果CSSS3
- CSS3實現的多重背景效果程式碼CSSS3
- CSS3實現的頁面反轉效果CSSS3
- css3實現的矩形圓角切角效果CSSS3
- css3實現的立方體旋轉效果CSSS3
- css3實現的相機鏡頭效果CSSS3