html照片墙实验报告,HTML5开发项目实战:照片墙

html

图片墙

css3

* {

margin: 0;

padding: 0;

}

body {

background-color: #eeeeee;

}

.container {

960px;

height: 450px;

margin: 60px auto;

position: relative;

}

.pic {

160px;

}

.container img:hover {

box-shadow: 15px 15px 20px rgba(50, 50, 50, 0.4);

transform: rotate(0deg) scale(1.20);

-webkit-transform: rotate(0deg) scale(1.20);

z-index: 2;

}

.container img {

padding: 10px 10px 15px;

background: white;

border: 1px solid #ddd;

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);

-webkit-transform: rotate(-5deg);

}

.pic2 {

left: 200px;

top: 0;

transform: rotate(-20deg);

-webkit-transform: rotate(-20deg);

}

.pic3 {

bottom: 200px;

right: 100px;

transform: rotate(5deg);

-webkit-transform: rotate(5deg);

}

.pic4 {

bottom: 200px;

left: 300;

transform: rotate(-10deg);

-webkit-transform: rotate(-10deg);

}

.pic5 {

bottom: 0px;

top: 0;

transform: rotate(-10deg);

-webkit-transform: rotate(-10deg);

}

.pic6 {

left: 0px;

top: 0;

transform: rotate(10deg);

-webkit-transform: rotate(10deg);

}

.pic7 {

left: 850px;

top: 0;

transform: rotate(20deg);

-webkit-transform: rotate(20deg);

}

.pic8 {

left: 0px;

top: 200px;

transform: rotate(20deg);

-webkit-transform: rotate(20deg);

}

.pic9 {

left: 550px;

top: 90;

transform: rotate(15deg);

-webkit-transform: rotate(15deg);

}

图片：

效果：

2017-09-15 18:33:34

html照片墙实验报告,HTML5开发项目实战:照片墙相关推荐

用html做照片墙的教程,HTML5开发项目实战:照片墙(示例代码)
html 图片墙 css3 * { margin: 0; padding: 0; } body { background-color: #eeeeee; } .container { width: 9 ...
html5第九章上机1制作照片墙,\ HTML5开发项目实战:照片墙
html 图片墙 css3 * { margin: 0; padding: 0; } body { background-color: #eeeeee; } .container { width: 9 ...
html照片墙实验报告,HTML5+CSS3实战（二）——照片墙效果
现在的前端做的越来越炫酷了,各种特效让人眼花缭乱. 前几天逛网站的时候,看见有个照片墙的效果不错,就想着自己也做做看. 首先上图: 照片呈不规则的角度摆放,当鼠标放在照片上时,照片会放大: 鼠标离开照 ...
android博学谷实验报告,《Android项目实战-博学谷》我的模块
我的模块界面思路由于此界面只是主界面中的一部分,所以无需创建一个新的 Activity ,只需要在 layout 目录下新建一个布局即可,同理导入图片至 drawable 目录下具体代码如下: ...
C# Xamarin For Android移动开发项目实战篇
一.课程介绍在前面阿笨的<C# Xamarin移动开发基础进修篇>课程中,大家已经熟悉和了解了Xamarin移动App开发的基础知识和原理.本次分享课<C# Xamarin移动开发 ...
从零玩转HTML5+CSS3项目实战-跟着李南江学编程
从零玩转HTML5+CSS3项目实战-跟着李南江学编程 1.CSS高级应用 1.边框圆角的基本使用 1.1什么是边框圆角:将直角的边框变为圆角的边框 1.2边框圆角的格式:border-radius: ...
视频教程-HTML5+CSS3项目实战详解-HTML5/CSS
HTML5+CSS3项目实战详解 13年软件开发经验,设计开发30多个大型软件,涉及政府.银行.电信.能源等大型软件项目. 精通J2EE体系架构,熟练使用Struts.Spring.hibernate ...
Android游戏开发项目实战
Android游戏开发项目实战: 手机游戏开发工程师培训教程(Android4.3.Cocos2d-x.Untity2D/3D.跨平台引擎技术) 课程讲师:厉风行课程分类:游戏开发适合人群:初级 ...
android实现电话功能实验报告,安卓开发实验报告-20210407005833.docx-原创力文档
文档编制序号:[KKIDT-LLE0828-LLETD298-POI08] 文档编制序号:[KKIDT-LLE0828-LLETD298-POI08] 安卓开发实验报告安卓开发实验报告目录页面跳 ...
python h5开发_从零搭建移动H5开发项目实战
从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代,前端技术无疑统治了大多数用户的交互界面!而在移动为王的今天,NA开发在早期占领了大多数用户的交互界面,后来逐渐的前端H5开发找到了自己的 ...

html照片墙实验报告,HTML5开发项目实战:照片墙

html照片墙实验报告,HTML5开发项目实战:照片墙相关推荐

最新文章

热门文章