Heim  >  Fragen und Antworten  >  Hauptteil

javascript - css或者js 能不能做出点绕圆心旋转的效果?

就是类似一个点绕圆心旋转那种,比如地球绕着太阳转。思路是什么?有木有demo或者例子啊,搜索半天没有结果。

巴扎黑巴扎黑2771 Tage vor578

Antworte allen(3)Ich werde antworten

  • 伊谢尔伦

    伊谢尔伦2017-04-11 11:42:48

    https://codepen.io/kowlor/pen/ZYYQoy

    Antwort
    0
  • 大家讲道理

    大家讲道理2017-04-11 11:42:48

    demo就不写了,提供个CSS3的思路吧:
    html定义三个元素如右,<p class="canvas"><p class="sun"></p><p class="earth"></p></p>;用css将.canvas渲染为一个透明正方形,将.sun渲染为黄色圆形(其实是圆角方形),定位在.canvas的中央,将.earth渲染为蓝色圆形,置于.canvas的任意为中心位置,给.canvas增加一个css旋转的animation,循环次数为infinite,就算完成了;
    以上提到的css属性的写法都不难,在手册上或者搜索引擎中都能很容易找到,题主可以尝试一下。
    以上html元素使用svg替代更好,如果你有兴趣的话。

    然后,js就更方便了,可以用js操作普通元素,也可以操作svg元素,还可以直接用canvas画布,并且可以直接使用js自带的三角函数计算坐标来控制旋转的个体,而不用像上面那样旋转画布来取巧,这样便可以添加多个旋转速率和圆心不同天体,封装成几个类的话,轻松绘制简易太阳系也没有问题。

    Antwort
    0
  • PHP中文网

    PHP中文网2017-04-11 11:42:48

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>CSS3自动旋转效果</title>
            <style>
              .swiper-container{
                width:100%;
                margin:300px auto;
                position:relative;
              }
              .swip_center_img{
                -moz-animation:rotate 20s infinite linear;
                -webkit-animation:rotate 20s infinite linear;
                animation:rotate 20s infinite linear;
                position:absolute;
                left:50%;
                top:50%;
              }
              .center_img{
                background:rgba(120,220,210,.7);
              }
              .swip_img_radius{
                padding:10px;
                width:100px;
                height:100px;
                border-radius:50%;
                box-shadow:inset rgba(0,0,0,.2) .2em .2em 1em;
                -moz-transition:all .5s;
                -webkit-transition:all .5s;
                transition:all .5s;
              }
              @-moz-keyframes rotate{
                0%{
                  -moz-transform:rotate(0deg);
                 }
                 100%{
                   -moz-transform:rotate(360deg);
                 }
              }
              @-webkit-keyframes rotate{
                0%{
                  -webkit-transform:rotate(0deg);
                 }
                 100%{
                   -webkit-transform:rotate(360deg);
                 }
              }
              @keyframes rotate{
                0%{
                  transform:rotate(0deg);
                 }
                 100%{
                   transform:rotate(360deg);
                 }
              }
              .translate_right_top{
                background:rgba(23,43,45,.7);
                -moz-transform:translate(140px,-140px);
                -webkit-transform:translate(140px,-140px);
                transform:translate(140px,-140px);
              }
              .translate_right{
                background:rgba(123,43,45,.7);
                -moz-transform:translate(170px);
                -webkit-transform:translate(170px);
                transform:translate(170px);
              }
              .translate_right_bottom{
                background:rgba(123,73,55,.7);
                -moz-transform:translate(140px,140px);
                -webkit-transform:translate(140px,140px);
                transform:translate(140px,140px);
              }
              .translate_bottom{
                background:rgba(53,173,55,.7);
                -moz-transform:translate(0,170px);
                -webkit-transform:translate(0,170px);
                transform:translate(0,170px);
              }
              .translate_left_bottom{
                background:rgba(53,173,155,.7);
                -moz-transform:translate(-140px,140px);
                -webkit-transform:translate(-140px,140px);
                transform:translate(-140px,140px);
              }
              .translate_left{
                background:rgba(153,173,55,.7);
                -moz-transform:translate(-170px);
                -webkit-transform:translate(-170px);
                transform:translate(-170px);
              }
              .translate_left_top{
                background:rgba(53,273,55,.7);
                -moz-transform:translate(-140px,-140px);
                -webkit-transform:translate(-140px,-140px);
                transform:translate(-140px,-140px);
              }
              .translate_top{
                 background:rgba(53,173,255,.7);
                -moz-transform:translate(0,-170px);
                -webkit-transform:translate(0,-170px);
                transform:translate(0,-170px);
              }
            </style>
      </head>
      <body>
          <header class="swiper-container">
            <p class="swip_center_img">
              <p class="swip_img_radius center_img"></p>
            </p>
            <p class="swip_center_img">
              <p class="swip_img_radius translate_right_top"></p>
            </p>
            <p class="swip_center_img">
              <p class="swip_img_radius translate_right"></p>
            </p>
            <p class="swip_center_img">
              <p class="swip_img_radius translate_right_bottom"></p>
            </p>
            <p class="swip_center_img">
              <p class="swip_img_radius translate_bottom"></p>
            </p>
            <p class="swip_center_img">
              <p class="swip_img_radius translate_left_bottom"></p>
            </p>
            <p class="swip_center_img">
              <p class="swip_img_radius translate_left"></p>
            </p>
            <p class="swip_center_img">
              <p class="swip_img_radius translate_left_top"></p>
            </p>
            <p class="swip_center_img">
              <p class="swip_img_radius translate_top"></p>
            </p>
          </header>
      <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <script>
          $(document).ready(function(){
            $(".swiper-container").css("height",$(window).height());
          });
        </script>
      </body>
    </html>

    Antwort
    0
  • StornierenAntwort