|
用CSS3实现太阳系效果（“前端”小球不动），如何使其中的文字相对用户不旋转（效果如图），我的思路是让里面的文字也相对小球旋转，一开始文字都是逆时针旋转的，神奇的是“HTML”小球正常，但是另外两个小球中的文字还在相对用户旋转，然后我把这两个文字的旋转方向改为顺时针旋转（小球都是顺时针绕圈的）居然相对用户静止了（就是文字一直正立显示）！小白表示百思不得其解，求大神解答！完整代码如下（重点在.info123,另外也欢迎提出代码优化建议，再次感谢）：css3winding#container{width:1000px;height:600px;border:2pxsolid#0F80FF;position:relative;}#ball0{position:absolute;height:80px;width:80px;left:50%;top:50%;transform:translate(-50%,-50%);background-color:#746DFF;border-radius:50%;text-align:center;}#ball1{position:absolute;height:60px;width:60px;left:60%;top:50%;transform:translate(-50%,-50%)rotate(0);background-color:#ddd;border-radius:50%;transform-origin:-116.7%50%;animation:rotate_ball16slinearinfinite;text-align:center;}#ball2{position:absolute;height:60px;width:60px;left:70%;top:50%;transform:translate(-50%,-50%)rotate(120deg);background-color:#ddd;border-radius:50%;transform-origin:-283.3%50%;animation:rotate_ball210slinearinfinite;text-align:center;}#ball3{position:absolute;height:60px;width:60px;left:80%;top:50%;transform:translate(-50%,-50%)rotate(240deg);background-color:#ddd;border-radius:50%;transform-origin:-450%50%;animation:rotate_ball314slinearinfinite;text-align:center;}.info0{display:block;padding:32px0;}.info1{display:block;padding:22px0;animation:rotate_info16slinearinfinitereverse;}.info2{display:block;padding:22px0;transform:rotate(-120deg);animation:rotate_info210slinearinfinite;}.info3{display:block;padding:22px0;transform:rotate(-240deg);animation:rotate_info314slinearinfinite;}#ball1:hover{animation-play-state:paused;}#ball1:hover.info1{animation-play-state:paused;}#ball2:hover{animation-play-state:paused;}#ball2:hover.info2{animation-play-state:paused;}#ball3:hover{animation-play-state:paused;}#ball3:hover.info3{animation-play-state:paused;}@keyframesrotate_ball1{to{transform:translate(-50%,-50%)rotate(1turn);}}@keyframesrotate_ball2{to{transform:translate(-50%,-50%)rotate(480deg);}}@keyframesrotate_ball3{to{transform:translate(-50%,-50%)rotate(600deg);}}@keyframesrotate_info1{to{transform:rotate(1turn);}}@keyframesrotate_info2{to{transform:rotate(-480deg);}}@keyframesrotate_info3{to{transform:rotate(-600deg);}}前端HTMLCSSJS |
微信访问
手机APP
