过渡动画
<!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>
附录
css文件如下：
*{
margin: 0;
padding: 0;
}
.box1{
width: 960px;
height: 40px;
background-color: #55a8ea;
margin: 50px auto;
position: relative;
}
.box1 ul{
list-style: none;
}
.box1 li{
width: 100px;
height: 40px;
float: left;
}
.box1 a{
display: block;
text-decoration: none;
color: #fff;
text-align: center;
font: 14px 微软雅黑;
padding: 10px;
}
.box1 li:hover{
background-color:#00619f ;
}
.box1 img{
position: absolute;
left: 430px;
top:-10px;
}
.box2{
width: 960px;
height: 269px;
border: 1px solid #cccccc;
margin: 50px auto;
/*position: relative;*/
}
h3{
/*position: absolute;*/
/*left: 35px;*/
/*top:10px;*/
padding: 12.6px 35px;
}
.box3{
width: 920px;
height: 219px;
border-top:1px solid #cccccc ;
margin: 0 20px;
/*position: absolute;*/
/*top:50px;*/
/*left: 20px;*/
/*position: relative;*/
}
.box4{
width: 100px;
border-top:1.5px solid red ;
}
.p1{
float: left;
padding: 20px 14.5px 5px 0;
}
.p2{
float: left;
padding: 20px 14.5px 5px 14.5px;
}
.p3{
padding: 20px 0 5px 14.5px;;
}
.box2 img:hover{
transform: translateY(-5px);
}
/*#p1{*/
/*position: absolute;*/
/*left: 0;*/
/*top:20px;*/
/*}*/
/*#p2{*/
/*position: absolute;*/
/*left: 189px;*/
/*top:20px;*/
/*}*/
/*#p3{*/
/*position: absolute;*/
/*left: 378px;*/
/*top:20px;*/
/*}*/
/*#p4{*/
/*position: absolute;*/
/*left: 567px;*/
/*top:20px;*/
/*}*/
/*#p5{*/
/*position: absolute;*/
/*left: 756px;*/
/*top:20px;*/
/*}*/
/*#p6{*/
/*position: absolute;*/
/*left: 0;*/
/*top:113px;*/
/*}*/
/*#p7{*/
/*position: absolute;*/
/*left: 189px;*/
/*top:113px;*/
/*}*/
/*#p8{*/
/*position: absolute;*/
/*left: 378px;*/
/*top:113px;*/
/*}*/
/*#p9{*/
/*position: absolute;*/
/*left: 567px;*/
/*top:113px;*/
/*}*/
/*#p10{*/
/*position: absolute;*/
/*left: 756px;*/
/*top:113px;*/
/*}*/
html文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/4.css">
</head>
<body>
<div class="box1">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">程序开发</a></li>
<li><a href="#">网络营销</a></li>
<li><a href="#">企业VI</a></li>
<li><a href="#">案例展示</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<img src="image/new.png">
</div>
<div class="box2">
<h3>图片展示</h3>
<div class="box3">
<div class="box4"></div>
<img src="image/goods.jpg" class="p1">
<img src="image/goods.jpg" class="p2">
<img src="image/goods.jpg" class="p2">
<img src="image/goods.jpg" class="p2">
<img src="image/goods.jpg" class="p3">
<img src="image/goods.jpg" class="p1">
<img src="image/goods.jpg" class="p2">
<img src="image/goods.jpg" class="p2">
<img src="image/goods.jpg" class="p2">
<img src="image/goods.jpg" class="p3">
</div>
</div>
</body>
</html>
结果如下：
标题栏二.png
网友评论