如何使這種懸停效果？

-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

如何使這種懸停效果？

回答

相關問題