Пограничный переход / поворот на странице страницы - PullRequest
Новая
       60

Пограничный переход / поворот на странице страницы

0 голосов
/ 04 октября 2018

У меня трудности с переходом.Если вы проверите мой CodePen, вы увидите, что при наведении курсора рамка поворачивается, и в результате получается полный круг.

Это тот эффект, который мне нужен, однако я хочу, чтобы это происходило при загрузке страницы.

Так что, как только страница загружается, граница поворачивается один раз, пока мы не получим полный 360-градусный круг.

Я подозреваю, что для этого понадобится @Keyframes, однако до сих пор у меня былоне смотри

Я искал в интернете, пытаясь выяснить это, и мне не повезло.

Любая помощь по этому вопросу будет принята с благодарностью.

Спасибо.

https://codepen.io/naomi-sharif/pen/pxyaRy?editors=1100

button {
  background: none;
  border: 0;
  box-sizing: border-box;
  margin: 1em;
  padding: 1em 2em;
  

  box-shadow: inset 0 0 0 2px $red;
  color: $red;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  vertical-align: middle;

  &::before,
  &::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

// Border spins around element
// ::before holds three borders that appear separately, one at a time
// ::after holds one border that spins around to cover ::before's borders, making their appearance seem smooth

.spin {
  width: 5em;
  height: 5em;
  padding: 0;
  
  &:hover {
    color: $blue;
  }

  &::before,
  &::after {
    top: 0;
    left: 0;
  }

  &::before {
    border: 2px solid transparent; // We're animating border-color again
  }

  &:hover::before {
    border-top-color: $blue; // Show borders
    border-right-color: $blue;
    border-bottom-color: $blue;

    transition:
      border-top-color 0.15s linear, // Stagger border appearances
      border-right-color 0.15s linear 0.10s,
      border-bottom-color 0.15s linear 0.20s;
  }

  &::after {
    border: 0 solid transparent; // Makes border thinner at the edges? I forgot what I was doing
  }

  &:hover::after {
    border-top: 2px solid $blue; // Shows border
    border-left-width: 2px; // Solid edges, invisible borders
    border-right-width: 2px; // Solid edges, invisible borders
    transform: rotate(270deg); // Rotate around circle
    transition:
      transform 0.4s linear 0s,
      border-left-width 0s linear 0.35s; // Solid edge post-rotation
  }
}

.circle {
  border-radius: 100%;
  box-shadow: none;
    
  &::before,
  &::after {
    border-radius: 100%;
  }
}
<section class="buttons">
 <button class="spin circle">1</button>
</section>
...