JQuery 网页小卡片动画效果
2019-03-10 本文已影响7人
CondorHero
动画效果展示：
卡片动画.gif
实现思路
- 构建静态页面，一个大盒子放入背景图，包含两个小盒子放入文字。
- 为了动画效果，使用定位。此时注意弹出盒子的高要
overflow:hidden; - 动画效果使用
animate改变top值实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿 PHP 中文网卡片动画</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 217px;
height: 172px;
margin: 100px auto;
position: relative;
box-shadow: 1px 3px 7px #ccc; /*添加盒子阴影 */
border-radius: 10px; /*盒子圆角 */
overflow: hidden;
cursor: pointer; /*悬浮小手*/
}
img {
width: 100%;
height: 124px;
border-radius: 10px;
}
.box h3 {
position: absolute;
font: 14px/23px "MIcrosoft YaHei","SimSun";
color: #07111b;
top: 90px;
background-color: #fff;
width: 217px;
border-radius: 8px;
height: 147px;
padding: 20px 20px;
}
.box h3 span {
padding: 2px;
font-size: 12px;
color: #fff;
background-color: #93999f;
border-radius: 2px;
}
.box p {
position: absolute;
bottom: 0;
color: #ccc;
font-size: 12px;
padding: 0 20px;
line-height: 42px;
}
</style>
</head>
<body>
<a href="http://www.php.cn/">
<div class="box">
<img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt="">
<h3 id ="hid"><span>初级</span>2018 前端入门_HTML5</h3>
<p>43394人在看</p>
</div>
</a>
<script src = "js/jquery-1.12.3.min.js"></script>
<script>
$(".box").mouseenter(function(){
if($("#hid").is(":animated")){
return;
}
$("#hid").animate({"top" : 28});
});
$(".box").mouseleave(function(){
$("#hid").animate({"top" : 90});
});
</script>
</body>
</html>
