码迷,mamicode.com
首页 > 其他好文 > 详细

鼠标滑过的动画效果

时间:2021-06-28 18:25:49      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:display   ansi   padding   abs   tom   doc   bottom   title   wrap   

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.boss{
display: block;
width: 228px;
height: 160px;
margin: 100px auto;
color: #fff;
}
.box{
width: 228px;
height: 160px;
background: red;
position: relative;/*相对定位*/
}
.box img{
width: 228px;
height: 160px;
}
.sbox{
width: 228px;
height: 27px;
background: rgba(0,0,0,0.3);
position: absolute;/*绝对定位*/
left: 0;
bottom: 0;
font-size: 12px;
/* display: none; */
opacity: 0;  /*0-1越小越透明*/
transition: 2s;  /*动画时间2s*/
}
.sbox span{
display: block;
width: 20px;
height: 27px;
background: #e3291d;
text-align: center;
line-height: 27px;
float: left;
}
.sbox p{
width: 198px;
height: 27px;
/* background: pink; */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 27px;
float: left;
padding-left: 10px;
}
.box:hover .sbox{
/* display: block; */
opacity: 1;  /*鼠标移到大盒子上,小盒子里透明的东西2s变得不透明*/
/* transition: 2s; */
}
</style>
</head>
<body>
<!--
所有的颜色带透明的写法
rgba() alpha 透明度 取值区间 0-1 值越小就越透明
-->
<!--
给要移动的子元素添加绝对定位,要参照物父元素添加相对定位。
-->
<a href="#" class="boss">
<div class="box">
<img src="img/img1.jpg" >
<div class="sbox">
<span>1</span>
<p>这是一个小盒子,这是一个小盒子这是一个小盒子</p>
</div>
</div>
</a>
</body>
</html>

鼠标滑过的动画效果

标签:display   ansi   padding   abs   tom   doc   bottom   title   wrap   

原文地址:https://www.cnblogs.com/wangyiqun2001/p/14933531.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!