新入博客园,发点以前写的东西占个位先
效果:
html:
<div class="a1"> <div class="b1"></div> <div class="c1"> <div class="c2"></div> </div> <div class="d1"> <div class="d2"></div> </div> </div>
css:
* {margin:0;padding:0;} body {background-color:#000;} .a1{position:relative;width:500px;height:500px;overflow:hidden;margin:50px auto 0;background-color:#FFFFFF;border-radius:50%;box-shadow:0 0 50px #FFFFFF;-webkit-transition: all 3s ease-in;-moz-transition: all 3s ease-in;} .d1{position:absolute;top:50%;right:25%;width:50%;height:50%;background-color:#000000;border-radius:50%;} .d2{position:absolute;top:40%;right:38%;width:25%;height:25%;background-color:#FFFFFF;border-radius:50%;} .c1{position:absolute;top:0;right:25%;width:50%;height:50%;background-color:#FFFFFF;border-radius:50%;} .c2{position:absolute;top:40%;right:38%;width:25%;height:25%;background-color:#000000;border-radius:50%;} .b1{position:absolute;top:0;right:0;width:250px;height:500px;background-color:#000000;border-radius:0 250px 250px 0;} @-webkit-keyframes rotation1 { from { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) } } @-webkit-keyframes rotation2 { from { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) } } @-webkit-keyframes rotation3 { from { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) } } @-moz-keyframes rotation1 { from { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) } } @-moz-keyframes rotation2 { from { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) } } @-moz-keyframes rotation3 { from { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) } } @-o-keyframes rotation1 { from { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) } } @-o-keyframes rotation2 { from { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) } } @-o-keyframes rotation3 { from { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) } } .a1 { -moz-animation: rotation1 30s linear infinite; -o-animation: rotation1 30s linear infinite; -webkit-animation: rotation1 30s linear infinite; animation: rotation1 30s linear infinite }
转载于:https://www.cnblogs.com/EkingWee/p/3314973.html