• css3椭圆旋转


    需求
    1.实现元素沿椭圆轨迹均匀旋转
    2.鼠标点击事件、移入暂停运动
    3.元素由远到近逐渐增大

     
     

    网上关于css3实现旋转的案例很多,我也是借鉴别人方法,这里不细说直接上代码,通过css3实现的旋转动画存在一个小问题,旋转元素是图片,在运动过程中图片会发生抖动现象,后来尝试用svg动画解决了此问题,具体内容见《svg实现沿椭圆轨迹旋转动画》

    <div class="container">
        <!-- 旋转动画 -->
        <div class="animate">
          <div class="ball ball1">
            <img src="img/ball.jpg">
            <p>1</p>
          </div>
          <div class="ball ball2">
            <img src="img/ball.jpg">
            <p>2</p>
          </div>
          <div class="ball ball3">
            <img src="img/ball.jpg">
            <p>3</p>
          </div>
          <div class="ball ball4">
            <img src="img/ball.jpg">
            <p>4</p>
          </div>
          <div class="ball ball5">
            <img src="img/ball.jpg">
            <p>5</p>
          </div>
          <div class="ball ball6">
            <img src="img/ball.jpg">
            <p>6</p>
          </div>
        </div>
        <!-- 旋转动画结束 -->
      </div>
    
    /* 旋转动画 */
    .animate {
      width: 420px;
      height: 300px;
      border-radius: 50%;
      position: absolute;
      left: 10px;
      top: 20px;
      }
    @keyframes animX{
      0% {left: -20px;}
    100% {left: 340px;}
    }
    @keyframes animY{
      0% {top: -30px;}
    100% {top: 200px;}
    }
    @keyframes scale {
      0% {
        transform: scale(0.7)
      }
      50% {
        transform: scale(1.2)
      }
      100% {
        transform: scale(0.7)
     }
    }
    .ball {
      width: 100px;
      height: 100px;
      position: absolute;
      display:flex;
      flex-direction: column;
      align-items:center;
      justify-content:center;
      font-size: 12px;
    }
    .ball img:hover{
      transform: scale(1.2);
    }
    .ball img{
      width: 70px;
      height: 70px;
      margin-bottom: 10px;
    }
    /* 6个图x和y轴动画加起来是18s , 18s/6 等于 3s
    每个球y轴动画延迟 从0递减3s,x轴与y轴相差动画时长的一半(9s/2) */
    .ball1 {
      animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
      animY 9s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
      scale 18s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
    }
    .ball2 {
      animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate,
      animY 9s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
      scale 18s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate;
    }
    .ball3 {
      animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -10.5s infinite alternate,
      animY 9s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
      scale 18s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
    }
    .ball4 {
      animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -13.5s infinite alternate,
      animY 9s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate,
      scale 18s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate;
    }
    .ball5 {
      animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -16.5s infinite alternate,
      animY 9s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
      scale 18s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
    }
    .ball6 {
      animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
      animY 9s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
      scale 18s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate;
    }
    
    var items = document.getElementsByClassName("ball");
    //console.log(items)
    for (var i = 0; i < items.length; i++) {
      items[i].addEventListener('click', function () {
        console.log(this)
      })
    }
    for (var i = 0; i < items.length; i++) {
      items[i].addEventListener('mouseover', function () {
        for (j = 0; j < items.length; j++) {
          items[j].style.animationPlayState = "paused";;
        }
    
      })
      items[i].addEventListener('mouseout', function () {
        for (j = 0; j < items.length; j++) {
          items[j].style.animationPlayState = "running";;
        }
      })
    }
    

    参考
    [1] css3实现椭圆轨迹旋转

    好记性不如烂笔头,总结和记录工作学习中的点点滴滴,如有不对之处还请指教。

  • 相关阅读:
    huffman编码压缩算法(转)
    ReLU 和sigmoid 函数对比以及droupout
    分类中数据不平衡问题的解决经验(转)
    C++ 虚函数表解析
    const 和宏的区别
    static小结
    javascript技巧字典【转藏】
    七个心理寓言【转】
    购物车悬浮 + 购物数量显示
    好看的图标
  • 原文地址:https://www.cnblogs.com/jun881821/p/14124043.html
Copyright © 2020-2023  润新知