*{margin:0; padding:0;}
.all{width:360px; height:625px; margin-top:100px; margin-left:100px;}
.main{width:350px; height:350px; border:5px solid green; font-size:0; border-radius:350px; position:relative; background:radial-gradient(#FFF 5%, green 95%); z-index:1;}
.main div{width:30px; height:150px; border:1px solid green; background-color:green; display:inline-block; box-sizing:border-box; border-radius:50% 50%;}
.main div:nth-child(1){margin-left:161px; margin-top:14px;}
.main div:nth-child(2){transform:rotate(120deg); transform-origin:0 100%;}
.main div:nth-child(3){transform:rotate(240deg); transform-origin:-50% 117%;}
.main h1{width:80px; height:80px; background-color:green; position:absolute; border-radius:80px; top:135px; left:135px;}
.animate-rotate360-0{}
.animate-rotate360-1{animation:rotate360 .4s linear infinite both;}
.animate-rotate360-2{animation:rotate360 .6s linear infinite both;}
.animate-rotate360-3{animation:rotate360 1s linear infinite both;}
@keyframes rotate360{
0% {}
100% {transform:rotate(360deg);}
}
.box{width:60px; height:190px; border:5px solid green; margin-left:145px; position:relative; top:-10px; background:radial-gradient(#FFF 5%, green 120%);}
.box .btn:nth-child(1){margin-top:30px;}
.box .btn{width:20px; height:20px; margin-left:20px; margin-top:10px; border-radius:20px; position:relative;}
.box .btn input[type="radio"]{width:20px; height:20px; position:absolute; top:0; left:0; opacity:0; cursor:pointer;}
.box .btn input[type="radio"]:checked + span{background-color:red;}
.box .btn span{display:block; width:20px; height:20px; background-color:green; color:#FFF; text-align:center; line-height:20px; border-radius:20px; font-size:12px;}
.footer{width:300px; height:60px; border:5px solid green; margin-left:25px; border-radius:50% 50%; position:relative; top:-20px; background:radial-gradient(#FFF 5%, green 75%); z-index:1; box-shadow:3px 4px 10px 3px gray;}
1
2
3
0
window.onload = function(){
var input = document.getElementsByTagName(‘input‘),
main = document.getElementsByClassName(‘main‘)[0];
for(var i=0; i
input[i].addEventListener(‘click‘, function(){
var num = parseInt(this.parentNode.getElementsByTagName(‘span‘)[0].innerHTML);
main.className = ‘main animate-rotate360-‘ + num;
}, false)
}
}