用html做照片墙的教程,HTML5开发项目实战:照片墙(示例代码)
html
图片墙
css3
* {
margin: 0;
padding: 0;
}
body {
background-color: #eeeeee;
}
.container {
width: 960px;
height: 450px;
margin: 60px auto;
position: relative;
}
.pic {
width: 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开发项目实战:照片墙(示例代码)相关推荐
- html5第九章上机1制作照片墙,\ HTML5开发项目实战:照片墙
html 图片墙 css3 * { margin: 0; padding: 0; } body { background-color: #eeeeee; } .container { width: 9 ...
- easyui框架前后端交互_Vue+ElementUI+.netcore前后端分离框架开发项目实战
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 转自:我心依旧.cnblogs.com/-clouds/p/11633786.html 框架 ...
- Android游戏开发项目实战
Android游戏开发项目实战: 手机游戏开发工程师培训教程(Android4.3.Cocos2d-x.Untity2D/3D.跨平台引擎技术) 课程讲师:厉风行 课程分类:游戏开发 适合人群:初级 ...
- 里面使用轮播_小程序ColorUI框架初步使用教程及个人项目实战
小程序ColorUI框架初步使用教程及个人项目实战 最近在写自己的一个微信小程序项目<阿涛技术博客>,目前还在写前端小程序部分,之前我有用过小Weiui,Linui等微信小程序UI框架,在 ...
- python h5开发_从零搭建移动H5开发项目实战
从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代,前端技术无疑统治了大多数用户的交互界面!而在移动为王的今天,NA开发在早期占领了大多数用户的交互界面,后来逐渐的前端H5开发找到了自己的 ...
- 从零搭建移动H5开发项目实战
从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代,前端技术无疑统治了大多数用户的交互界面!而在移动为王的今天,NA开发在早期占领了大多数用户的交互界面,后来逐渐的前端H5开发找到了自己的 ...
- C# Xamarin For Android移动开发项目实战篇
一.课程介绍 在前面阿笨的<C# Xamarin移动开发基础进修篇>课程中,大家已经熟悉和了解了Xamarin移动App开发的基础知识和原理.本次分享课<C# Xamarin移动开发 ...
- 从零玩转HTML5+CSS3项目实战-跟着李南江学编程
从零玩转HTML5+CSS3项目实战-跟着李南江学编程 1.CSS高级应用 1.边框圆角的基本使用 1.1什么是边框圆角:将直角的边框变为圆角的边框 1.2边框圆角的格式:border-radius: ...
- Vue+ElementUI+.netcore前后端分离框架开发项目实战
点击上方 "程序员小乐"关注公众号, 星标或置顶一起成长 每天凌晨00点00分, 第一时间与你相约 每日英文 Smile and stop complaining about th ...
最新文章
- 获取图像的梯度,方向和方向梯度图像
- 解决ubuntu开机进入grub界面的问题
- 悲观锁和乐观锁_乐观锁和悲观锁 以及 乐观锁的一种实现方式-CAS
- 「 活动 」连续 3 天,企业容器应用实战营上海站来啦!
- python报错_python 常见报错
- 使用autossh实现开机创建ssh tunnel的方法以及shell脚本.
- vue使用高德地图画电子围栏_Vue.js 中使用高德地图定位及渲染地图
- 5 html 根据手机转动而转动_最全的全景照片拍摄方法合集,手机也能拍哦
- 路透社:美国打算限制英伟达等与中国人工智能界合作
- mysql数据结合使用_MySQL数据行操作
- 【网络技术题库整理1】局域网技术基础及应用
- iozone使用简介
- vs2012 链接内置数据库 sql express 出现error 26 解决方法
- 《批处理:节省时间,减轻压力的20个小技巧》读书笔记(其实是一篇文章)
- TM Forum的TAM中文架构图
- 基于C++控制台(Windows平台)的一个吃豆人小游戏
- Echarts地图 绘制自定义区域 - geojson.io使用方法
- mybatis源码解析(一)
- Java 多线程面试题及回答
- c语言 10 9-8 7-6… 1循环语句,C语言学习与总结---第五章:循环结构程序设计