html+css照片墙

html文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cssz照片墙</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>照片墙</h1>
<div class ="container">
<img class = "pic1 pic" src="img/1.jpg" />
<img class = "pic2 pic" src="img/2.jpg" />
<img class = "pic3 pic" src="img/3.jpg" />
<img class = "pic4 pic" src="img/4.jpg" />
<img class = "pic5 pic" src="img/5.jpg" />
<img class = "pic6 pic" src="img/6.jpg" />
<img class = "pic7 pic" src="img/7.jpg" />
<img class = "pic8 pic" src="img/8.jpg" />
<img class = "pic9 pic" src="img/9.jpg" />
</div>
</body>
</html>

css文件:

h1{text-align:center;}
body{background: #eee;}
.container{
width:960px;
height: 450px;

margin:60px auto;

position: relative;

}
img{
padding:10px 10px 15px 10px;
border: 1px solid #ccc;
background: #fff;
position: absolute;

width:150px;

-webkit-transition:1s;
-moz-transition:1s;
transition: 1s;

}
img:hover{
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transform: rotate(0deg);

-webkit-transform:scale(1.2);
-moz-transform:(1.2);
transform:scale(1.2);
z-index:2;
box-shadow: 10px 10px 15px #ccc;

}

.pic1{
top:2px;
left:10px;
z-index:1;
-webkit-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
transform: rotate(-10deg);
}
.pic2{
top:25px;
left:170px;
z-index:1;
-webkit-transform:rotate(20deg);
-moz-transform:rotate(20deg);
transform: rotate(20deg);
}
.pic3{
top:30px;
left:300px;
z-index:1;
-webkit-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
transform: rotate(-15deg);
}
.pic4{
top:17px;
left:450px;
z-index:1;
-webkit-transform:rotate(8deg);
-moz-transform:rotate(8deg);
transform: rotate(8deg);
}
.pic5{
top:30px;
left:600px;
z-index:1;
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);
transform: rotate(2deg);
}
.pic6{
bottom:40px;
left:50px;
z-index:1;
-webkit-transform:rotate(-7deg);
-moz-transform:rotate(-7deg);
transform: rotate(-7deg);
}
.pic7{
bottom:10px;
left:200px;
z-index:1;
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
transform: rotate(10deg);
}
.pic8{
bottom:10px;
left:350px;
z-index:1;
-webkit-transform:rotate(20deg);
-moz-transform:rotate(20deg);
transform: rotate(20deg);
}
.pic9{
bottom:10px;
left:600px;
z-index:1;
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
transform: rotate(-5deg);
}

时间: 2024-10-07 05:31:44

html+css照片墙的相关文章

CSS照片墙

<!doctype html><html><head><meta charset="utf-8"><title>CSS照片墙</title><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>@charset "utf-8"; bod

照片墙展示

<!doctype html><html><head><meta charset="utf-8"><title>CSS照片墙-jq22.com</title><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>@charset "utf-8&q

CSS制作照片墙

资料来源:慕课网(点击这里) 课程结束后有两个效果: 效果一:CSS制作照片墙(点击这里) 效果二:旋转出现文字效果(点击这里) 实现代码: 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS实现照片墙</title> 6 <style> 7 body{bac

纯css实现照片墙3D效果

每张照片都有美丽的故事.美好的回忆.家居中的照片墙则帮你展现出这些承载着家庭重要记忆的照片,除了用画框装饰照片挂在墙上外,照片墙还可以演变为手绘照片墙.也经常在网上看到一些关于照片墙的特效案例,决定自己动手试试. v直接上代码 这篇博客呢就是演示一个照片墙的效果.所以废话不多说,直接上代码然后展示特效.有兴趣的道友可以自己练练手试试.也可以改动改动其中的属性多玩玩,自己测试的时候建议用美女的照片,绝对"乐在其中". 1.准备材料:  准备材料就是没什么材料,自己麻溜赶快的去:百度找几张

照片墙效果----&gt;能成功运行。js+html+css

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My照片墙</title> <style type="text/css"> *{ padding:0; margin: 0; } li,ul{ list-style: none; } #parent{ margin: 0 au

纯CSS实现3D照片墙

HTML部分: <body> <div class="photo-wrap"> <!-- 舞台 --> <div class="container"> <!-- 容器 --> <div class="img">我是中心</div> <div class="img img01"><img src="images/blo

javascript照片墙效果

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>锤子-直播照片墙拖拽技术-网站开发-网页特效</title> <style type="text/css"> *{margin:0;padding:0;} body{background:#000000;/*背景填充*/overflow:hidden;} #pers

使用css3制作照片墙

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>照片墙</title> <link rel="stylesheet" type="text/css" href="css/photo.css"></head><body&g

CSS 几款比较常用的翻转特效

最近一直在忙着做项目,也没有及时的整理博客,今天项目展示结束了,感觉不尽如意,还是有点小小的失落,毕竟班长在我们组,没拿到第一有点对不住他们,通过这次项目,深深的感受到了团队合作的重要性,我们组三个人的脾气都算是比较好的,但是就算这样,我也曾经气的我的小伙伴一直出去吸烟,回头想想我做的太不对了,做项目的前两天,正好是我跟某人吵架了心情超级不好,所以一直处于神游状态,后面才渐渐进入了正常的工作状态,我其实特别感谢我的小伙伴,即使我语气态度都不好,他们都一直容忍我,希望我们可以一起愉快的度过剩下的四