版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/CNZSWYMP/article/details/72783176
纯CSS实现的照片墙效果,鼠标经过图片是图片上浮变大,照片程不同角度倾斜如图:
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一起度过的第一个生日</title>
<link type="text/css" rel="stylesheet" href="../css/zhaopianqiang.css">
<script src="../js/birth.js"></script>
</head>
<body background="../.idea/img/bgpic1.jpg">
<!--创建class或ID以便在CSS中操作-->
<div class="container">
<!--定义两个class以便于对图片的统一处理-->
<img class="pic pic1" src="../.idea/生日会/1.jpg">
<img class="pic pic2" src="../.idea/生日会/2.jpg">
<img class="pic pic3" src="../.idea/生日会/3.jpg">
<img class="pic pic4" src="../.idea/生日会/4.jpg">
<img class="pic5 pic" src="../.idea/生日会/5.jpg">
<img class="pic6 pic" src="../.idea/生日会/6.jpg">
<img class="pic7 pic" src="../.idea/生日会/7.jpg">
<img class="pic8 pic" src="../.idea/生日会/8.jpg">
<img class="pic9 pic" src="../.idea/生日会/9.jpg">
<img class="pic10 pic" src="../.idea/生日会/10.jpg">
</div>
<div class="container">
<img class="pic11 pic" src="../.idea/生日会/11.jpg">
<img class="pic12 pic" src="../.idea/生日会/12.jpg">
<img class="pic13 pic" src="../.idea/生日会/13.jpg">
<img class="pic14 pic" src="../.idea/生日会/14.jpg">
<img class="pic15 pic" src="../.idea/生日会/15.jpg">
<img class="pic16 pic" src="../.idea/生日会/16.jpg">
<img class="pic17 pic" src="../.idea/生日会/17.jpg">
<img class="pic18 pic" src="../.idea/生日会/18.jpg">
<img class="pic19 pic" src="../.idea/生日会/19.jpg">
<img class="pic20 pic" src="../.idea/生日会/10.jpg">
</div>
<!--controls属性实现显现-->
<audio id="audio" src="../mp3/查杰%20-%20何求%20(clip).mp3" >您的浏览器不支持</audio>
<script>
var a=document.getElementById("audio");
//autoplay 属性设置或返回音视频是否在加载后即开始播放
a.autoplay=true;
// loop 属性设置或返回音频/视频是否应该在结束时再次播放。
a.loop=true;
//去掉 controls 属性就可以隐藏
</script>
<!--<embed src="../mp3/查杰%20-%20何求%20(clip).mp3" autostart="true" loop="true" hidden=true ></embed>-->
<!--firefox 不支持embed标签-->
</body>
</html>
CSS部分
*{
margin: 0;
padding: 0;
}
body{
background-color: gray;
}
.container{
width: 960px;
height: 450px;
margin: 30px auto;
position: relative;
}
.pic{
width: 160px;
}
/*给一个鼠标事件*/
.container img:hover{
box-shadow: 15px 15px 20px rgba(50,50,50,0.4);
/*z-index 属性设置元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
z-index: 2;
/*scale实现缩放效果*/
transform: rotate(0deg) scale(1.20);
}
.container img{
padding: 10px 10px 15px;
color: white;
border: 1px solid #dddddd;
/*关于rgba属性:R红色值,G绿色值,B蓝色值,Alpha透明度。色彩空间
CSS 中的颜色有三种定义方式:使用颜色方法(RGB、RGBA、HSL、HSLA),十六进制颜色值和预定义的颜色名称。*/
box-shadow: 2px 2px 3px rgba(50,50,50,0.4);
-webkit-transition: all 0.5s ease-in;
-moz-transition:all 0.5s ease-in ;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
position: absolute;
z-index: 1;
}
.pic1{
left: 400px;
top:0;
transform: rotate(-5deg);
}.pic2{
left: 200px;
top:0;
transform: rotate(-20deg);
}.pic3{
buttom: 100px;
right: 100px;
transform: rotate(-5deg);
}.pic4{
buttom: 0px;
left: 300px;
transform: rotate(-10deg);
}.pic5{
buttom: 0px;
top: 0px;
transform: rotate(20deg);
}.pic6{
left: 0px;
top: 0px;
transform: rotate(10deg);
}.pic7{
left: 850px;
top: 0px;
transform: rotate(20deg);
}.pic8{
buttom: -20px;
top:60px;
transform: rotate(5deg);
}.pic9{
left: 550px;
top:90px;
transform: rotate(15deg);
}
.pic10{
left: 400px;
top:0;
transform: rotate(-5deg);
}.pic11{
left: 200px;
top:0;
transform: rotate(-30deg);
}.pic12{
buttom: 100px;
right: 100px;
transform: rotate(-5deg);
}.pic13{
buttom: 0px;
left: 300px;
transform: rotate(-10deg);
}.pic14{
buttom: 0px;
top: 0px;
transform: rotate(15deg);
}.pic15{
left: 0px;
top: 0px;
transform: rotate(10deg);
}.pic16{
left: 850px;
top: 0px;
transform: rotate(20deg);
}.pic17{
buttom: -20px;
top:50px;
transform: rotate(25deg);
}.pic18{
left: 550px;
top:90px;
transform: rotate(15deg);
}
.pic19{
left: 400px;
top: 0px;
transform: rotate(-20deg);
}.pic20 {
left: 850px;
top: 0px;
transform: rotate(20deg);
}