<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
width: 1200px;
height: 100%;
margin: 0 auto;
margin-top: 30px;
}
.content div {
float: left;
margin-right: 5px;
}
.box {
width: 200px;
height: 200px;
background: forestgreen;
/* margin:50px auto;*/
position: relative;
overflow: hidden;
transition: all 0.5s;
opacity: 0.2;
}
.box>img {
width: 100%;
height: 100%;
position: absolute;
left: 100%;
top: 0;
transition: all 1s;
}
.box:hover img {
left: 0;
}
.box:hover {
opacity: 1;
}
.opactiychange {
width: 200px;
height: 200px;
background: darkred;
opacity: 1;
transition: all 1s;
}
.opactiychange:hover {
opacity: 0.5;
}
/*线性效果*/
.line {
width: 200px;
height: 200px;
background: gray;
opacity: 1;
transition: all 1s;
position: relative;
overflow: hidden;
}
.line:hover {
opacity: 0.5;
}
.line>p {
width: 100%;
height: 5px;
background: red;
position: absolute;
left: -100%;
top: 0;
transition: all 1s;
}
.line:hover .changeinfo {
left: 0;
}
/*图片混合效果移入移出*/
.imgchange {
width: 200px;
height: 200px;
background: url(images/bg.jpg);
position: relative;
overflow: hidden;
}
.imgchange>img {
transition: all 1s;
position: absolute;
}
.img1 {
width: 150px;
height: 150px;
left: 20px;
top: 10px;
}
.img2 {
width: 50px;
height: 50px;
top: -50px;
left: 145px;
}
.img3 {
width: 50px;
height: 50px;
top: 100px;
left: 200px;
}
.img4 {
width: 50px;
height: 50px;
top: 200px;
left: 145px;
}
.img5 {
width: 50px;
height: 50px;
top: 200px;
left: 80px;
}
.img6 {
width: 50px;
height: 50px;
top: 200px;
left: 20px;
}
.imgchange:hover .img1 {
margin-top: 20px;
width: 100px;
height: 100px;
}
.imgchange:hover .img2 {
top: 10px;
left: 145px;
}
.imgchange:hover .img3 {
top: 70px;
left: 145px;
transition-delay: 0.1s
}
.imgchange:hover .img4 {
top: 135px;
left: 145px;
transition-delay: 0.2s
}
.imgchange:hover .img5 {
top: 135px;
left: 80px;
transition-delay: 0.3s
}
.imgchange:hover .img6 {
top: 135px;
left: 20px;
transition-delay: 0.4s
}
.scale{
width:200px;
height:200px;
background:red;
overflow: hidden;
}
.fangda{
width:100%;
height:100%;
}
.fangda{
transition: all 0.5s;
}
.fangda:hover{
transform:scale(2);
}
.scale2{
margin-top:10px;
width:200px;
height:200px;
background:red;
overflow: hidden;
}
.fangda2{
width:100%;
height:100%;
transition: all 0.5s;
}
.fangda2:hover{
transform:scale(0.5);
/*margin-right:50px;*/
}
</style>
</head>
<body>
<div class="content">
<h2>页面上常见的css动画效果</h2>
<!--图片划入划出-->
<div class="box">
<p>鼠标划过,图片划入划出</p>
<img src="img/m1.jpg" alt="" />
</div>
<!--透明度变化-->
<div class="opactiychange">
</div>
<!--线变长变短效果-->
<div class="line">
<p class="changeinfo"></p>
</div>
<!--图片出现效果-->
<div class="imgchange">
<img class="img1" src="images/con1-1.jpg" alt="" />
<img class="img2" src="images/con1-2.jpg" alt="" />
<img class="img3" src="images/con1-3.jpg" alt="" />
<img class="img4" src="images/con1-4.jpg" alt="" />
<img class="img5" src="images/con1-5.jpg" alt="" />
<img class="img6" src="images/con1-6.jpg" alt="" />
</div>
<!--图片放大-->
<div class="scale">
<img class="fangda"src="images/con1-1.jpg" alt="" />
</div>
<!--图片缩小-->
<div class="scale2">
<img class="fangda2"src="images/con1-1.jpg" alt="" />
</div>
<p>未完待续。。。。。。</p>
</div>
</body>
</html>