jquery和css3实现的巴西里约奥运火炬效果
分类:实例代码
分享一段代码实例,它模拟实现了巴西里约奥运会火炬效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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实现的巴西里约奥运火炬效果,这样的场景在实际项目中还是用的比较多的,关于jquery和css3实现的巴西里约奥运火炬效果就介绍到这了。
jquery和css3实现的巴西里约奥运火炬效果属于前端实例代码,有关更多实例代码大家可以查看。