如何使这种悬停效果？

-2

我正在寻找一些网站，我发现超主机Ultra-Host 如何使这种悬停效果？

正如你可以看到，当您悬停按钮，他们惊人的效果。我不知道如何使这个效果，我知道只是简单的悬停。

2017-06-18 Бојан Долић

请阅读[我的网站上的某些内容不起作用。我可以只粘贴一个链接吗？]（http://meta.stackoverflow.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link -to-IT）。当外部资源消失或者固定时，依赖于外部资源被理解的问题变得毫无用处。 **描述**你想要达到的目标，不要链接到已经完成它的其他人。链接到商业页面也会使人们认为你的问题是垃圾邮件。 – Quentin

他们使用_simple hover_扭曲。发布您的代码，我们可以提供帮助。 – LGSon

只是简单的悬停'li { transition：0.3s; } li：hover { background-color：red; }' –

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

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

来源

2017-06-18 21:04:17

我做错了什么。我应用了这个CSS，我的悬停在我的整个网页http://i.imgur.com/gtgnMUS.png –

这是从他们的网站的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);

来源

2017-06-18 21:16:36

如何使这种悬停效果？

回答

相关问题