css三维圆球线框图旋转进入内部动画效果代码
代码语言:html
所属分类:三维
代码描述:css三维圆球线框图旋转进入内部动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #111; overflow: hidden; color: #fff; font-family: Consolas, monospace; } #scene { perspective: 500px; transform-style: preserve-3d; display: flex; justify-content: center; align-items: center; min-height: 100vh; transition: perspective 1s ease-in-out; pointer-events: none; z-index: 0; } #scene * { transform-style: preserve-3d; position: absolute; } #sphere { display: flex; justify-content: center; align-items: center; min-height: 100vh; animation: rotate-around 40s linear infinite; } @keyframes rotate-around { 0% { transform: rotateX(-20deg) rotateY(0deg); } 10% { transform: rotateX(-20deg) rotateY(36deg); } 50% { transform: rotateX(-70deg) rotateY(180deg); } 60% { transform: rotateX(-70deg) rotateY(216deg); } 100% { transform: rotateX(-20deg) rotateY(360deg); } } #sphere .longitudes, #sphere .latitudes { display: flex; justify-content: center; align-items: center; } #sphere .longitude, #sphere .latitude { border-radius: 50%; border: 5px solid; aspect-ratio: 1/1; } #sphere .longitude { border-color: #0f0a; width: 400px; } #sphere .latitude { border-color: #0ffa; } #sphere .longitude:nth-child(1) { transform: rotateY(0deg); } #sphere .longitude:nth-child(2) { transform: rotateY(10deg); } #sphere .longitude:nth-child(3) { transform: rotateY(20deg); } #sphere .longitude:nth-child(4) { transform: rotateY(30deg); } #sphere .longitude:nth-child(5) { transform: rotateY(40deg); } #sphere .longitude:nth-child(6) { transform: rotateY(50deg); } #sphere .longitude:nth-child(7) { transform: rotateY(60deg); } #sphere .longitude:nth-child(8) { transform: rotateY(70deg); } #sphere .longitude:nth-child(9) { transform: rotateY(80deg); } #sphere .longitude:nth-child(10) { transform: rotateY(90deg); } #sphere .longitude:nth-child(11) { transform: rotateY(100deg); } #sphere .longitude:nth-child(12) { transform: rotateY(110deg); } #sphere .longitude:nth-child(13) { transform: rotateY(120deg); } #sphere .longitude:nth-child(14) { transform: rotateY(130deg); } #sphere .longitude:nth-child(15) { transform: rotateY(140deg); } #sphere .longitude:nth-child(16) { transform: rotateY(150deg); } #sphere .longitude:nth-child(17) { transform: rotateY(160deg); } #sphere .longitude:nth-child(18) { transform: rotateY(170deg); } #sphere .longitude:nth-child(19) { transform: rotateY(180deg); } #sphere .latitude:nth-child(1) { width: 0px; transform: translateY(-200px) rotateX(90deg); } #sphere .latitude:nth-child(2) { width: 69.4592710668px; transform: translateY(-196.9615506024px) rotateX(90deg); } #sphere .latitude:nth-child(3) { width: 136.8080573303px; transform: translateY(-187.9385241572px) rotateX(90deg); } #sphere .latitude:nth-child(4) { width: 200px; transform: translateY(-173.2050807569px) rotateX(90deg); } #sphere .latitude:nth-child(5) { width: 257.1150438746px; transform: translateY(-153.2088886238px) rotateX(90deg); } #sphere .latitude:nth-child(6) { width: 306.4177772476px; transform: translateY(-128.5575219373px) rotateX(90deg); } #sphere .latitude:nth-child(7) { width: 346.4101615138px; transform: translateY(-100px) rotateX(90deg); } #sphere .latitude:nth-child(8) { width: 375.8770483144px; transform: translateY(-68.4040286651px) rotateX(90deg); } #sphere .latitude:nth-child(9) { width: 393.9231012049px; transform: translateY(-34.7296355334px) rotateX(90deg); } #sphere .latitude:nth-child(10) { width: 400px; transform: translateY(0px) rotateX(90deg); } #sphere .latitude:nth-child(11) { width: 393.9231012049px; transform: translateY(34.7296355334px) rotateX(90.........完整代码请登录后点击上方下载按钮下载查看
网友评论0