过渡动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #d86aff;
/*动画方向，时间 运动曲线ease缓慢变化 延迟时间*/
transition: width 500ms ease,height 500ms ease 500ms,
background-color 500ms ease 1000ms,border-radius 500ms 1.5s;
}
.box1:hover{
width: 500px;
height: 400px;
background-color: #cc0000;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
animation动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: #d86aff;
animation: moving 500ms ease 1s 6 alternate;/* 6换成 infinite无穷次 */
}
.box1:hover{
animation-play-state: paused;/*暂停*/
}
@keyframes moving {
from{
width: 100px;
}to{
width: 500px;
}
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
多帧动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: #d86aff;
margin: 50px auto 0;
animation: moving 1s infinite;
}
@keyframes moving {
from{
transform: translateY(0);
transform: translateX(0);
}25%{
transform: translateX(400px);
background-color: #cc0000;
}50%{
transform: translateX(400);
background-color: yellow;
}
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
文字遮罩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
width: 300px;
height: 400px;
margin: 50px auto;
border: 1px solid black;
position: relative;
/*overflow: hidden;*/
}
.pic{
width: 300px;
height: 400px;
background-color: black;
color: #fff;
position: absolute;
left: 300px;
top: 0px;
background-color:rgba(0,0 ,0 ,0.5);
transition: all 500ms ease;
display: none;
}
/* 将box1设置 overflow:hidden */
/*.box1:hover {*/
/*overflow: visible;*/
/*!*top:150px*!*/
/*}*/
.box1:hover .pic{
display: block;
/*top:150px*/
}
</style>
</head>
<body>
<div class="box1">
<img src="image/2.jpg" alt="接盘侠">
<div class="pic">我是接盘侠</div>
</div>
</body>
</html>
