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";
body {
background:gainsboro;
}
.div_pic {
width:900px;
height:450px;
margin:60px auto;
}
.p {
/*内边距*/
padding:10px 10px 10px;
background:white;
/*背景*/
/*左移,下移,虚化*/
box-shadow:5px 5px 4px rgba(50,50,50,0.5);
width:150px;
/*相对定位*/
position:relative;
}
/*每张图片倾斜角度*/
.p1 {
transform:rotate(-5deg);
}
.p2 {
transform:rotate(9deg);
}
.p3 {
transform:rotate(14deg);
}
.p1 {
transform:rotate(2deg);
}
.p4 {
transform:rotate(-3deg);
}
.p5 {
transform:rotate(8deg);
}
.p6 {
transform:rotate(2deg);
}
.p7 {
transform:rotate(-1deg);
}
.p8 {
transform:rotate(1deg);
}
.p9 {
transform:rotate(-5deg);
}
.div_pic img:hover {
/*旋转角度变回0*/
transform:rotate(0deg) scale(1.5);
z-index:9;
}
</style>
</head>
<body>
<div class="div_pic">
<img class="p p1" src="http://www.jq22.com/img/cs/500x500-1.png">
<img class="p p2" src="http://www.jq22.com/img/cs/500x500-2.png">
<img class="p p3" src="http://www.jq22.com/img/cs/500x500-3.png">
<img class="p p4" src="http://www.jq22.com/img/cs/500x500-4.png">
<img class="p p5" src="http://www.jq22.com/img/cs/500x500-5.png">
<img class="p p6" src="http://www.jq22.com/img/cs/500x500-6.png">
<img class="p p6" src="http://www.jq22.com/img/cs/500x500-7.png">
<img class="p p8" src="http://www.jq22.com/img/cs/500x500-8.png">
<img class="p p9" src="http://www.jq22.com/img/cs/500x500-9.png">
</div><script>
</script>
</body>
</html>
CSS照片墙的更多相关文章
- html+css照片墙
html文件 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF- ...
- 纯CSS照片墙
css中transform参考CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate 效果图:
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 纯css实现照片墙3D效果
每张照片都有美丽的故事.美好的回忆.家居中的照片墙则帮你展现出这些承载着家庭重要记忆的照片,除了用画框装饰照片挂在墙上外,照片墙还可以演变为手绘照片墙.也经常在网上看到一些关于照片墙的特效案例,决定自 ...
- CSS制作照片墙
资料来源:慕课网(点击这里) 课程结束后有两个效果: 效果一:CSS制作照片墙(点击这里) 效果二:旋转出现文字效果(点击这里) 实现代码: <!DOCTYPE html> <htm ...
- 纯CSS实现3D照片墙
HTML部分: <body> <div class="photo-wrap"> <!-- 舞台 --> <div class=" ...
- javascript照片墙效果
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙
前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...
- 原生JS编写的照片墙效果实例演示特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- HDU1124 Factorial
Problem Description The most important part of a GSM network is so called Base Transceiver Station ( ...
- 让你能看懂的 JavaScript 闭包
让你能看懂的 JavaScript 闭包 没有废话,直入主题,先看一段代码: var counter = (function() { var x = 1; return function() { re ...
- C互质个数
C互质个数 Time Limit:1000MS Memory Limit:65536K Total Submit:55 Accepted:27 Description 贝贝.妞妞和康康都长大了,如今 ...
- 【原创】IE8升级到IE11控制台报错的解决方案
公司win7 64位 英文版系统,刚从IE8升级到IE11,在我F12准备调试js的时候,竟然发现控制台报错了!天啦撸,顿时慌了有木有! 网上搜索了半天,解决方案如下: http://www.micr ...
- 【NO.10】Jmeter - 一个完整的录制脚本的过程
上1篇介绍了"使用Jmeter对一个接口地址或者一个页面地址执行N次请求",也就是你自己干了一件从"零"开始的事情. 那么这1篇介绍"如何使用Jmeter录制'访问一个接口地址或者一个页面地址'的脚本 ...
- python---scrapy之MySQL同步存储
假设我们已经能获取到item里定义的字段的数据,接下来就需要保存item的数据到mysql数据库. pipeline用来存储item中的数据,将爬取到的数据进行二次处理 首先,要做的准备的工作,安装M ...
- Spark Streaming 调优指南
SparkStreaming是架构在SparkCore上的一个"应用",SparkStreaming主要由DStreamGraph.Job的生成.数据的接收和导入以及容错四大模块组 ...
- 【转】C++静态库与动态库
C++静态库与动态库 这次分享的宗旨是——让大家学会创建与使用静态库.动态库,知道静态库与动态库的区别,知道使用的时候如何选择.这里不深入介绍静态库.动态库的底层格式,内存布局等,有兴趣的同学,推荐一 ...
- ubuntu14.04 64位安装H3C iNode客户端
环境: OS:ubuntu14.04LTS 64位 iNode: iNode2.40-R0162 for linux(iNode只有32位的,而且是很久以前的版本) 安装方法: 第一种: 检查本机是6 ...
- rtems在mini2440上的移植(ubuntu)
第一步 建立编译环境,rtems的编译环境需要使用newlib的库,所以ubuntu自带的gcc是不可以的,我是参照下面的博客才编译成功的,之前走了好多弯路. http://blog.sina.com ...