免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

網站前端制作之鼠標經過按鈕效果二

2023-03-05    分類: 網站建設

接著上次關于頁面布局中,內容模塊里的按鈕,鼠標經過的動畫效果的總結。鼠標經過的按鈕的時候會觸發各種效果,如漸變、放大、旋轉抑或是翻轉等效果。

開始的按鈕樣式,如下圖

鼠標移入最終的效果
動態效果三:
Html

Css
.xbtn1 a{
position: relative;
display: block;
margin: 20px auto;
width: 100%;
height: 50px;
line-height: 50px;
max-width: 150px;
text-align: center;
text-transform: uppercase;
overflow: hidden;
border: 1px solid currentColor;
color: #FFFFFF;
}
.xbtn1 a:after{
content: '';
width: 0;
height: 0;
-webkit-transform: rotate(360deg);
-webkit-transition: 0.5s;
transition: 0.5s;
border-style: solid;
border-width: 0 0 0 0;
border-color: #FFFFFF transparent transparent transparent;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.xbtn1 a:hover:after {
border-width: 330px 330px 0 0;
}
.xbtn1 a:hover{
color: #1b3952;
}
動態效果四:
Html

Css
.xbtn2 a{
position: relative;
display: block;
margin: 20px auto;
width: 100%;
height: 50px;
line-height: 50px;
max-width: 150px;
text-align: center;
text-transform: uppercase;
overflow: hidden;
border: 1px solid currentColor;
}
.xbtn2 a:before{
content: '';
width: 0;
height: 0;
-webkit-transform: rotate(360deg);
-webkit-transition: 0.5s;
transition: 0.5s;
border-style: solid;
border-width: 0 0 0 0;
border-color: transparent transparent transparent #1b3952;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}
.xbtn2 a:after{
content: '';
width: 0;
height: 0;
-webkit-transform: rotate(360deg);
-webkit-transition: 0.5s;
transition: 0.5s;
border-style: solid;
border-width: 0 0 0 0;
border-color: transparent transparent #1b3952 transparent;
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
.xbtn2 a:hover {
color: #FFFFFF;
}
.xbtn2 a:hover:before {
border-width: 150px 0 0 150px;
}
.xbtn2 a:hover:after {
border-width: 0 0 150px 150px;
}

接下來動態效果五,這種動態效果是鼠標移入,出現背景和水波紋的效果,如下圖是最開始的樣式,關于分享的圖標是用切了顏色不一樣的兩張圖標,一張是白色,一張是黑色,黑色圖標是輸入移入之后的效果,圖標的背景變白色,周圍出現的波紋,主要用偽類實現的。
前端效果4
下面是鼠標移入的效果
Html



























前端效果5

前端效果6

前端效果7

下面關于樣式有點多,主要的樣式是關于偽類做的波紋

當前文章:網站前端制作之鼠標經過按鈕效果二
轉載注明:http://m.newbst.com/news/241783.html

成都網站建設公司_創新互聯,為您提供網站設計網站營銷網站排名網站維護定制開發網站設計公司

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

成都網站建設公司