css实现三维进入球体内部动画效果代码
代码语言：html
所属分类：动画
代码描述：css实现三维进入球体内部动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en" class=" -webkit-"><head>
<meta charset="UTF-8">
<style>
#btn--yp {
box-sizing: content-box;
position: fixed;
z-index: 9;
bottom: 1em;
right: 1em;
border: solid 1em transparent;
width: 4.625em;
height: 3.25em;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/icon-yp.svg) 50%/cover content-box;
font: 16px/1.25 trebuchet ms, sans-serif;
text-indent: 200vw;
text-shadow: none;
filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0);
transition: 0.5s;
white-space: nowrap;
}
#btn--yp:before {
box-sizing: inherit;
position: absolute;
left: 0;
bottom: 100%;
margin: 1em -0.5em;
padding: 0.5em;
width: 100%;
border-radius: 5px;
background: #e8e0e0;
color: #000;
text-align: center;
text-decoration: none;
text-indent: 0vw;
white-space: normal;
animation: float 1s ease-in-out infinite alternate;
content: attr(data-txt);
}
#btn--yp:hover, #btn--yp:focus {
outline: none;
filter: grayscale(0) drop-shadow(0 0 1px crimson);
}
@keyframes float {
to {
transform: translateY(0.75em);
}
}
body, div {
display: grid;
}
body {
overflow: hidden;
margin: 0;
height: 100vh;
perspective: 35em;
background: #262626;
animation: a 12s ease-in-out infinite alternate;
}
@keyframes a {
90%, 100% {
perspective: 5em;
}
}
div {
transform-style: preserve-3d;
}
.dot {
--m: calc(.5*(var(--n-dots) - 1));
--abs: Max(calc(var(--m) - var(--j)), calc(var(--j) - var(--m)));
--f: calc(1.05 - var(--abs)/var(--m));
--k: calc(var(--n-rots)*var(--j)/(var(--n-dots) - 1));
--ay: calc((var(--i) - var(--k))/var(--n-arms)*1turn);
--az: calc((var(--j) + .5)/var(--n-dots)*.5turn - 90deg);
grid-area: 1/1;
place-self: center;
padding: calc(var(--f)*0.5em);
border-radius: 50%;
transform: rotatey(var(--ay)) rotatez(var(--az)) translate(10em) rotatez(calc(-1*var(--az))) rotatey(calc(-1*var(--ay)));
background: radial-gradient(circle at 25% 25%, #fff, rgba(255, 255, 255, 0) 75%) hsl(calc(2*var(--j)/var(--n-dots)*360), 100%, 35%);
}
</style>
</head>
<body >
<style>.dot:nth-child(n + 1) { --i: 0 }.dot:nth-child(n + 81) { --i: 1 }.dot:nth-child(n + 161) { --i: 2 }.dot:nth-child(n + 241) { --i: 3 }.dot:nth-child(n + 321) { --i: 4 }.dot:nth-child(n + 401) { --i: 5 }.dot:nth-child(n + 481) { --i: 6 }.dot:nth-child(n + 561) { --i: 7 }.dot:nth-child(n + 641) { --i: 8 }.dot:nth-child(n + 721) { --i: 9 }.dot:nth-child(80n + 1) { --j: 0 }.dot:nth-child(80n + 2) { --j: 1 }.dot:nth-child(80n + 3) { --j: 2 }.dot:nth-child(80n + 4) { --j: 3 }.dot:nth-child(80n + 5) { --j: 4 }.dot:nth-child(80n + 6) { --j: 5 }.dot:nth-child(80n + 7) { --j: 6 }.dot:nth-child(80n + 8) { --j: 7 }.dot:nth-child(80n + 9) { --j: 8 }.dot:nth-child(80n + 10) { --j: 9 }.dot:nth-child(80n + 11) { --j: 10 }.dot:nth-child(80n + 12) { --j: 11 }.dot:nth-child(80n + 13) { --j: 12 }.dot:nth-child(80n + 14) { --j: 13 }.dot:nth-child(80n + 15) { --j: 14 }.dot:nth-child(80n + 16) { --j: 15 }.dot:nth-child(80n + 17) { --j: 16 }.dot:nth-child(80n + 18) { --j: 17 }.dot:nth-child(80n + 19) { --j: 18 }.dot:nth-child(80n + 20) { --j: 19 }.dot:nth-child(80n + 21) { --j: 20 }.dot:nth-child(80n + 22) { --j: 21 }.dot:nth-child(80n + 23) { --j: 22 }.dot:nth-child(80n + 24) { --j: 23 }.dot:nth-child(80n + 25) { --j: 24 }.dot:nth-child(80n + 26) { --j: 25 }.dot:nth-child(80n + 27) { --j: 26 }.dot:nth-child(80n + 28) { --j: 27 }.dot:nth-child(80n + 29) { --j: 28 }.dot:nth-child(80n + 30) { --j: 29 }.dot:nth-child(80n + 31) { --j: 30 }.dot:nth-child(80n + 32) { --j: 31 }.dot:nth-child(80n + 33) { --j: 32 }.dot:nth-child(80n + 34) { --j: 33 }.dot:nth-child(80n + 35) { --j: 34 }.dot:nth-child(80n + 36) { --j: 35 }.dot:nth-child(80n + 37) { --j: 36 }.dot:nth-child(80n + 38) { --j: 37 }.dot:nth-child(80n + 39) { --j: 38 }.dot:nth-child(80n + 40) { --j: 39 }.dot:nth-child(80n + 41) { --j: 40 }.dot:nth-child(80n + 42) { --j: 41 }.dot:nth-child(80n + 43) { --j: 42 }.dot:nth-child(80n + 44) { --j: 43 }.dot:nth-child(80n + 45) { --j: 44 }.dot:nth-child(80n + 46) { --j: 45 }.dot:nth-child(80n + 47) { --j: 46 }.dot:nth-child(80n + 48) { --j: 47 }.dot:nth-child(80n + 49) { --j: 48 }.dot:nth-child(80n + 50) { --j: 49 }.dot:nth-child(80n + 51) { --j: 50 }.dot:nth-child(80n + 52) { --j: 51 }.dot:nth-child(80n + 53) { --j: 52 }.dot:nth-child(80n + 54) { --j: 53 }.dot:nth-child(80n + 55) { --j: 54 }.dot:nth-child(80n + 56) { --j: 55 }.dot:nth-child(80n + 57) { --j: 56 }.dot:nth-child(80n + 58) { --j: 57 }.dot:nth-child(80n + 59) { --j: 58 }.dot:nth-child(80n + 60) { --j: 59 }.dot:nth-child(80n + 61) { --j: 60 }.dot:nth-child(80n + 62) { --j: 61 }.dot:nth-child(80n + 63) { --j: 62 }.dot:nth-child(80n + 64) { --j: 63 }.dot:nth-child(80n + 65) { --j: 64 }.dot:nth-child(80n + 66) { --j: 65 }.dot:nth-child(80n + 67) { --j: 66 }.dot:nth-child(80n + 68) { --j: 67 }.dot:nth-child(80n + 69) { --j: 68 }.dot:nth-child(80n + 70) { --j: 69 }.dot:nth-child(80n + 71) { --j: 70 }.dot:nth-child(80n + 72) { --j: 71 }.dot:nth-child(80n + 73) { --j: 72 }.dot:nth-child(80n + 74) { --j: 73 }.dot:nth-child(80n + 75) { --j: 74 }.dot:nth-child(80n + 76) { --j: 75 }.dot:nth-child(80n + 77) { --j: 76 }.dot:nth-child(80n + 78) { --j: 77 }.dot:nth-child(80n + 79) { --j: 78 }.dot:nth-child(80n + 80) { --j: 79 }
</style>
<div class="ball" style="--n-arms: 10; --n-dots: 80; --n-rots: 12">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="d.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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