Анимация иконки Loaction с использованием чистого CSS - PullRequest
Новая
       41

Анимация иконки Loaction с использованием чистого CSS

0 голосов
/ 14 декабря 2018

Я планировал сделать как каплю воды, путешествующую вокруг значка местоположения. Попробовал немного, но я не мог позволить воде вращаться идеально вокруг значка местоположения, так как я не сильно увлекаюсь анимацией.

Вот мой код, 

 <div id ="location">
    <div id = "droplet"></div>
 </div>

    #location {
      background: black;
      height: 200px;
      width: 200px;
      border-radius: 50% 50% 50% 0;
      transform:rotate(-45deg);  
    }

    #location::after{
        content '';
        width 14px;
        height 14px;
        margin: 8px 0 0 8px;
        background: #89849b;
        position absolute;
        border-radius 50%;
    }

    #droplet {
     background: #2c3e50;
     height: 50px;
     width: 50px;
     border-radius:50%;
     border:  5px double darkgreen;
     margin: 23%; 
     -webkit-animation-name: rotate;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-duration:4s 
    }

    @-webkit-keyframes rotate{
      0%{-webkit-transform: rotate(-90deg) rotateY(0) scale(0)}
      30%{-webkit-transform: rotate(90eg) rotateY(0) scale(0.7)}
      80%{-webkit-transform: rotate(180deg) rotateY(0) scale(1)}
      100%{-webkit-transform: rotate(-360deg) rotateY(0) scale(0)}
    }

Как заставить капельку вращаться в пределах значка местоположения (но она должна двигаться по краям)

...