css变化代码2
css变化代码2
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title></title>
<style type=”text/css”>
/*格式化,居中,内边框为零*/
*{
margin: 0px auto;
padding: 0px;
}
/*格式清除*/
.clear{
clear: both;
}
#wai{
width: 1200px;
height: 600px;
border: 1px solid transparent;
}
#lajin{
width:300px;
height: 260px;
border: 1px solid transparent;
float: left;
margin-left: 90px;
margin-top: 20px;
overflow: hidden;
}
/*过渡时间*/
#lajin img{
transition: 2s;
}
/*鼠标经过时的放大缩小*/
#lajin img:hover{
transform: scale(1.5,1.5);
}
#twod{
width:300px;
height: 260px;
border: 1px solid transparent;
float: left;
margin-left: 60px;
margin-top: 20px;
background-image: url(img/qy2.jpg);
background-size: 100% 100%;
/*过渡所需的时间*/
transition: 2s;
}
/*鼠标经过时的2D旋转180度*/
#twod:hover{
transform: rotate(180deg);
}
#threed{
width:300px;
height: 260px;
border: 1px solid transparent;
float: left;
margin-left: 60px;
margin-top: 20px;
background-image: url(img/qy3.jpg);
background-size: 100% 100%;
transition: 2s;
}
/*鼠标经过时的沿Y旋转180度*/
#threed:hover{
transform: rotateY(180deg);
}
#yinyingyuanjiao{
width:300px;
height: 260px;
border: 1px solid transparent;
float: left;
margin-left: 90px;
margin-top: 20px;
background-image: url(img/qy4.jpg);
background-size: 100% 100%;
transition: 2s;
}
/*鼠标经过时的变圆角
阴影*/
#yinyingyuanjiao:hover{
border-radius: 5px;
box-shadow: -10px 10px 5px slategray;
}
#lvjing{
width:300px;
height: 260px;
border: 1px solid transparent;
float: left;
margin-left: 60px;
margin-top: 20px;
}
#lvjing img{
width: 100%;
height: 100%;
transition: 2s;
}
/*鼠标经过时添加滤镜*/
#lvjing img:hover{
filter: hue-rotate(180deg);
}
#huanbeijing{
width:300px;
height: 260px;
border: 1px solid transparent;
float: left;
margin-left: 60px;
margin-top: 20px;
background-image: url(img/qy1.jpg);
background-size: 100% 100%;
transition: 2s;
}
/*鼠标经过时的更换背景*/
#huanbeijing:hover{
background-image: url(img/qy6.jpg);
background-size: 100% 100%;
}
#lvjing1{
width:300px;
height: 260px;
border: 1px solid transparent;
float: left;
margin-left: 60px;
margin-top: 20px;
}
#lvjing1 img{
width: 100%;
height: 100%;
transition: 2s;
}
/*鼠标经过时添加滤镜*/
#lvjing1 img:hover{
filter: grayscale(100%);
}
#lvjing2{
width:300px;
height: 260px;
border: 1px solid transparent;
float: left;
margin-left: 60px;
margin-top: 20px;
background-image: url(img/qy3.jpg);
background-size: 100% 100%;
transition: 5s;
}
#lvjing2:hover{
background-image: url();
background-color: black;
}
</style>
</head>
<body>
<div id=”wai”>
<div id=”lajin”>
<img src=”img/wangzuxian.jpeg” width=”300px” height=”260px”/>
</div>
<div id=”twod”></div>
<div id=”threed”></div>
<div class=”clear”></div>
<div id=”yinyingyuanjiao”></div>
<div id=”lvjing”>
<img src=”img/qy5.jpg”/>
</div>
<div id=”huanbeijing”></div>
</div>
<div id=”lvjing1″>
<img src=”img/qy5.jpg”/>
</div>
<div id=”lvjing2″>
</div>
</body>
</html>