Как применить эффект трансформации только для box-shadow - PullRequest
Новая
       54

Как применить эффект трансформации только для box-shadow

0 голосов
/ 17 апреля 2019

Я создаю меню, которое использует псевдо-классы: hover для отображения тени блока.

Вот элемент навигации как обычно и здесь тот же элемент под: hover .

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

.link:hover {
    box-shadow: 0 -0.5em 0 #7ed6df inset;
    transform: skew(-20deg);
}

Как вы можете видеть, перекос работает, но он также искажает текст .link, когда я хочу только наклонить тень блока.

Я попытался создать родительский стиль с @apply, например: 

--link-underline: {
    box-shadow: 0 -0.5em 0 #7ed6df inset;
    transform: skew(-20deg);
}

...

.link:hover {
    @apply --link-underline;
}

но не было никаких изменений, когда я завис над ссылкой, и я поиграл с псевдоэлементом :: after, который добавил тень к невидимому текстовому элементу, но также не смог найти исправления, которое там работало. Буду так благодарен за любой совет. Спасибо!

Ответы [ 3 ]

0 голосов
/ 17 апреля 2019

Вот идея с использованием нескольких фонов: 

.text {
  display:inline-block;
  padding:5px 10px 5px;
  background:
    linear-gradient(-225deg,transparent 10px,lightblue 10px) bottom left /51% 15px,
    linear-gradient(-45deg ,transparent 10px,lightblue 10px) bottom right/51% 15px;
  background-repeat:no-repeat;
  
  
  
/*the below is not relevant, can be removed if hover is not needed*/
  background-size:0 0;
}
.text:hover {
  background-size:51% 15px;
}
<div class="text">some text here</div>
<div class="text">text</div>
<br>
<div class="text">loooooooooooooooooooong text</div>
0 голосов
/ 17 апреля 2019

После того, как я поигрался с псевдоэлементами и другими классами, у меня есть рабочее решение !

Сначала я добавил эти два свойства в свой исходный класс .link, убедившись, что текст стабилизирован: 

display: inline;
position: relative;

Затем я создал псевдоэлемент :: after для своего класса .link: 

.link::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 -0.5em 0 #7ed6df inset;
    transform: skew(-20deg);
    opacity: 0;
}

Этот элемент использует z-индекс под исходным текстом и скрывается с непрозрачностью 0. Тень блока и перекос применяются к элементу this :: after, но поскольку его содержимое пустое, текст не затрагивается. Все, что мне нужно было сделать, это добавить функцию: hover, которая помещает псевдокласс в 1 непрозрачность: 

.link:hover::after {
    opacity: 1;
}

Спасибо за предложения, я хотел использовать для этого тень с тенью, поскольку я тоже пытаюсь анимировать движение смахиванием.

0 голосов
/ 17 апреля 2019

Я попробовал это, и я вроде достиг того, чего вы хотели, но я не уверен, что это лучшее решение, но это работает. Вы можете изменить значение top: 11%;, чтобы настроить положение, если оно меняется в вашем браузере. Надеюсь, это вам как-то поможет. 

hr.underline {
  border: 5px solid #7ed6df;
  transform: skew(-20deg);
  display: none;
}

.hover:hover .underline{
    display: flex;
    width: 5%;
    position: absolute;
    top: 11%;
    z-index: -1;
}
<div class="hover">
  <h3 class="link">Why</h3>
  <hr class="underline">
</div>
...