首頁 網頁資源RESOURCES CSS
網頁hover互動效果
網頁hover互動效果
2020.12.21
分享一些簡單的hover效果
一、文字系列

1. 文字底線

文字底線是很常見的hover效果,可以使用許多方式呈現
以下舉例

(1) 利用偽元素

範例文字

html語法

<div class="ex">
    範例文字
</div>

css語法

.ex{
    font-size: 2.5rem;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.ex::after{
    content: '';
    width: 0%;
    height: 1px;
    background-color: #000;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all .3s linear;
}
.ex:hover::after{
    width: 100%;
}

(2) 利用另一個DIV當作底線

範例文字

html語法

<div class="ex">
    範例文字
    <div class="ex-line"></div>
</div>

css語法

.ex{
    font-size: 2.5rem;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.ex-line{
    width: 0%;
    height: 1px;
    background-color: #000;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all .3s linear;
}
.ex:hover .ex-line{
    width: 100%;
}

2. 文字顏色

文字顏色也是很常見的hover效果,通常會搭配背景顏色更改使用,不然有些顏色會導致文字難以閱讀
以下舉例

(1) 更改顏色

範例文字

html語法

<div class="ex">
    範例文字
</div>

css語法

.ex{
    font-size: 2.5rem;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transition: all .3s linear;
}
.ex:hover{
    color: #d81616;
}

(2) 利用背景顏色配合文字顏色來凸顯

範例文字

html語法

<div class="ex">
    範例文字
    <div class="ex-line"></div>
</div>

css語法

.ex{
    font-size: 2.5rem;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transition: all .3s linear;
}
.ex:hover .ex-line{
    color: #fff;
    background-color: #000;
}
其他類別