css过渡动画
2018-07-15 本文已影响0人
眼前人_249d
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 50px;
height: 50px;
background-color: yellow;
margin: 20px auto;
transition: all 1s ease;
}
div:hover{
width:800px;
background-color: red;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html>
设置五个 div 的伪类 :hover 让鼠标划过块时块展开
transition 后 all 让所有的过渡动画生效 1s内完成 ease 为过渡效果的运动效果 开始和结束为匀速 中间为快速 如果为 linear 为匀速
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{
width: 535px;
height:290px;
margin:20px auto;
position: relative;
overflow:hidden;
}
.box .son{
width: 535px;
height:290px;
background-color: black;
color:white;
text-align: center;
position: absolute;
top: 290px;
}
.box:hover .son{
top:0px;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/qq.jpg" alt="薛之谦" >
<div class="son"><p>这是薛之谦的照片</p></div>
</div>
</body>
</html>
设置一个父类div 里面用<img>标签导入一张图片，在设置子类div里面添加文字“图片的描述”
父类设置居中 开启相对定位，子类开启绝对定位，用top属性使子类位于父类的下面
给父类设置属性overflow为hidden，使超出父类的区域“一剪没”，再给父类设置伪类:hover作用给子类，top属性上调就可以使正常状态下只有图片，鼠标划过图片时，文字的框上移
