摘要:本篇文章探讨了HTML5+CSS3从入门到精通之纯CSS3实现图片墙,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
本篇文章探讨了HTML5+CSS3从入门到精通之纯CSS3实现图片墙,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
<
预备知识
DIV+CSS基础
CSS3的transform 和 transition用法
主要是用了transform的rotate/scale
动画过渡的几个参数(transition-property/transition-duration/ transition-timing-function)
CSS3的box-shadow..这里只用到外阴影
值得一提的:更多属性的参数要查询css手册,这里展示只是会用到的;
素材获取
百度自行搜索图片素材,替换下面代码的图片路径即可..
例子中的图片大于400像素小于600像素,其中480X270居多
效果描述
初始化凌乱的图片排序(CSS控制),鼠标悬浮会让图片处于顶层显示,且图片恢复水平展示+放大1.5倍
代码实现
代码内含注释
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3实现照片墙</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>纯CSS3实现照片墙</h1>
<div id="container">
<img src="img/1.jpg" alt="这是一个美眉的图片">
<img src="img/2.jpg" alt="这是一个美眉的图片">
<img src="img/3.jpg" alt="这是一个美眉的图片">
<img src="img/4.jpg" alt="这是一个美眉的图片">
<img src="img/5.jpg" alt="这是一个美眉的图片">
<img src="img/6.jpg" alt="这是一个美眉的图片">
<img src="img/7.jpg" alt="这是一个美眉的图片">
<img src="img/8.jpg" alt="这是一个美眉的图片">
</div>
</body>
</html>
style.css
*
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
/*简易版reset*/
h1
{
text-align: center;
}
/*文字居中*/
#container
{
position: relative;
width: 1200px;
margin: 0 auto;
}
/*块居中*/
#container img
{
position: absolute;
z-index: 1;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: all;
transition-property: all;
border: 5px solid #eee;
box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}
/*
给图片添加一个小阴影(外阴影)及增加边框
这里的transition分开参数来写,方便小伙伴们理解.当然也可以用简写方式:
eg: tansition:all 0.5 ease-out
position在这里的作用是为了偏移图片位置的,,后面可以看到为何
z-index是为了图片堆叠的排放,,这里为1,hover那里为2(效果即为底层图片第一张显示)
*/
#container img:hover
{
z-index: 200;
-webkit-transform: rotate(0deg);
-webkit-transform: scale(1.5);
-ms-transform: rotate(0deg);
-ms-transform: scale(1.5);
transform: rotate(0deg);
transform: scale(1.5);
border: 5px solid #eee;
box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
}
/*
这一块是让图片在hvoer下的图形变换,水平展示及放大1.5倍;
transform也可以简写的:
eg: transform:rotate(90deg) scale(1);
*/
/*下面这些子类都是来定位图片初始位置及旋转角度的*/
.position_pic1
{
top: 100px;
left: 5px;
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
.position_pic2
{
top: 200px;
left: 600px;
-webkit-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
transform: rotate(-12deg);
}
.position_pic3
{
top: 20px;
left: 400px;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.position_pic4
{
top: 400px;
left: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.position_pic5
{
top: 400px;
left: 500px;
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.position_pic6
{
top: 500px;
right: 50px;
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.position_pic7
{
top: 600px;
left: 250px;
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
.position_pic8
{
top: 200px;
right: 600px;
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
transform: rotate(35deg);
}
本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号