Css3动画 - 小圆围绕大圆的自转公转_css小圆围着大圆转-CSDN博客
一个面试题，题目：实现一个小圆围绕大圆转圈
例1】、先让她转起来，也就是自转：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>circle</title> <style> .circle{ margin-top: 50px; margin-left: 50px; width: 200px; height: 200px; background: #f8f806; border-radius: 50%; text-align: center; color: #fff; } .round{ background: #fff; border-width: 50px; border-style: solid; border-color: #000 #eed784 #000 #eed784;; box-sizing: border-box; animation:round 3s infinite linear; transform-origin: 50% 100px; } @keyframes round{ to{transform:rotate(1turn);} } </style></head><body> <div class="circle round"> </body></html>自转，仿黑胶唱片效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>circle</title> <style> .record{ width: 130px; height: 130px; border-radius: 50%; background: #061410; display: table-cell; text-align: center; vertical-align: middle; animation:spin 3s infinite linear; transform-origin: 50% 50%; } .inner{ box-sizing: border-box; border: 10px solid #eed784; width: 70px; height: 70px; display: inline-block; vertical-align: middle; border-radius: 50%; background: #fff; line-height: 50px; font-size: 24px; } @keyframes spin{ to{transform: rotate(1turn);} } </style></head><body> <div class="record"> <div class="inner">R</div> </div> </body></html>例2】、小圆在大圆内公转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>circle</title> <style> .circle{ margin-top: 50px; margin-left: 50px; width: 200px; height: 200px; background: #000; border-radius: 50%; text-align: center; color: #fff; } .ball1{ display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: #eed784; animation:spin1 3s infinite linear; transform-origin: 50% 100px; } @keyframes spin1{ to{transform: rotate(1turn);} } </style></head><body> <div class="circle"> <div class="ball1">H</div> </div> </body></html>例3】、小圆在大圆外公转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>circle</title> <style> .circle{ margin-top: 50px; margin-left: 50px; width: 200px; height: 200px; background: #000; border-radius: 50%; text-align: center; color: #fff; } .ball2{ display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: #eed784; position: relative; top: -30px; animation:spin2 3s infinite linear; transform-origin: 50% 130px; } @keyframes spin2{ to{transform: rotate(1turn);} } </style></head><body> <div class="circle"> <div class="ball2">H</div> </div></body></html>最后，你可以试试实现小圆在大圆内/外，公转同时自转？
答案：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>circle</title> <style> .circle{ margin-top: 50px; margin-left: 50px; width: 200px; height: 200px; background: #000; border-radius: 50%; text-align: center; color: #fff; } .ball1{ display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: #eed784; animation:spin1 3s infinite linear; transform-origin: 50% 100px; /* transform-origin: 50% 50%; 不设置则自转*/ } @keyframes spin1{ to{ transform: rotate(1turn);} } .inner1{ animation: spin-reverse 3s infinite linear; } /* 留意此处的 to | from */ @keyframes spin-reverse{ to{ transform:rotate(1turn); } } </style></head><body> <div class="circle"> <div class="ball1"><div class="inner1">H</div></div> </div></body></html>One more thing，小圆公转，但不自转:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>circle</title> <style> .circle{ margin-top: 50px; margin-left: 50px; width: 200px; height: 200px; background: #000; border-radius: 50%; text-align: center; color: #fff; } .ball1{ display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: #eed784; animation:spin1 3s infinite linear; transform-origin: 50% 100px; /* transform-origin: 50% 50%; 不设置则自转*/ } @keyframes spin1{ to{ transform: rotate(1turn);} } .inner1{ animation: spin-reverse 3s infinite linear; } /* 留意此处的 to | from */ @keyframes spin-reverse{ from{ transform:rotate(1turn); } } </style></head><body> <div class="circle"> <div class="ball1"><div class="inner1">H</div></div> </div></body></html>原网址: 访问
创建于: 2023-10-12 17:36:07
目录: default
标签: 无
未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到
最新评论