您的位置：首页 > Web前端 > HTML5

照片墙

2017-01-19 13:23 323 查看

照片墙：鼠标悬浮事件（旋转+放大）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background: lightgray;
}
#box{
width: 1200px;
height: 450px;
/* margin 有4种*/
/* 一种是一个值的，一种是2个的，3个，4个*/
/* 2个值无论是哪一个值 第一个值都是从上开始的，并且是顺时钟数*/
/* 4上右下左， 3上 左右 下， 2上下 左右， 1*/
margin: 0 auto;
/* 0的时候可以不加px，其他数值都要加px*/
}
img{
width: 200px;
margin: 10px;
border: 5px white solid;
/* 5 5 5 右偏移，下偏移，阴影虚化程度*/
box-shadow: gray 5px 5px 5px;
/* background: white;
padding: 7px;*/
/* transition 过度*/
transition: 1.5s;
}
.pic1{
/* transform 变换 rotate 旋转*/
transform: rotate(-5deg);
}
.pic2{
transform: rotate(30deg);
}
.pic3{
transform: rotate(-11deg);
}
.pic4{
transform: rotate(-2deg);
}
.pic5{
transform: rotate(80deg);
}
.pic6{
transform: rotate(-1deg);
}
.pic7{
transform: rotate(20deg);
}
.pic8{
transform: rotate(-7deg);
}
.pic9{
transform: rotate(14deg);
}
/*当鼠标悬浮到img元素的时候*/
img:hover{
transform: rotate(0deg) scale(1.05);
}
.pic6:hover{
transform: rotate(90deg) scale(1.05);
}
</style>
</head>
<body>
<div id="box">
<!--属性和属性之间有空格-->
<img src="img/1.jpg" class="pic1"/>
&
4000
lt;img src="img/2.jpg" class="pic2"/>
<img src="img/3.jpg" class="pic3"/>
<img src="img/4.jpg" class="pic4"/>
<img src="img/5.jpg" class="pic5"/>
<img src="img/6.jpg" class="pic6"/>
<img src="img/7.jpg" class="pic7"/>
<img src="img/8.jpg" class="pic8"/>
<img src="img/9.jpg" class="pic9"/>
</div>
</body>
</html>

当鼠标悬浮在一张图片上时，图片会自动旋转并放大

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML5

相关文章推荐

新的分享

章节导航