css实现地球仪旋转文字动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现地球仪旋转文字动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css?family=Work+Sans:900&display=swap");
* {
  box-sizing: border-box;
}
:root {
  --orbit-speed: 6;
  --shift-speed: 6;
  --size: 25;
  --bg: #1a1a1a;
  --color: #fff;
  --water: #75c7f0;
  --land: #91e467;
  --stand-light: #666;
  --stand-dark: #4d4d4d;
}
body {
  -webkit-box-align: center;
          align-items: center;
  background: var(--bg);
  color: var(--color);
  display: -webkit-box;
  display: flex;
  font-family: 'Work Sans', sans-serif;
  -webkit-box-pack: center;
          justify-content: center;
  min-height: 100vh;
  -webkit-perspective: 500px;
          perspective: 500px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.globe {
  background: var(--water);
  border-radius: 50%;
  height: 25vmin;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0) rotate(-35deg);
          transform: translate3d(-50%, -50%, 0) rotate(-35deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 25vmin;
}
.globe__maps {
  border-radius: 50%;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.globe__stand {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, 19.5vmin);
          transform: translate(-50%, 19.5vmin);
  height: 10vmin;
  width: 15vmin;
}
.globe__stand:after,
.globe__stand:before {
  content: '';
  bottom: 0;
  position: absolute;
}
.globe__stand:before {
  background: var(--stand-dark);
  height: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  width: 10%;
}
.globe__stand:after {
  background: linear-gradient(-35deg, transparent 0 40%, rgba(242,242,242,0.25) 40% 50%, transparent 50% 55%, rgba(242,242,242,0.25) 55% 60%, transparent 60%), var(--stand-light);
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  height: 50%;
  left: 0;
  width: 100%;
}
.globe__holder {
  -webkit-clip-path: inset(0 45% 0 0);
  clip-path: inset(0 45% 0 0);
  border: 1vmin solid var(--stand-light);
  border-radius: 50%;
  height: 40vmin;
  -webkit-transform: rotate(-35deg);
          transform: rotate(-35deg);
  width: 40vmin;
  z-index: -1;
}
.globe__skewer {
  background: var(--stand-dark);
  border-radius: 50% 50% 50% 50%/0.5vmin 0.5vmin 0.5vmin 0.5vmin;
  height: 42vmin;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, -1px) rotate(-35deg);
          transform: translate3d(-50%, -50%, -1px) rotate(-35deg);
  width: 1vmin;
}
.message {
  font-size: 5vmin;
  font-weight: bold;
  left: 50%;
  margin: 0;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  white-space: nowrap;
}
.message__wrapper {
  -webkit-animation: orbit calc(var(--orbit-speed) * 1s) infinite linear;
          animation: orbit calc(var(--orbit-speed) * 1s) infinite linear;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.message__letter {
  display: inline-block;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: rotateY(calc(var(--index) * 15deg)) translate3d(-50%, -50%, 15vmin);
          transform: rotateY(calc(var(--index) * 15deg)) translate3d(-50%, -50%, 15vmin);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.world-map {
  background: var(--water);
  height: 25vmin;
  position: absolute;
  top: 0;
}
.world-map__map {
  -webkit-animation: shift calc(var(--shift-speed) * 1s) calc(var(--delay, 0) * 1s) infinite linear;
          animation: shift calc(var(--shift-speed) * 1s) calc(var(--delay, 0) * 1s) infinite linear;
}
path {
  fill: var(--land);
}
@-webkit-keyframes orbit {
  from {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
  to {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}
@keyframes orbit {
  from {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
  to {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}
@-webkit-keyframes shift {
  to {
    -webkit-transform: translate(-1009.7px, 0);
            transform: translate(-1009.7px, 0);
  }
}
@keyframes shift {
  to {
    -webkit-transform: translate(-1009.7px, 0);
            transform: translate(-1009.7px, 0);
  }
}
</style>

</head>
<body translate="no">
<div class="globe__skewer"></div>
<div class="globe__stand"></div>
<div class="globe__holder"></div>
<div class="globe">
<div class="globe__maps">
<svg class="world-map" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1009.7 666">
<define>
<g id="map">
<path d="M480 332h-1v-1h1v1zM633 389v2l-1 1v-1h-1v1h1-1v1h1-1 1v1h-1v1h-1v3h-5l-1-1h-2v-1h-1v-1h-1v-2 1h2l1-1h1l1 1h1l1-1h1v-1l1-1h1v-1l1-1 1-1h1-1v1h1zm0 1zm-5 3h-1l1-1v1zm-3 0h-1 1zm-2 0h-1 1zm3 0v1-1 1-1h-1 1zM685 351h-1v1h-6v1h-2v1h-1v2h1v2l-1 1-1 1v2h-3l1 1v2h-2v2h-1v2l-1 1v-1h-2v1h-1v1h-3v1h-1v4h-3v1h-9l-1-1h-2v-1l1-1 1-1v-2h-1l-1-1v-1h-1 1v-1l-1-1v-3h1v-1h-1v-2h1l-1-1h1v-2h1-1l1-1v-1 1h2v1h2v-1h1v-1h1v-1h2l1-1v-1l1-1v-1h2v-1h4v1h2l1 1h1v-1h1v-1 1h2v-1h2v-2h1v-1h2v1h1v2l-1 1v1h1v1l1-1h2v-1l1-1h2v1h1v-1h2v1zM302 415h-1v-1h1v1zm0-2h-1 1zM298 411zM531 331v1h1v1h1v1l-1 1v1l1 1v1h1v1h-1v2h-1v1h-1v-1l-1-1h-1v-1 1l1-1h-1v-1h1l-1-1 1-1h-1l1-1v-1h-1v-2h1v-1 1h1v-1zM605 345h-1v-1l-1-1h-1v-1 1-1h-2v-1h-2l-1-1h1-1v-1h1v-1h-1v-1h2v-1l1 1v-1h1v1h1-1 1l1 1h-1v1h1v1h1v1h-1l1 1h1v1l1 1h-1v1zm-4-8zm2 2zM512 476h-1l-1 1v2h-1v-3h1l1-1v1h1zm30 17v6h-5v11h1v1h1v1h1l1 1h-3l-1 1h-7l-1-1h-2v-1h-14v-1h-2l-1 1h-2v-5h1v-3l1-2v-1l1-1v-1l1-1h1v-1l1-1v-2l-1-1v-1l-1-1v-2l-1-1h1v-3l-1-2v-1l-1-1v-1h-1 2v-1h10v1h1v2l1 1h-1 1v1l1 1v1l1-1v1h1v-1h3v-1h1v-1l1-1h2v1h3v7l1 1v2h1-1v1h5v-1zM299 527h1v1h1v1l1 1h1v1h1l1 1h2l1 1 1 1h2v1h2v2l-1 1v2h-1v1l-1 1h3l1 1h3v-1h2v-1h1l1-1v-1l1-1v-1h2v5h-1l-1 1h-1v1h-2v1h-1 1v1h-1v-1 1h-1v2h-1v1h-1v1h-1v1h-1v1l-1 1h1v1h-1v5h-1l1 1v1h-1v5l2 1 1 1v3l1 1h1v2l-1 2-1 1h-1v1l-1 1-3 1-2 1h-7v1h1v1h-1 1v1h-1v4l-1 1h-4l-1-1h-2v4l1 1h1v1h1v-1h1v2l-1 1v-1l-1-1h-1v1h-1l2 1-1 1-1 1v3l-1 1v2h-3v1h-1l-1 1v1l-1 1v2h1l1 2h3v3h-1 1v1l-1 2h-2v1h-1v1l-1 1v3l-1 1h-1l-1-1h-1v1h2l-1 1h-1v3h-1 1v3h-1 1l1 2h1v1h-1l-1-1h-5l-2-1h-1l-1-1v-5h-2v1l-1-1v-4h-1v-1h2v-2h1v-2h1v-2h-1v-1h1v-1l1-1v-2h1v-1l-1-1v-1h1v-1h-1l1-1 1-1h-1v-1h-1v-1h2v-1l-2-1v-1h1v-1h-1 1v-1h-1v-1h1-1v-1h-1l1-1h-1v-1h1l-1-1h1l1-1h-1v-6h1-1v-1h1v-4h1v-1h1v-2l-1-1v-4l1-1 1-1v-4h1v-2h1v-4h-1v-3h-1v-1h1-1v-3h1-1l1-1v-1h1v-2l-1-1v-1h1v-2l1-1 1-1v-2h1l1-1v-1h-1v-1h1v-2l-1-1h1v-1l-1-1h1v-1h1l1-1h1v-1l1-1v-1l-1-1h1v-1h1v-1h1v-1l1 1h3l1 1v1h1v-2h4v1zm2 55zm-19 65v-10l1 1v1l1 1v1l1 1 1 1 1 1h1v1h1l1 1h2v1h-3v1h-1l-1-1h-5zm12-1h2v1h-3 1v-1zM1006 503h1-1zM522 307v1l1 1v2h-2 1v1h-1v2h-1v1h-3v1h-5l-1-1h-2v-1h-3v1h-1l-1-1h-1v1-1h-1v-2h2l-1 1h1v-1h3l1-1h3v1h1v-1h-1v-2h1v-1h1v-1 1-1h4v-1h2l1 1h1v-1l1 1zM841 495v-1 1h2v-1l1 1-1 1h-2v-1zm18 12l1 1v-1h-1zm7 3h1v-1h-1v1h-1 1zm8-19zm-16 4l1-1h-1v1zm-11-1v1-1zm11 1h-1v1l1-1zm1 12zm15-14zm-16 14zm1-4v-2h-1v2h1zm40 28h1-1v-1 1zm5 6h1v-3 1l-1 1v1zm1 5h1-1l1-1h-1v1zm0 1h1v-1l-1 1zm-8-16v-1 1zm-1-1v1-1zm-11-11h1-1zm-11-23v-1 1zm19 28zm0 1v-1 1zm-27-10h1-1zm17 68zm8 6l-1-1v2h1v-1zm0 2zm-9-7h1v-1h-1v1zm-1 7v-1 1zm-24-85v-1 1zm64 143v1-1zm-30-59h-1l1 1v-1 1l1-1h-1zm0 7v-5h-2v1l-1-1v1h-4v-1h-3v-1 3l1 1v1h1v1h-1 1v1l-1-1v1h1v2h1v1h1v1h2l1-1h-1 1v-2l1 1h1-1v1h1v-4h1v-1 1zm15-48v-1h-1v-6h-1v-2h-1v-2h-1v-1h-1v-1h-1l-1-1-1-1v-3h-1v1-1h-1v-1 1h-1v-1l-1-1v-2h-1v-1h-1v-1h1-1v-1h-2v-1h-1v-1h-2v-1h-1l-1-1h1l-1-1v-3l-1-1v-1h-1v-5h-1v-1h-1v-1h-2v1l-1-1v-4h-1v-3h-1v-2h-1v-1h-1v3h-1v3h-1v10h-1v2l-1 1v1h-3l-1-1h-1v-1h-1v-1h-2l-1-1-1-1h-1v-1h-2v-1h-1l-1-1v-1l1-1v-1h1l-1-1v-1h2v-1l1-1v-1h-1v-1l-1 1v1-1h-1v-1 1h-4l-1-1h-3v-1h-1l-1-1v1l-1-1v1h2v2h-4v1h-2v1h-1v2h-1v1l-1 1v1h1v2-1h-1v1h-1v-1h-2v1h-1v-1h1v-1h-1l-1-1v-1h-2l-1 1v-1l-1 1v-1 2h-1v-1h-1v1h-1v1h1v1l-1-1v1h-1 1v1-1h-1l-1 1v1h1-1v1h1-3l-1 1h1v1h1-1v2-1h-1v-1h-1v-2 1h-1v1h-1v3l-1 1v1h-1v1l-1 1-1 1h-1l-1 1h-3l-1 1h-2v1h-4l-2 1v1h-1l-1 1h-1v1l-1 1h-1v-2 1l-1 1v4l-1 1v2h1v1l1 2v2-1h-1v1-2h-1v1h1v2-1h-1v-1 1l1 2 1 1v3h1v1h1l-1 1h1v1l1 1-1 1 1 1v3l1 1 1 1v3h-1l1 2-1 1v1h-1v-1 3h1l1 1v1h4l1 1 1-1 2-1h1v-1h1l1-1h2l1-1h3l1 1h4v-1h1v-2h1v-1h1l1-1h1l1-1h5l1-1h2l1-1h8l1 1h1l2 1h1l1 1h1v1h-1l1 1h1v2h1v1h1v2h-1 1l1 1h1l-1-1h1v-1l1-1 1-1h1v-1l1-1v-1h1v-1 4h-1v3l-1 1h-1v1h2l1-2v-2l1 1v1h1v1l-1 1v1h2l1-1v1h-1v1h1v1h1v4l1 1 1 1 1 1h1l1 1h3l1 1h1l1 1v-1h1v-1h2v-1h-1 1l1-1v2h-1l1 1v-1h1v1h1v1h1l1 1v-1h-1v-1h2l2-2 1-1h5v-1h1v-6h1v-2h1v-3h1v-2h1l-1-1h1v-1h1v-1h1v-1h1v-2h1v-4l1-2v-3h1v-3zm-66-49h1v-1h-1v1zm-48 42v-1 1h1-1zm7-16zm25-16h1-1zm2-2zm62 92v1h1l-1-1zm0 1v1-1zm3-2h-1 1zm-29-25h-1v-1h-1v1h-2l1 1h2v-1h2-1zm17 14v-1 2-1zm-57-86zM279 428h-1v-1l1 1zM531 250h1v1h-1v1h-1v-2 1h1v-1h-1 1zm-1 1zm3 1h-1 1z"></path>
<path d="M611 334l1 1 1 1v1l1 1v1h2v1h-2v2h-1v3-1h-1v3h-1v-1h-1v-3h1-1v-1h-1l-1 1h-1v1h-1v1h-1v-1h1l-1-1v-1h-1l-1-1h1v-1h-1v-1h-1v-1h1l-1-1h-1 1-1v-1h2l1 1h2v-1h-1v-2h1l1 1v1h1l1 1v-1h1v-1h1v-1zm-8 5zm-2-2zm3 8h-1l-1-1v-1h-1v-1h1v1h1l1 1v1zM522 321h3v1-1h1l1 1h2v3l1 1h-1l1 1-1 1v-1 1h-1v1-1 1h-1v2h-1l-1-1h-1v-1h-1v-1l-1-1-1-1v-1h-1v-1l-1-1v-2h1v1h1v-1h1zM308 426l-1-1h1v1zM735 400v2h-1v2-1l-1-1v-3h-1v-2l-1 1h-1l-1-1v-2 1h-1 1v3l-1 1v1-1h-1v-1 1l-1 1v-2 2h-1v-3h-1v-3h-1l1-1v-1h-1v-1l-1 1v-2h1v-1h2-1v-1h-1v-1h-1l1-1v-1h1v1h1-1 1v-1 2h1v-1h1v3h6l1 1v1h-1v1h-1v1h-1v3-1h1v1-1h1v-1h1v3h1v2zm-6-3zm1 3h-1v-3 1h1v2zm2-1h-1l1-1v1zm-1 0l-1 1 1-2v1zm2 2v-1 1zm0 0zM488 295h1l1 1h1v2h1v1h1v1h-1v1h-1v2h-1l-1-1h-1v-1h1-2v-1h-2v-1h-1v-1h-2v-2h1l1-1v1h2l1-1h1zM476 421h-1v1h1v2h1v1h1v1l1 1h2v2l1 1h-1l-1 1h-2v1h-11v5-1h-1v-1h-2l-1 1h-1l-1-1v-1h-2l1-1v-1h-1 1v-3h2v-2h1v-2h1l1 1h1v-2 1h1v-2h2v.........完整代码请登录后点击上方下载按钮下载查看