前端常用动画（持续更新）
2018-02-03 本文已影响22人
小鳄鱼的大哥哦
默认初始化了一些东西，请酌情考虑
移入下划线
移入下划线
header {
height: 80px;
background: #198eda;
line-height: 68px;
color: #FFFFFF;
font-size: 16px;
}
header a {
/*利用after可以写很多类似的动画*/
position: relative;
margin-right: 20px;
padding: 15px 10px;
color: #fff;
text-decoration: none;
}
header a:after{
position: absolute;
left: 50%;
bottom: 0;
content: '';
background: #fff;
width: 0;
height: 3px;
transition: all .5s;
}
header a:hover:after{
width: 100%;
left: 0;
}
<body>
<header>
<a href="">首页</a>
<a href="">商城</a>
<a href="">下载中心</a>
</header>
</body>
常用滑动门（切换）
滑动切换内容
.title {
position: relative;
background: #fff;
border: 1px solid #E1E1E1;
}
.title span {
display: inline-block;
width: 130px;
text-align: center;
cursor: pointer;
}
.title span.active {
color: #0089e1;
}
.line {
background: #0089e1;
height: 4px;
width: 130px;
position: absolute;
bottom: 0;
left: 0;
transition: all .8s;
}
.lh60 {
line-height: 60px;
}
.bbox {
box-sizing: border-box;
}
.f18 {
font-size: 18px;
}
<body>
<div class="title lh60 bbox">
<span class="f18 active">学校官网</span
><span class="f18">考勤记录</span
><span class="f18">系统通知</span
><span class="f18">学校通知</span
><span class="f18">老师通知</span>
<div class="line"></div>
</div>
<script src="jquery-1.11.0.js"></script>
<script>
$('.title span').click(function() {
$(this).addClass('active').siblings('span').removeClass('active');
var index = $(this).index();
var left = $(this).width() * index + 'px';
$('.line').css('left', left);
//根据不同index进行下方内容展示
});
</script>
</body>
如有新见解或新的特效，请楼下沙发
