<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3实现地球模型旋转缩放</title>
<link rel="stylesheet" type="text/css" href="css/demo2.css" />
</head>
<body>
<div>
<div class="container">
<!-- 圆心-->
<div class="circle"><span style="line-height: 84px;">圆心</span></div>
<!-- 第一层-->
<div class="borther">
<div id="lopp"></div>
<div class="ball" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">1</div>
<div class="ball" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">2</div>
<div class="ball" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">3</div>
<div class="ball" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">4</div>
<div class="ball" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">5</div>
</div>
<!-- 第二层-->
<div class="borther2">
<div id="lopp2"></div>
<div class="ball ball2" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">1</div>
<div class="ball ball2" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">2</div>
<div class="ball ball2" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">3</div>
<div class="ball ball2" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">4</div>
<div class="ball ball2" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">5</div>
</div>
</div>
</div>
<script>
var items = document.querySelectorAll('.ball');
// items[0].style['animation-delay'] = '-5s,0s,0s';
// items[0].querySelector('.item__circle').style['transform'] = 'scale(1.5)';
//
for (var i = 0; i < items.length; i++) {
(function (i) {
items[i].style['animation-delay'] = (-5) - 4 * i + 's,' + (-4 * i) + 's,' + (-4 * i) + 's'
})(i);
}
function onMouseGo() {
// document.querySelectorAll('.ball').classList.add('active')
for (var i = 0; i < items.length; i++) {
(function (i) {
items[i].classList.add('active')
})(i);
}
}
function onMouseMove() {
// document.getElementsByClassName('ball').classList.remove('active')
for (var i = 0; i < items.length; i++) {
(function (i) {
items[i].classList.remove('active')
})(i);
}
}
function clickMsg(e) {
alert(e.innerText)
}
</script>
</body>
</html>
css3地球转动模型.zip （11个子文件） 
3DEarthCss3 js 
demo2.js 471B dist path-slider.min.js 4KB path-slider.js 10KB css demo2.css 3KB scss demo1.scss 2KB normalize.scss 7KB demo3.scss 2KB demo2.scss 1KB
index.html 3KB images 
shadow2.png 3KB shadow1.png 4KB资源评论
