纯css实现svg地球仪旋转效果-html代码-BFW代码库

纯css实现svg地球仪旋转效果

代码语言：html

所属分类：三维

代码描述：通过css设置实现一个简单的蓝色地球仪的效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


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

<style>
/**
Globe Elements
**/
.globe__placeholder {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  overflow: visible;
  position: relative;
  float: left;
  padding: 1.7em;
  margin: 0;
  margin-bottom: 16px;
  height: 200px; /* Unscaled is 200px. If 'globe__container' is scaled, multiply this value by scale() property, e.g. 200px * 0.5 = 100px */
  width:  200px; /* Unscaled is 200px. If 'globe__container' is scaled, multiply this value by scale() property, e.g. 200px * 0.5 = 100px */
}

.globe__container {
  overflow: visible;
  position: relative;  
  display: block;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
}

.globe__container,
.globe {
  width: 200px;
  height: 200px;  
}
.globe {
  overflow: visible;
  position: relative;  
  display: block;
  margin: 0;
  padding: 0;
  top: 0; left: 0;
}

.globe__worldmap,
.globe__worldmap__front,
.globe__worldmap__back,
.globe__sphere,
.globe__outer_shadow,
.globe__reflections__bottom,
.globe__inner_shadow,
.globe__reflections__top,
.globe__outer_shadow {
  position: absolute; display: block; margin: 0; right: auto; bottom: auto;  
}

.globe__sphere,
.globe__outer_shadow,
.globe__reflections__bottom,
.globe__inner_shadow,
.globe__reflections__top {
  left: 0; top: 0; width: 200px; height: 200px;
  background-position: 0 0; background-repeat: no-repeat;
}
.globe__outer_shadow {
  left: 0; top: 186px; width: 200px; height: 30px;
  background-position: 0 0; background-repeat: no-rep.........完整代码请登录后点击上方下载按钮下载查看