您的位置：首页 > Web前端

web前端零基础练习特效，鼠标移入移出效果

2017-11-12 15:26 736 查看

今天写了一个适用于零基础小白的一个效果，是前端零基础的伙伴可以练习下。

知识点：html标签，css样式（企业样式的活用），html加css布局思维，代码优化。特效原理（class类名活用）。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<meta name="Keywords" content="关键词">
<meta name="Description" content="关键词描述">
<title>鼠标滑过图文特效-future老师</title>

<style>/*CSS层叠样式表化妆师*/
*{margin:0;/*外边距*/padding:0;/*内边距*/}/* *通用选择器所有元素 */
#container{/* #+ID选择器名字 */
width:1315px;/*px 像素单位百分比%*/
height:350px;
/*border:1px solid red;边框 : 大小实线*/
margin:150pxauto;/*auto默认居中*/
}
#container .box1{ /* .+类选择器名字*/
width:250px;
height:350px;
float: left;
margin-right: 20px;

}
#container .box2{
width:250px;
height:350px;
float: left;
margin-right: 20px;/*右边外边距*/
}
#container .box3{
width:490px;
height:350px;
float:left;
margin-right: 20px;
}
#container .box4{
width:250px;
height:350px;
float:left;
}
#container .text{ position:relative;/*相对定位*/overflow:hidden;}
#container .text p{
height:30px;
width:100%;
background:rgba(0,0,0,0.5);/*0*/
line-height:30px;/*行高*/
text-indent:40px;/*字符缩进*/
color:#fff;/*字体颜色*/
position:absolute;/*绝对定位*/
left:0;/*距离左边多少*/
bottom:-30px;/*底部对齐多少*/
}
#container .con .pictxtop{
width:250px;
height:165px;

}
#container .con .pictxtbotom{
width:250px;
height:165px;
margin-top:20px;
}
</style>

</head>
<body>

<divid="container">
<divclass="box1 text">
<imgsrc="images/1.jpg"width="250"height="350"alt="1.jpg"/>
<p>心形</p>
</div>

<divclass="box2 con">
<divclass="pictxtop text">
<imgsrc="images/2.jpg"width="250"height="165"alt="" />
<p>草原</p>
</div>
<divclass="pictxtbotom text">
<imgsrc="images/3.jpg"width="250"height="165"alt="" />
<p>荷花</p>
</div>
</div>
<divclass="box3 text">
<imgsrc="images/4.jpg"width="490"height="350"alt="" />
<p>猫头鹰</p>
</div>
<divclass="box4 con">
<divclass="pictxtop text">
<imgsrc="images/5.png"width="250"height="165"alt="" />
<p>草原</p>
</div>
<divclass="pictxtbotom text">
<imgsrc="images/6.jpg"width="250"height="165"alt="" />
<p>荷花</p>
</div>
</div>
</div>

<scripttype="text/javascript"src="js/jquery-1.11.1.min.js"></script>

<script>
//找元素 $("")
$("#container .text").hover(function(){
$(this).find("p").animate({bottom:"0px"})
},function(){
$(this).find("p").animate({bottom:"-30px"})
});
</script>
</body>
</html>

web前端学习群：575308719，分享源码、视频、企业级案例、最新知识点，欢迎初学者和在进阶中的小伙伴。

关注公众号→‘学习web前端’跟大佬一起学前端！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 前端 class 鼠标

相关文章推荐

新的分享

章节导航