Блог

Главная - Вопросы по программированию - Анимация CSS для всех клиентских ссылок

Анимация CSS для всех клиентских ссылок

#css #animation #line-breaks #pseudo-element

#css #Анимация #разрывы строк #псевдо-элемент

Вопрос:

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

     body {
        font-size: xx-large;
        font-family: 'Courier New';
        color: white;
        background: black;
    }

    a {
        text-decoration: none;
        position: relative;
    }
    a:visited {
        color: white;
    }

    a::before,
    a::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 50%;
        width: 0;
        border-bottom: 2px solid blue;
        transition: 400ms 200ms;
    }
    a::after {
        left: 50%;
        right: 0;
    }
    a:hover::before,
    a:hover::after {
        width: 50%;
    } 
 <a href="#">This is a test. This line has to be a bit longer to see the effect.</a>

Проблема с этим заключается в его поведении при разрывах строк… Можно ли это исправить? Я уже был бы счастлив, если бы анимация была только на наведенной ClientRect, и как только она будет завершена, все остальные ClientRects будут просто подчеркнуты. Решение только для CSS (если оно есть) будет высоко оценено.

Комментарии:

1. извините, но что вы на самом деле хотите получить?

2. Анимация работает только на первом ClientRect. Я сделал текст ссылки немного длиннее, чтобы вы могли видеть проблему.

3. Нет простого способа сделать это для многострочного текста … единственное, что нужно сделать, это добавить «a { пробел: nowrap; }», если вы уверены, что текст никогда не будет шире контейнера.

4. Хорошо, я не могу этого гарантировать. 🙁

5. Говорит дядя google… попробуйте это: nickymeuleman.netlify.app/blog/css-animated-wrapping-подчеркивание

Ответ №1:

Я мог бы найти решение, изменив пример Ники Мейлмана (спасибо webdev-dan за предоставление этой ссылки):

 body {
  background-color: black;
  font-size: 3rem;
}

a {
  color: blue;
  text-decoration: none;
  background-image: linear-gradient(blue, blue), linear-gradient(blue, blue);
  background-size: 0 2px, 0 2px;
  background-position: 50% 100%, 50% 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms linear, background-position 400ms linear;
  transition-delay: 200ms;
}
a:hover {
  background-size: 50% 2px, 100% 2px;
  background-position: 0 100%, 50% 100%;
}
a:visited {
  color: white;
} 
 <a href="#">Short link test.</a>
<a href="#">This link is a bit longer to see the multiline behaviour.</a>

Надеюсь, это будет полезно и другим. 🙂

Метки: