Применение CSS анимаций к квадрату (динамическое изменение размера границы и размера квадрата) - PullRequest
Новая
       27

Применение CSS анимаций к квадрату (динамическое изменение размера границы и размера квадрата)

0 голосов
/ 30 апреля 2020

Снимок экрана прилагается объясняет все о желаемом эффекте. Я думал уменьшить ширину границы с 4px до 3px до 2px, я не хочу применять эффект замедления / облегчения. На данный момент, когда я нахожусь, это выглядит как это . Я хочу изменить это поле с помощью эффекта, показанного на первом снимке экрана.

Для справки я публикую код ниже: 

&__link {
    @include font-text(default, menuitem);
    @include token(font-size, sidenav, default);
    background-image: none;
    text-transform: uppercase;
    padding: 1rem;
    margin: 0;

    &:before {
      position: absolute;
      right: 1.3rem;
      top: 2rem;
      width: 1px;
      content: '';
      background: #fff;
      height: 100%;
      opacity: 0.3;
    }

    &:after {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      content: '';
      width: 10px;
      height: 10px;
      outline: 1px solid #fff;
      top: -1px;
    }

    &:hover {
      @include font-text(default, menuitem);
      @include token(font-size, sidenav, hover);
      font-weight: 600;
      margin: 0;
      padding: 1rem;

      &:after {
        background: white;
        box-shadow: 0 0 10px 1px rgba(255, 255, 255, 1);
      }
    }
  }

&: after представляет код для поля. Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 30 апреля 2020

Попробуйте - вам нужно установить анимацию, bcz вам нужно несколько ситуаций для одного события (зависания)

Заменить эти блоки 

&:after {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  content: '';
  width: 0px;
  height: 0px;
  top: -1px;
  background: white;
  border: 7px solid #fff;
}

&:hover:after {
    animation: sqr .3s linear;
    animation-fill-mode: forwards;
  }


@keyframes sqr {
30%{
border: 5.5px solid #fff;
width: 3px;    height: 3px;    
background: black;
}   
80%{   
border: 4px solid #fff;    
width: 6px;    
height: 6px;    
background: black;
} 
100%{    
border: 3px solid #fff;    
width: 8px;   
height: 8px;    
transform: scale(1.5);    
box-shadow: 0 0 5px 2px #fff;    
background: black;  
}  
}
0 голосов
/ 30 апреля 2020 
<div class="box">
</div>

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 200px;
  width: 200px;
  text-decoration: none;
  background-color: white;
  background-image: linear-gradient(#000, #000);
  border: 1px solid black;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0% 0%;
  transition: .5s;
}
.box:hover {
  background-size: 95% 95%;
}

Не слишком хорошо понял вопрос, но это делает прикрепленную анимацию скриншота

...