CSS offset-path 沿圆弧移动而不旋转

Question

我正在尝试创建一个圆形按钮，侧面带有“襟翼”，当您单击该按钮时，襟翼应沿着圆圈移动到底部。

襟翼到达底部，但它开始旋转。我怎样才能在没有初始旋转的情况下沿着圆圈移动它？

与此代码相关的问题。为什么翻盖不可点击？为什么光标不是指针，即使它设置在 css 中？如何让动画在不活动的时候倒转？

谢谢

$(".kolecko").on('click', function(){
$(this).toggleClass('active');
});

.kolecko{
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: #001f49;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        position: relative;
        cursor: pointer;
        }
        .kolecko::after{
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          content: "\f138";
          width: 40px;
          height: 50px;
          position: absolute;
          left: 100%;
          top: 50%;
          transform: translate(-4px,-50%);
          background: #8bc1ff;
          line-height: 50px;
          font-size: 25px;
          z-index: -1;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
          cursor:pointer;
        }
        
 .kolecko.active::after{
          content: "\f139";
          offset-path: path('M-75,-75 A75,75 -45 0,1 -75,75');
          animation: move 1000ms ease-in-out forwards;
        }
@keyframes move {
  0% {
    offset-distance: 50%;
  }
  100% {
    offset-distance: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" 
integrity="sha384- 
 B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" 
  crossorigin="anonymous">
<div class="kolecko" data-for="zalozit-klic">
                        <span class="chci">chci</span>
                        <span class="nazev-sluzby">ZALOŽIT s.r.o. NA KLÍČ</span>
                    </div>

Answer 1

不幸的是，我不知道如何使用 offset-path 解决这个问题...但是我真的很想帮忙...

我们可以把这个BUG改成FEATURE :)

所以在 100% 的 @keyframe 中，我添加了一些 transform 属性...因此您再也看不到错误了！

我添加的内容：

transform: rotate(-90deg) translateX(40%);

完整的@keyframe代码：

@keyframes move {
    0% {
        offset-distance: 50%;
    }
    100% {
        offset-distance: 100%;
        transform: rotate(-90deg) translateX(40%);
    }
}

完整的固定代码片段：

$(".kolecko").on('click', function() {
  $(this).toggleClass('active');
});

.kolecko {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #001f49;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.kolecko::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f138";
  width: 40px;
  height: 50px;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(-4px, -50%);
  background: #8bc1ff;
  line-height: 50px;
  font-size: 25px;
  z-index: -1;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  cursor: pointer;
}

.kolecko.active::after {
  content: "\f139";
  offset-path: path('M-75,-75 A75,75 -45 0,1 -75,75');
  animation: move 1000ms ease-in-out forwards;
}

@keyframes move {
  0% {
    offset-distance: 50%;
  }
  100% {
    offset-distance: 100%;
    transform: rotate(-90deg) translateX(40%);
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384- 
 B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="./script.js" defer></script>
</head>

<body>
  <div class="kolecko" data-for="zalozit-klic">
    <span class="chci">chci</span>
    <span class="nazev-sluzby">ZALOŽIT s.r.o. NA KLÍČ</span>
  </div>
</body>

</html>

Answer 2

通过将“after”替换为具有 svg 背景的元素来修复它。添加了向后摆动的动画。

使用翻译翻转元素并将其塞入主圆下方。 @laaouatni-anas

使用翻译的灵感

 
 $(".kolecko").on('click', function (){
            const data = $(this).data('for');

            if($(this).hasClass('active')){
                $(this).removeClass('active');
                $('.kolecko').not(this).removeClass('non-active');
                $(this).addClass('wasActive')
                    .delay(1000)
                    .queue(function(next){
                        $(this).removeClass('wasActive');
                        next();
                    });
            }
            else if($(this).hasClass('non-active')){
                $('.kolecko').not(this)
                    .removeClass('active')
                    .addClass('non-active wasActive')
                    .delay(1000)
                    .queue(function(next){
                        $(this).removeClass('wasActive');
                        next();
                    });
                $(this).removeClass('non-active').addClass('active');

            }
            else{
                $('.kolecko').not(this).addClass('non-active');
                $(this).addClass('active');

             
            }

    });

 .kolecko{
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: #001f49;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        position: relative;
        cursor: pointer;
 }
  .kolecko.active .ucho{
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1175 1175'%3E%3Cpath style='fill:%23ed174a' class='fil0' d='M957 1l-957 -1c65,184 101,381 101,587 0,206 -36,404 -101,587l957 1c120,0 218,-98 218,-218l0 -738c0,-120 -98,-218 -218,-218z'/%3E%3C/svg%3E");
          offset-path: path('M-75,-75 A75,75 0 0,1 -75,75');
          animation: move 1000ms ease-in-out forwards;
          transform: rotate(-90deg) translate(calc(50% - 4px),0);
  }
.kolecko.active .ucho::after{
            content: "\f137";
          }

.kolecko.wasActive .ucho{
        offset-path: path('M-75,-75 A75,75 0 0,1 -75,75');
        animation: moveback 1000ms ease-in-out forwards;
        transform: rotate(-90deg) translate(calc(50% - 4px),0);
 }
.ucho{
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1175 1175'%3E%3Cpath style='fill: %239BA1C6' class='fil0' d='M957 1l-957 -1c65,184 101,381 101,587 0,206 -36,404 -101,587l957 1c120,0 218,-98 218,-218l0 -738c0,-120 -98,-218 -218,-218z'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          width: 45px;
          height: 45px;
          background-size: 100% 100%;
          line-height: 45px;
          position: absolute;
          left: 100%;
          top: 50%;
          transform: translate(-4px,-50%);
          cursor: pointer;
}
.ucho::after{
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f138";
            font-size:25px;
}


@keyframes move {
  0% {
    offset-distance: 50%;
  }

  100% {
    offset-distance: 100%;
  }
}
@keyframes moveback {
  0% {
    offset-distance: 100%;
  }

  100% {
    offset-distance: 50%;

  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" 
integrity="sha384- 
 B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" 
  crossorigin="anonymous">
<div class="kolecko" data-for="zalozit-klic">
                        <span class="chci">chci</span>
                        <span class="nazev-sluzby">ZALOŽIT s.r.o. NA KLÍČ</span>
                        <span class="ucho">
                    </div>

CSS offset-path 沿圆弧移动而不旋转

CSS offset-path move along arc without rotating

css

animation