jQuery和css3实现的摩天轮旋转效果
分享一段代码实例，它实现了摩天轮旋转效果。
效果是通过css3和jQuery实现，代码实例如下:
|
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
|
<!doctype html><html>
<head>
<meta charset="utf-8">
<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 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>
|