3D酷炫css导航菜单
代码语言：html
所属分类：菜单导航
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D菜单-官方导航页</title>
<style>
body .center {
left: 0;
right: 0;
top: 50%;
position: absolute;
margin: auto;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
body .center .outer_one,body .center .outer_two,body .center .outer_three,body .center .outer_four,body .center .outer_five,body .center .pieces {
position: absolute;
width: 50px;
height: 50px;
left: 50%
}
body .center .outer_two__piece:nth-of-type(1),body .center .outer_three__piece:nth-of-type(1) {
-webkit-animation: fade 5s .1s infinite;
animation: fade 5s .1s infinite
}
body .center .outer_two__piece:nth-of-type(2),body .center .outer_three__piece:nth-of-type(2) {
-webkit-animation: fade 5s .2s infinite;
animation: fade 5s .2s infinite
}
body .center .outer_two__piece:nth-of-type(3),body .center .outer_three__piece:nth-of-type(3) {
-webkit-animation: fade 5s .3s infinite;
animation: fade 5s .3s infinite
}
body .center .outer_two__piece:nth-of-type(4),body .center .outer_three__piece:nth-of-type(4) {
-webkit-animation: fade 5s .4s infinite;
animation: fade 5s .4s infinite
}
body .center .outer_two__piece:nth-of-type(5),body .center .outer_three__piece:nth-of-type(5) {
-webkit-animation: fade 5s .5s infinite;
animation: fade 5s .5s infinite
}
body .center .outer_two__piece:nth-of-type(6),body .center .outer_three__piece:nth-of-type(6) {
-webkit-animation: fade 5s .6s infinite;
animation: fade 5s .6s infinite
}
body .center .outer_two__piece:nth-of-type(7),body .center .outer_three__piece:nth-of-type(7) {
-webkit-animation: fade 5s .7s infinite;
animation: fade 5s .7s infinite
}
body .center .outer_two__piece:nth-of-type(8),body .center .outer_three__piece:nth-of-type(8) {
-webkit-animation: fade 5s .8s infinite;
animation: fade 5s .8s infinite
}
body .center .outer_two__piece:nth-of-type(9),body .center .outer_three__piece:nth-of-type(9) {
-webkit-animation: fade 5s .9s infinite;
animation: fade 5s .9s infinite
}
body .center .outer_two__piece:nth-of-type(10),body .center .outer_three__piece:nth-of-type(10) {
-webkit-animation: fade 5s 1s infinite;
animation: fade 5s 1s infinite
}
body .center .outer_two__piece:nth-of-type(11),body .center .outer_three__piece:nth-of-type(11) {
-webkit-animation: fade 5s 1.1s infinite;
animation: fade 5s 1.1s infinite
}
body .center .outer_two__piece:nth-of-type(12),body .center .outer_three__piece:nth-of-type(12) {
-webkit-animation: fade 5s 1.2s infinite;
animation: fade 5s 1.2s infinite
}
body .center .outer_two__piece:nth-of-type(13),body .center .outer_three__piece:nth-of-type(13) {
-webkit-animation: fade 5s 1.3s infinite;
animation: fade 5s 1.3s infinite
}
body .center .outer_two__piece:nth-of-type(14),body .center .outer_three__piece:nth-of-type(14) {
-webkit-animation: fade 5s 1.4s infinite;
animation: fade 5s 1.4s infinite
}
body .center .outer_two__piece:nth-of-type(15),body .center .outer_three__piece:nth-of-type(15) {
-webkit-animation: fade 5s 1.5s infinite;
animation: fade 5s 1.5s infinite
}
body .center .outer_two__piece:nth-of-type(16),body .center .outer_three__piece:nth-of-type(16) {
-webkit-animation: fade 5s 1.6s infinite;
animation: fade 5s 1.6s infinite
}
body .center .outer_two__piece:nth-of-type(17),body .center .outer_three__piece:nth-of-type(17) {
-webkit-animation: fade 5s 1.7s infinite;
animation: fade 5s 1.7s infinite
}
body .center .outer_two__piece:nth-of-type(18),body .center .outer_three__piece:nth-of-type(18) {
-webkit-animation: fade 5s 1.8s infinite;
animation: fade 5s 1.8s infinite
}
body .center .outer_two__piece:nth-of-type(19),body .center .outer_three__piece:nth-of-type(19) {
-webkit-animation: fade 5s 1.9s infinite;
animation: fade 5s 1.9s infinite
}
body .center .outer_two__piece:nth-of-type(20),body .center .outer_three__piece:nth-of-type(20) {
-webkit-animation: fade 5s 2s infinite;
animation: fade 5s 2s infinite
}
body .center .outer_two__piece:nth-of-type(21),body .center .outer_three__piece:nth-of-type(21) {
-webkit-animation: fade 5s 2.1s infinite;
animation: fade 5s 2.1s infinite
}
body .center .outer_two__piece:nth-of-type(22),body .center .outer_three__piece:nth-of-type(22) {
-webkit-animation: fade 5s 2.2s infinite;
animation: fade 5s 2.2s infinite
}
body .center .outer_two__piece:nth-of-type(23),body .center .outer_three__piece:nth-of-type(23) {
-webkit-animation: fade 5s 2.3s infinite;
animation: fade 5s 2.3s infinite
}
body .center .outer_two__piece:nth-of-type(24),body .center .outer_three__piece:nth-of-type(24) {
-webkit-animation: fade 5s 2.4s infinite;
animation: fade 5s 2.4s infinite
}
body .center .outer_two__piece:nth-of-type(25),body .center .outer_three__piece:nth-of-type(25) {
-webkit-animation: fade 5s 2.5s infinite;
animation: fade 5s 2.5s infinite
}
body .center .outer_two__piece:nth-of-type(26),body .center .outer_three__piece:nth-of-type(26) {
-webkit-animation: fade 5s 2.6s infinite;
animation: fade 5s 2.6s infinite
}
body .center .outer_two__piece:nth-of-type(27),body .center .outer_three__piece:nth-of-type(27) {
-webkit-animation: fade 5s 2.7s infinite;
animation: fade 5s 2.7s infinite
}
body .center .outer_two__piece:nth-of-type(28),body .center .outer_three__piece:nth-of-type(28) {
-webkit-animation: fade 5s 2.8s infinite;
animation: fade 5s 2.8s infinite
}
body .center .outer_two__piece:nth-of-type(29),body .center .outer_three__piece:nth-of-type(29) {
-webkit-animation: fade 5s 2.9s infinite;
animation: fade 5s 2.9s infinite
}
body .center .outer_two__piece:nth-of-type(30),body .center .outer_three__piece:nth-of-type(30) {
-webkit-animation: fade 5s 3s infinite;
animation: fade 5s 3s infinite
}
body .center .outer_two__piece:nth-of-type(31),body .center .outer_three__piece:nth-of-type(31) {
-webkit-animation: fade 5s 3.1s infinite;
animation: fade 5s 3.1s infinite
}
body .center .outer_two__piece:nth-of-type(32),body .center .outer_three__piece:nth-of-type(32) {
-webkit-animation: fade 5s 3.2s infinite;
animation: fade 5s 3.2s infinite
}
body .center .outer_two__piece:nth-of-type(33),body .center .outer_three__piece:nth-of-type(33) {
-webkit-animation: fade 5s 3.3s infinite;
animation: fade 5s 3.3s infinite
}
body .center .outer_two__piece:nth-of-type(34),body .center .outer_three__piece:nth-of-type(34) {
-webkit-animation: fade 5s 3.4s infinite;
animation: fade 5s 3.4s infinite
}
body .center .outer_two__piece:nth-of-type(35),body .center .outer_three__piece:nth-of-type(35) {
-webkit-animation: fade 5s 3.5s infinite;
animation: fade 5s 3.5s infinite
}
body .center .outer_two__piece:nth-of-type(36),body .center .outer_three__piece:nth-of-type(36) {
-webkit-animation: fade 5s 3.6s infinite;
animation: fade 5s 3.6s infinite
}
body .center .outer_four__piece:nth-of-type(1),body .center .outer_five__piece:nth-of-type(1) {
-webkit-animation: fade 7s .1s infinite;
animation: fade 7s .1s infinite
}
body .center .outer_four__piece:nth-of-type(2),body .center .outer_five__piece:nth-of-type(2) {
-webkit-animation: fade 7s .2s infinite;
animation: fade 7s .2s infinite
}
body .center .outer_four__piece:nth-of-type(3),body .center .outer_five__piece:nth-of-type(3) {
-webkit-animation: fade 7s .3s infinite;
animation: fade 7s .3s infinite
}
body .center .outer_four__piece:nth-of-type(4),body .center .outer_five__piece:nth-of-type(4) {
-webkit-animation: fade 7s .4s infinite;
animation: fade 7s .4s infinite
}
body .center .outer_four__piece:nth-of-type(5),body .center .outer_five__piece:nth-of-type(5) {
-webkit-animation: fade 7s .5s infinite;
animation: fade 7s .5s infinite
}
body .center .outer_four__piece:nth-of-type(6),body .center .outer_five__piece:nth-of-type(6) {
-webkit-animation: fade 7s .6s infinite;
animation: fade 7s .6s infinite
}
body .center .outer_four__piece:nth-of-type(7),body .center .outer_five__piece:nth-of-type(7) {
-webkit-animation: fade 7s .7s infinite;
animation: fade 7s .7s infinite
}
body .center .outer_four__piece:nth-of-type(8),body .center .outer_five__piece:nth-of-type(8) {
-webkit-animation: fade 7s .8s infinite;
animation: fade 7s .8s infinite
}
body .center .outer_four__piece:nth-of-type(9),body .center .outer_five__piece:nth-of-type(9) {
-webkit-animation: fade 7s .9s infinite;
animation: fade 7s .9s infinite
}
body .center .outer_four__piece:nth-of-type(10),body .center .outer_five__piece:nth-of-type(10) {
-webkit-animation: fade 7s 1s infinite;
animation: fade 7s 1s infinite
}
body .center .outer_four__piece:nth-of-type(11),body .center .outer_five__piece:nth-of-type(11) {
-webkit-animation: fade 7s 1.1s infinite;
animation: fade 7s 1.1s infinite
}
body .center .outer_four__piece:nth-of-type(12),body .center .outer_five__piece:nth-of-type(12) {
-webkit-animation: fade 7s 1.2s infinite;
animation: fade 7s 1.2s infinite
}
body .center .outer_four__piece:nth-of-type(13),body .center .outer_five__piece:nth-of-type(13) {
-webkit-animation: fade 7s 1.3s infinite;
animation: fade 7s 1.3s infinite
}
body .center .outer_four__piece:nth-of-type(14),body .center .outer_five__piece:nth-of-type(14) {
-webkit-animation: fade 7s 1.4s infinite;
animation: fade 7s 1.4s infinite
}
body .center .outer_four__piece:nth-of-type(15),body .center .outer_five__piece:nth-of-type(15) {
-webkit-animation: fade 7s 1.5s infinite;
animation: fade 7s 1.5s infinite
}
body .center .outer_four__piece:nth-of-type(16),body .center .outer_five__piece:nth-of-type(16) {
-webkit-animation: fade 7s 1.6s infinite;
animation: fade 7s 1.6s infinite
}
body .center .outer_four__piece:nth-of-type(17),body .center .outer_five__piece:nth-of-type(17) {
-webkit-animation: fade 7s 1.7s infinite;
animation: fade 7s 1.7s infinite
}
body .center .outer_four__piece:nth-of-type(18),body .center .outer_five__piece:nth-of-type(18) {
-webkit-animation: fade 7s 1.8s infinite;
animation: fade 7s 1.8s infinite
}
body .center .outer_four__piece:nth-of-type(19),body .center .outer_five__piece:nth-of-type(19) {
-webkit-animation: fade 7s 1.9s infinite;
animation: fade 7s 1.9s infinite
}
body .center .outer_four__piece:nth-of-type(20),body .center .outer_five__piece:nth-of-type(20) {
-webkit-animation: fade 7s 2s infinite;
animation: fade 7s 2s infinite
}
body .center .outer_four__piece:nth-of-type(21),body .center .outer_five__piece:nth-of-type(21) {
-webkit-animation: fade 7s 2.1s infinite;
animation: fade 7s 2.1s infinite
}
body .center .outer_four__piece:nth-of-type(22),body .center .outer_five__piece:nth-of-type(22) {
-webkit-animation: fade 7s 2.2s infinite;
animation: fade 7s 2.2s infinite
}
body .center .outer_four__piece:nth-of-type(23),body .center .outer_five__piece:nth-of-type(23) {
-webkit-animation: fade 7s 2.3s infinite;
animation: fade 7s 2.3s infinite
}
body .center .outer_four__piece:nth-of-type(24),body .center .outer_five__piece:nth-of-type(24) {
-webkit-animation: fade 7s 2.4s infinite;
animation: fade 7s 2.4s infinite
}
body .center .outer_four__piece:nth-of-type(25),body .center .outer_five__piece:nth-of-type(25) {
-webkit-animation: fade 7s 2.5s infinite;
animation: fade 7s 2.5s infinite
}
body .center .outer_four__piece:nth-of-type(26),body .center .outer_five__piece:nth-of-type(26) {
-webkit-animation: fade 7s 2.6s infinite;
animation: fade 7s 2.6s infinite
}
body .center .outer_four__piece:nth-of-type(27),body .center .outer_five__piece:nth-of-type(27) {
-webkit-animation: fade 7s 2.7s infinite;
animation: fade 7s 2.7s infinite
}
body .center .outer_four__piece:nth-of-type(28),body .center .outer_five__piece:nth-of-type(28) {
-webkit-animation: fade 7s 2.8s infinite;
animation: fade 7s 2.8s infinite
}
body .center .outer_four__piece:nth-of-type(29),body .center .outer_five__piece:nth-of-type(29) {
-webkit-animation: fade 7s 2.9s infinite;
animation: fade 7s 2.9s infinite
}
body .center .outer_four__piece:nth-of-type(30),body .center .outer_five__piece:nth-of-type(30) {
-webkit-animation: fade 7s 3s infinite;
animation: fade 7s 3s infinite
}
body .center .outer_four__piece:nth-of-type(31),body .center .outer_five__piece:nth-of-type(31) {
-webkit-animation: fade 7s 3.1s infinite;
animation: fade 7s 3.1s infinite
}
body .center .outer_four__piece:nth-of-type(32),body .center .outer_five__piece:nth-of-type(32) {
-webkit-animation: fade 7s 3.2s infinite;
animation: fade 7s 3.2s infinite
}
body .center .outer_four__piece:nth-of-type(33),body .center .outer_five__piece:nth-of-type(33) {
-webkit-animation: fade 7s 3.3s infinite;
animation: fade 7s 3.3s infinite
}
body .center .outer_four__piece:nth-of-type(34),body .center .outer_five__piece:nth-of-type(34) {
-webkit-animation: fade 7s 3.4s infinite;
animation: fade 7s 3.4s infinite
}
body .center .outer_four__piece:nth-of-type(35),body .center .outer_five__piece:nth-of-type(35) {
-webkit-animation: fade 7s 3.5s infinite;
animation: fade 7s 3.5s infinite
}
body .center .outer_four__piece:nth-of-type(36),body .center .outer_five__piece:nth-of-type(36) {
-webkit-animation: fade 7s 3.6s infinite;
animation: fade 7s 3.6s infinite
}
body .center .outer_one__piece,body .center .outer_two__piece,body .center .pieces .future_ui__piece {
position: absolute
}
body .center .outer_one__piece:nth-of-type(1),body .center .outer_two__piece:nth-of-type(1),body .center .pieces .future_ui__piece:nth-of-type(1) {
border-radius: 2px;
-webkit-transform: rotateZ(10deg);
transform: rotateZ(10deg)
}
body .center .outer_one__piece:nth-of-type(2),body .center .outer_two__piece:nth-of-type(2),body .center .pieces .future_ui__piece:nth-of-type(2) {
border-radius: 2px;
-webkit-transform: rotateZ(20deg);
transform: rotateZ(20deg)
}
body .center .outer_one__piece:nth-of-type(3),body .center .outer_two__piece:nth-of-type(3),body .center .pieces .future_ui__piece:nth-of-type(3) {
border-radius: 2px;
-webkit-transform: rotateZ(30deg);
transform: rotateZ(30deg)
}
body .center .outer_one__piece:nth-of-type(4),body .center .outer_two__piece:nth-of-type(4),body .center .pieces .future_ui__piece:nth-of-type(4) {
border-radius: 2px;
-webkit-transform: rotateZ(40deg);
transform: rotateZ(40deg)
}
body .center .outer_one__piece:nth-of-type(5),body .center .outer_two__piece:nth-of-type(5),body .center .pieces .future_ui__piece:nth-of-type(5) {
border-radius: 2px;
-webkit-transform: rotateZ(50deg);
transform: rotateZ(50deg)
}
body .center .outer_one__piece:nth-of-type(6),body .center .outer_two__piece:nth-of-type(6),body .center .pieces .future_ui__piece:nth-of-type(6) {
border-radius: 2px;
-webkit-transform: rotateZ(60deg);
transform: rotateZ(60deg)
}
body .center .outer_one__piece:nth-of-type(7),body .center .outer_two__piece:nth-of-type(7),body .center .pieces .future_ui__piece:nth-of-type(7) {
border-radius: 2px;
-webkit-transform: rotateZ(70deg);
transform: rotateZ(70deg)
}
body .center .outer_one__piece:nth-of-type(8),body .center .outer_two__piece:nth-of-type(8),body .center .pieces .future_ui__piece:nth-of-type(8) {
border-radius: 2px;
-webkit-transform: rotateZ(80deg);
transform: rotateZ(80deg)
}
body .center .outer_one__piece:nth-of-type(9),body .center .outer_two__piece:nth-of-type(9),body .center .pieces .future_ui__piece:nth-of-type(9) {
border-radius: 2px;
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg)
}
body .center .outer_one__piece:nth-of-type(10),body .center .outer_two__piece:nth-of-type(10),body .center .pieces .future_ui__piece:nth-of-type(10) {
border-radius: 2px;
-webkit-transform: rotateZ(100deg);
transform: rotateZ(100deg)
}
body .center .outer_one__piece:nth-of-type(11),body .center .outer_two__piece:nth-of-type(11),body .center .pieces .future_ui__piece:nth-of-type(11) {
border-radius: 2px;
-webkit-transform: rotateZ(110deg);
transform: rotateZ(110deg)
}
body .center .outer_one__piece:nth-of-type(12),body .center .outer_two__piece:nth-of-type(12),body .center .pieces .future_ui__piece:nth-of-type(12) {
border-radius: 2px;
-webkit-transform: rotateZ(120deg);
transform: rotateZ(120deg)
}
body .center .outer_one__piece:nth-of-type(13),body .center .outer_two__piece:nth-of-type(13),body .center .pieces .future_ui__piece:nth-of-type(13) {
border-radius: 2px;
-webkit-transform: rotateZ(130deg);
transform: rotateZ(130deg)
}
body .center .outer_one__piece:nth-of-type(14),body .center .outer_two__piece:nth-of-type(14),body .center .pieces .future_ui__piece:nth-of-type(14) {
border-radius: 2px;
-webkit-transform: rotateZ(140deg);
transform: rotateZ(140deg)
}
body .center .outer_one__piece:nth-of-type(15),body .center .outer_two__piece:nth-of-type(15),body .center .pieces .future_ui__piece:nth-of-type(15) {
border-radius: 2px;
-webkit-transform: rotateZ(150deg);
transform: rotateZ(150deg)
}
body .center .outer_one__piece:nth-of-type(16),body .center .outer_two__piece:nth-of-type(16),body .center .pieces .future_ui__piece:nth-of-type(16) {
border-radius: 2px;
-webkit-transform: rotateZ(160deg);
transform: rotateZ(160deg)
}
body .center .outer_one__piece:nth-of-type(17),body .center .outer_two__piece:nth-of-type(17),body .center .pieces .future_ui__piece:nth-of-type(17) {
border-radius: 2px;
-webkit-transform: rotateZ(170deg);
transform: rotateZ(170deg)
}
body .center .outer_one__piece:nth-of-type(18),body .center .outer_two__piece:nth-of-type(18),body .center .pieces .future_ui__piece:nth-of-type(18) {
border-radius: 2px;
-webkit-transform: rotateZ.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0