Question

我正在搜索一些网站，我发现了Ultra-Host Ultra-Host

正如您所看到的，当您悬停按钮时，它们会产生惊人的效果。我不知道如何像这样生效，我知道只是简单的悬停。

Answer 1

您需要使用::after伪元素和transform: skewX()

的组合

小提琴：https://jsfiddle.net/JacobDesight/wuy3usv3/1/

Answer 2

这是他们网站的CSS代码。试试吧。

#background-image: -moz-linear-gradient(0deg, rgb(0, 81, 172) 49%, rgb(0, 156, 255) 100%);
  #background-image: -webkit-linear-gradient(0deg, rgb(0, 81, 172) 49%, rgb(0, 156, 255) 100%);
  #background-image: -ms-linear-gradient(0deg, rgb(0, 81, 172) 49%, rgb(0, 156, 255) 100%);
  background: -moz-linear-gradient(left, rgb(0, 156, 255) 0%, rgb(0, 81, 172) 49%, rgb(0, 156, 255) 100%);
  background: -webkit-linear-gradient(left, rgb(0, 156, 255) 0%, rgb(0, 81, 172) 49%, rgb(0, 156, 255) 100%);
  background: -ms-linear-gradient(left, rgb(0, 156, 255) 0%, rgb(0, 81, 172) 49%, rgb(0, 156, 255) 100%);
  #opacity: 0.80;
  #filter: alpha(opacity=80);
  text-shadow: 0px 0px 5px #00BFFF;
  box-shadow: inset 0px -1px 14px -2px #00FFEA;
  -webkit-box-shadow: inset 0px -1px 14px -2px #00FFEA;
  -moz-box-shadow: inset 0px -1px 14px -2px #00FFEA;
  -o-box-shadow: inset 0px -1px 14px -2px #00FFEA;
  -moz-transform: translateY(-50%) translateX(-50%) rotate(30deg);
  -ms-transform: translateY(-50%) translateX(-50%) rotate(30deg);
  -webkit-transform: translateY(-50%) translateX(-50%) rotate(30deg);
  transform: translateY(-50%) translateX(-50%) rotate(30deg);

如何制作像这样的悬停效果？

2 个答案: