jQuery和css3实现的摩天轮旋转效果
分类:实例代码
分享一段代码实例,它实现了摩天轮旋转效果。
效果是通过css3和jQuery实现,代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } html, body, #skywheel { width: 100%; height: 100%; overflow: hidden; } #skywheel { padding: 3px; background-color: orange; background-image: linear-gradient(top,skyblue 90%, orange 90%); background-image: -o-linear-gradient(top,skyblue 90%, orange 90%); background-image: -moz-linear-gradient(top,skyblue 90%, orange 90%); background-image: -webkit-linear-gradient(top,skyblue 90%, orange 90%); } #skywheel:before, #skywheel:after { z-index: 1; background-color: lightcoral; transform-origin: 0 15%; content: ""; display: block; position: absolute; width: 25px; height: calc(100% - 55%); bottom: 10%; } #skywheel:before { left: calc(50% - 25px); transform: skew(-15deg); } #skywheel:after { left: 50%; transform: skew(15deg); } #skywheel ul { position: relative; border-radius: 50%; margin: auto; width: 75%; height: 75%; bottom: -10%; animation: wheel 10s linear 1s infinite; -webkit-animation: wheel 10s linear 1s infinite; } #skywheel ul:after { z-index: 2; background-color: lightcoral; box-shadow: 0 0 3px black; display: block; position: absolute; content: ""; width: 50px; height: 50px; border-radius: 50%; top: calc(50% - 25px); left: calc(50% - 25px); } #skywheel ul li { overflow: hidden; margin: -5px 0 0 calc(-50% / 10); width: calc(100% / 10); height: calc(100% / 12); border: solid 3px red; border-radius: 50%; position: absolute; top: 0; left: 0; transform-origin: center 5px; animation: car 10s linear 1s infinite; -webkit-animation: car 10s linear 1s infinite; background-image: linear-gradient(top, red 15%, transparent 15%, transparent 55%, red 55%); background-image: -o-linear-gradient(top, red 15%, transparent 15%, transparent 55%, red 55%); background-image: -moz-linear-gradient(top, red 15%, transparent 15%, transparent 55%, red 55%); background-image: -webkit-linear-gradient(top, red 15%, transparent 15%, transparent 55%, red 55%); } #skywheel ul li:nth-of-type(3n) { border-color: green; background-image: linear-gradient(top, green 15%, transparent 15%, transparent 55%, green 55%); background-image: -o-linear-gradient(top, green 15%, transparent 15%, transparent 55%, green 55%); background-image: -moz-linear-gradient(top, green 15%, transparent 15%, transparent 55%, green 55%); background-image: -webkit-linear-gradient(top, green 15%, transparent 15%, transparent 55%, green 55%); } #skywheel ul li:nth-of-type(3n-1) { border-color: yellow; background-image: linear-gradient(top, yellow 15%, transparent 15%, transparent 55%, yellow 55%); background-image: -o-linear-gradient(top, yellow 15%, transparent 15%, transparent 55%, yellow 55%); background-image: -moz-linear-gradient(top, yellow 15%, transparent 15%, transparent 55%, yellow 55%); background-image: -webkit-linear-gradient(top, yellow 15%, transparent 15%, transparent 55%, yellow 55%); } #skywheel ul li:after { content: ""; display: block; width: 1px; height: 80%; margin: calc(15% - 4px) auto 0; border: solid 2px red; background-color: snow; } #skywheel ul li:nth-of-type(3n):after { border-color: green; } #skywheel ul li:nth-of-type(3n-1):after { border-color: yellow; } @keyframes wheel { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes wheel { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes car { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } @-webkit-keyframes car { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(function() { var radius = function(init) { var num = 24; var deg = 360 / num; var o = $("#skywheel ul").removeAttr("style"); var w = o.width(); var h = o.height(); var d = w < h ? w : h; o.width(d); o.height(d); var hack = ["", "-o-", "-ms-", "-moz-", "-webkit-"]; $.each(hack, function(i, n) { var bgStr = ""; var str = ""; $.each(new Array(num / 2), function(j) { if (str) str += ","; str += n + "linear-gradient(" + (j * deg) + "deg, transparent 49.65%, snow 49.9%, snow 50.1%, transparent 50.35%)"; }); bgStr = n + "radial-gradient(center,transparent 30%, snow 30%, snow 31.5%, transparent 31.5%, transparent 57.5%, snow 57.5%, snow 59%, transparent 59%)"; o.css({ "background-image": str + "," + bgStr }); }); $.each(new Array(num), function(i) { var r = d / 2; var x = r; var y = r; var a = deg * i; var x1 = x + r * Math.sin(a * Math.PI / 180); var y2 = y - r * Math.cos(a * Math.PI / 180); console.log(init) obj = init ? o.find("li").eq(i) : $("<li>").appendTo(o); obj.css({ top: y2, left: x1 }) }) } $(window).resize(radius); radius(); }) </script> </head> <body> <div id="skywheel"> <ul></ul> </div> </body> </html>
jQuery和css3实现的摩天轮旋转效果,这样的场景在实际项目中还是用的比较多的,关于jQuery和css3实现的摩天轮旋转效果就介绍到这了。
jQuery和css3实现的摩天轮旋转效果属于前端实例代码,有关更多实例代码大家可以查看。
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu