类似于 加载条
1. 效果图
2. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3动画-title下划线的拉伸效果</title>
<style type="text/css">
ul,li{list-style: none;}
.sidebar{width: 232px;}
.hometitle {
font-size: 18px;
color: #282828;
font-weight: normal;
margin: 0;
text-transform: uppercase;
padding-bottom: 15px;
margin-bottom: 25px;
position: relative;
}
.hometitle:after {
content: "";
background-color: #282828;
left: 0;
width: 50px;
height: 2px;
bottom: 0;
position: absolute;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.sidebar li:hover ::after {
width: 80px;
}
</style>
</head>
<body>
<ul class="sidebar">
<li class="zhuanti">
<h2 class="hometitle">最新文章</h2>
</li>
<li class="zhuanti">
<h2 class="hometitle">个人分类</h2>
</li>
<li class="zhuanti">
<h2 class="hometitle">热门文章</h2>
</li>
<li class="zhuanti">
<h2 class="hometitle">最新评论</h2>
</li>
<li class="zhuanti">
<h2 class="hometitle">联系我们</h2>
</li>
</ul>
</body>
</html>
以上就是关于“ CSS3动画-title下划线的拉伸效果 ” 的全部内容。
742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
