How to animate an arrow in a circle?

  • 0
    How to animate an arrow in a circle?
    JavaScript Anonymous, Apr 27, 2019

  • 2 Answers
  • 0
    If by hover, then you can do this:

    div{
    width:100px;
    height: 50px;
    border: 2px dotted red;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    border-bottom:none;
    position:relative;
    color:red;
    transition: 3s all ease;
    transform-origin: 50% 100%;
    }
    div:after{
    position:absolute;
    content:'▼';
    bottom:-10px;
    right:-11px;
    transform: rotate(-38deg);
    }
    div:before{
    position:absolute;
    content:'▼';
    bottom:-10px;
    left:-11px;
    transform: rotate(38deg);
    }
    div:hover {
    transform: rotateZ(360deg)
    }
    Eleanor Cardenas

  • 0
    https://codepen.io/i-am-studio_en/pen/OJXMrvw



    All the salt is below the arrows, higher so that the eyes do not hurt to look. I recommend making the element itself from svg, so as not to block crutches.
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!