每张照片都有美丽的故事、美好的回忆。家居中的照片墙则帮你展现出这些承载着家庭重要记忆的照片,除了用画框装饰照片挂在墙上外,照片墙还可以演变为手绘照片墙。也经常在网上看到一些关于照片墙的特效案例,决定自己动手试试。

v直接上代码

这篇博客呢就是演示一个照片墙的效果。所以废话不多说,直接上代码然后展示特效。有兴趣的道友可以自己练练手试试。也可以改动改动其中的属性多玩玩,自己测试的时候建议用美女的照片,绝对"乐在其中"。

1.准备材料: 

准备材料就是没什么材料,自己麻溜赶快的去:百度找几张美女的照片来测试即可。

2.html代码: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>照片墙</title>
<link href="Content/index.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<!--美女的照片自己准备,小样的照片百度有 :)-->
<img class="img img1" src="img/1.jpg" />
<img class="img img2" src="img/2.jpg" />
<img class="img img3" src="img/3.jpg" />
<img class="img img4" src="img/4.jpg" />
<img class="img img5" src="img/5.jpg" />
<img class="img img6" src="img/6.jpg" />
<img class="img img7" src="img/7.jpg" />
<img class="img img8" src="img/8.jpg" />
<img class="img img9" src="img/9.jpg" />
</div>
</body>
</html>

3.CSS代码: 

* {
margin:;
padding:;
} body {
background-color:#eee;
} .container {
width:960px;
height:450px;
margin:60px auto;
position:relative;
} .img {
/*宽度可以根据自己选择的照片内容而定*/
width:150px;
} .container img:hover {
box-shadow:15px 15px 20px rgba(50,50,50,0.4);
transform:rotate3d(1,1,1,180deg) scale(1.50);
-webkit-transform:rotate3d(1,1,1,180deg) scale(1.50);
-moz-transform:rotate3d(0deg,0deg,0deg) scale(1.50);
-ms-transform:rotate3d(0deg,0deg,0deg) scale(1.50);
/*本身图片的z-index是1,鼠标经过时候设置成2,那么这张图片就会"上来"*/
z-index:;
} .container img {
/*给照片加一个相框的效果*/
padding: 10px 10px 15px;
background-color: white;
border: 1px solid #ddd;
box-shadow: 2px 2px 3px rgba(50,50,50,0.4);
/*渐出动画效果*/
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
z-index:;
} .img1 {
left:400px;
top:;
/*CSS3属性transform:旋转:rotate,缩放:scale,倾斜:skew */
transform:rotate(-5deg);
/*-webkit代表chrome、safari私有属性*/
-webkit-transform:rotate(-5deg);
/*-moz代表firefox浏览器私有属性*/
-moz-transform:rotate(-5deg);
/*-ms代表IE浏览器私有属性*/
-ms-transform:rotate(-5deg);
} .img2 {
left:600px;
top:;
/*旋转角度可以根据自己的审美观定夺*/
transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
-ms-transform:rotate(-20deg);
} .img3 {
bottom:0px;
right:;
transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-ms-transform:rotate(5deg);
} .img4 {
bottom:400px;
left:300px;
transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
} .img5 {
bottom:0px;
top:;
transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
} .img6 {
left:0px;
top:;
transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-ms-transform:rotate(10deg);
} .img7 {
left:850px;
top:;
transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-moz-transform:rotate(20deg);
-ms-transform:rotate(20deg);
} .img8 {
bottom:-20px;
top:650px;
transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-ms-transform:rotate(5deg);
} .img9 {
left:550px;
top:100px;
transform:rotate(15deg);
-webkit-transform:rotate(15deg);
-moz-transform:rotate(15deg);
-ms-transform:rotate(15deg);
}

css代码的这些注释也是热乎的,大家可以自己看看,可以改动其中的一些属性多玩玩。

4.效果演示: 

5.源码下载: 

v博客总结

其实关于照片墙的效果还可以用css3实现很多酷炫的效果。比如说可以加个定时器的效果,让图片像转动的魔方一样。那估计更炫酷。有兴趣可以自己动手试一试。当然,关于那些酷炫的效果网上一搜一大把,不过若真想感受一下css3的魅力,还是得自己动手捣鼓捣鼓。

作  者:请叫我头头哥

出  处:http://www.cnblogs.com/toutou/

关于作者:专注于基础平台的项目开发。如有问题或建议,请多多赐教!

版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。

特此声明:所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误,共同进步。或者直接私信

声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是作者坚持原创和持续写作的最大动力!

纯css实现照片墙3D效果的更多相关文章

  1. 纯css实现翻书效果

    前言 最近研究了一下css3的3D效果,写了几个demo,写篇博客总结一下实现的经过.PS:如果对transform-origin/perspective/transform-style这些概念还不了 ...

  2. 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...

  3. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

  4. 如何用纯 CSS 创作一个 3D 文字跑马灯特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视 ...

  5. 纯CSS焦点轮播效果-功能可扩展

    个人博客: http://mcchen.club 纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. <!DOCTYPE html> <html> ...

  6. css之纯css实现流程导航效果

    :::tip 使用纯css线上 流程导航效果.     本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip ...

  7. 纯css实现星级评分效果

    效果 效果图如下,纯css实现超酷炫的星级评分动画效果 ​ 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...

  8. 前端每日实战:7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视频是可以交 ...

  9. 纯CSS炫酷3D旋转立方体进度条特效

    在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...

随机推荐

  1. hibernate----1-1-----两表关联属性放在另一个表里面

    package com.ij34.dao; import javax.persistence.*; @Entity @Table(name="Address_inf") publi ...

  2. 关于JAVA堆栈的简单说明

    关于堆栈的说明: 1.栈(stack)与堆(heap)都是Java用来在Ram中存放数据的地方.与C++不同,Java自动管理栈和堆,程序员不能直接地设置栈或堆. 2. 堆栈的优劣势 栈: 优势:存取 ...

  3. python 学习笔记5(深浅拷贝与集合)

    拷贝 我们已经详细了解了变量赋值的过程.对于复杂的数据结构来说,赋值就等于完全共享了资源,一个值的改变会完全被另一个值共享. 然而有的时候,我们偏偏需要将一份数据的原始内容保留一份,再去处理数据,这个 ...

  4. JavaScript对象(Object)

         JavaScript的简单数据类型包括数字.字符串.布尔值.null值和undefined值,其他所有的值都是对象.数字.字符串.布尔值“貌似”对象,因为他们拥有方法,但是他们是不可变的. ...

  5. [转]浅谈php web安全

    原文地址:http://blogread.cn/it/article/6086?f=wb 前言: 首先,笔记不是web安全的专家,所以这不是web安全方面专家级文章,而是学习笔记.细心总结文章,里面有 ...

  6. knockout源码分析之订阅

    一.主类关系图 二.类职责 2.1.observable(普通监控对象类) observable(他其是一个function)的内部实现:1.首先声明一个名为observable的fn(这个可以说是一 ...

  7. Linux下Oracle重启问题

    一.切换成oracle用户 $ su - oracle 注意:不要写成“su oracle ”不然是没办法使用下面的命令的. 如下所示:将会报:command not found的错误 二.使用命令 ...

  8. ie7下<a></a>标签不反应

    view中: <a href="Trading?id=@dr["id"]"> <div class="sy_img_div" ...

  9. putty保持不掉线

    putty连接linux,一会就掉线了,然后再重新输入,比较麻烦. 参考http://www.putty.ws/putty-lianjie这篇文章解决. 如图,30表示每隔30秒putty会发一个空的 ...

  10. DevExtreme官方视频教程分享

    收集在此,希望对使用这个工具的人有帮助 DevExtreme 1 2 3 4 5 6 DevExpress DevExtreme入门视频一:Getting Started DevExpress Dev ...