热门标签
热门文章
- 1concat函数_hive常用函数 concat concat_ws row_number
- 2Docker的学习体验_apk unable to select packages
- 3huggingface.Meta语言模型LLaMA解读：模型的下载部署与运行代码_meta的llama模型非官方下载方法
- 4TCP/IP协议机制详解_ip中的ack
- 5解决运行pip install时提示错误：error: externally-managed-environment
- 6vLLM部署qwen大模型加速推理实现_vllm 启动qwen
- 7pip 安装报错 required to install pyproject.toml-based projects
- 8【论文精读】ViM: Out-Of-Distribution with Virtual-logit Matching 使用虚拟分对数匹配的分布外检测_vim分布外检测
- 9通用vs垂直？热门AI大模型你更看好哪个？（附免费资源）_ai 垂直领域 通用领域
- 10Hadoop三大组件之HDFS_hdfs的三大组件
当前位置: article > 正文
jQuery和css3实现的摩天轮旋转效果_一款基于jquery和css3实现的摩天轮式分享按钮
作者：空白诗007 | 2024-07-16 15:33:46
赞
踩
一款基于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
>
|
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/834991
推荐阅读
相关标签
