純CSS怎么實現按鈕的懸停效果

這篇文章主要為大家展示了純CSS怎么實現按鈕的懸停效果，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學習一下“純CSS怎么實現按鈕的懸停效果”這篇文章吧。

　　代碼解讀

　　定義dom，容器是一個無序列表，包含4個元素，代表4個按鈕：

　　<ul>

　　<li>home</li>

　　<li>products</li>

　　<li>services</li>

　　<li>contact</li>

　　</ul>

　　居中顯示：

　　body{

　　margin:0;

　　height:100vh;

　　display:flex;

　　align-items:center;

　　justify-content:center;

　　background:cornsilk;

　　}

　　去掉列表項前面的符號：

　　ul{

　　padding:0;

　　list-style-type:none;

　　}

　　設置按鈕的邊框和背景的樣式，背景采用漸變色，但漸變的方向依次交替：

　　ulli{

　　box-sizing:border-box;

　　width:15em;

　　height:3em;

　　font-size:20px;

　　border-radius:0.5em;

　　margin:0.5em;

　　box-shadow:001emrgba(0,0,0,0.2);

　　}

　　ulli:nth-child(odd){

　　background:linear-gradient(toright,orange,tomato);

　　}

　　ulli:nth-child(even){

　　background:linear-gradient(toleft,orange,tomato);

　　}

　　設置按鈕上文字的樣式，依次交替居左或居右：

　　ulli{

　　color:white;

　　font-family:sans-serif;

　　text-transform:capitalize;

　　line-height:3em;

　　}

　　ulli:nth-child(odd){

　　text-align:left;

　　padding-left:10%;

　　}

　　ulli:nth-child(even){

　　text-align:right;

　　padding-right:10%;

　　}

　　設置按鈕的透視效果，依次交替向左旋轉和向右旋轉，此時透視的距離是500px，注意perspective()函數和rotateY()函數的順序不能寫反：

　　ulli:nth-child(odd){

　　transform:perspective(500px)rotateY(45deg);

　　}

　　ulli:nth-child(even){

　　transform:perspective(500px)rotateY(-45deg);

　　}

　　為按鈕增加懸停效果，使懸停時的透視距離變短為200px，透視距離越短，旋轉的幅度看起來就越大：

　　ulli:nth-child(odd):hover{

　　transform:perspective(200px)rotateY(45deg);

　　padding-left:5%;

　　}

　　ulli:nth-child(even):hover{

　　transform:perspective(200px)rotateY(-45deg);

　　padding-right:5%;

　　}

　　最后，設置一個緩動時間，使效果轉換變得平滑：

　　ulli{

　　transition:0.3s;

　　cursor:pointer;

　　}

　　大功告成！

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

以上就是關于“純CSS怎么實現按鈕的懸停效果”的內容，如果該文章對您有所幫助并覺得寫得不錯，勞請分享給您的好友一起學習新知識，若想了解更多相關知識內容，請多多關注億速云行業資訊頻道。