網頁hover互動效果
2020.12.21
網頁hover互動效果
文字底線: 利用偽元素
這方法適合使用在單行，多行的話只有最下面有底線
展示
滑鼠移動至此查看效果
HTML
<div class="shape-ex1">滑鼠移動至此查看效果</div>
CSS
.shape-ex1{
font-size: 18px;
display: inline-block;
vertical-align: middle;
position: relative;
}
.shape-ex1:after{
content: '';
width: 0%;
height: 1px;
background-color: #000;
position: absolute;
bottom: 0;
left: 0;
transition: all .3s linear;
}
.shape-ex1:hover::after{
width: 100%;
}
文字底線: 利用另一個DIV當作底線
這方法適合使用在單行，多行的話只有最下面有底線
展示
滑鼠移動至此查看效果
HTML
<div class="shape-ex2">
滑鼠移動至此查看效果
<div class="shape-ex2-line" ></div>
</div>
CSS
.shape-ex2{
font-size: 18px;
display: inline-block;
vertical-align: middle;
position: relative;
}
.shape-ex2-line{
width: 0%;
height: 1px;
background-color: #000;
position: absolute;
bottom: 0;
left: 0;
transition: all .3s linear;
}
.shape-ex2:hover .shape-ex2-line{
width: 100%;
}
文字顏色: 更改文字顏色
這方法使用時須注意與背景顏色
展示
滑鼠移動至此查看效果
HTML
<div class="shape-ex3">滑鼠移動至此查看效果</div>
CSS
.shape-ex3{
font-size: 18px;
display: inline-block;
vertical-align: middle;
position: relative;
transition: all .3s linear;
}
.shape-ex3:hover{
color: #d81616;
}
文字顏色: 利用背景顏色配合文字顏色來凸顯
展示
滑鼠移動至此查看效果
HTML
<div class="shape-ex4">滑鼠移動至此查看效果</div>
CSS
.shape-ex4{
font-size: 18px;
display: inline-block;
vertical-align: middle;
position: relative;
transition: all .3s linear;
}
.shape-ex4:hover{
color: #d81616;
}