HTML5+CSS3实现图片可倾斜摆放的动画相册效果
先看看效果:其中鼠标悬浮在图片上会有动态效果图
直接上代码:
css文件
@CHARSET "UTF-8";
*{
padding:0px;
margin:0px;
}
div{
font-family:"楷体";
font-size:14px;
color:#666
}
body
{
background-image:url("../img/background.jpg") ;
background-size:cover; } .container{
width:1100px;
height:550px;
margin:60px auto;
position:relative;
}
.container img{
position:absolute;
padding:10px 10px 15px;
background:#fff;
border:1px solid #ddd;
-webkit-transition:1s ;
-moz-transition:1s ;
transition:1s ;
z-index:;
}
.container img:hover{
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
transform:scale(1.1);
-webkit-box-shadow:5px 5px 5px #ddd;
-moz-box-shadow:5px 5px 5px #ddd;
box-shadow:5px 5px 5px #ddd;
z-index:;
cursor:pointer;
}a
.pic1{top:0px;left:400px;-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);transform:rotate(-5deg);}
.pic2{top:0px;left:600px;-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);transform:rotate(-20deg);}
.pic3{bottom:;right:;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);transform:rotate(5deg);}
.pic4{bottom:;left:500px;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}
.pic5{bottom:;left:;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}
.pic6{top:;left:;-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);transform:rotate(10deg);}
.pic7{top:;left:850px;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);transform:rotate(20deg);}
.pic8{bottom:-20px;right:630px;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);transform:rotate(5deg);}
.pic9{top:150px;left:580px;-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);transform:rotate(15deg);}
.pic10{left:180px;top:60px;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);
Index.html文件:
<html>
<head>
<title>CSS3动画相册 图片可倾斜摆放DEMO演示</title>
<meta http-equiv="Content-Type" content="text/html;chatset=utf-8" />
<link href="css/style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<img src="img/mm1.jpg" class="pic1" />
<img src="img/mm2.jpg" class="pic2" />
<img src="img/mm3.jpg" class="pic3" />
<img src="img/mm4.jpg" class="pic4" />
<img src="img/mm5.jpg" class="pic5" />
<img src="img/mm6.jpg" class="pic6" />
<img src="img/mm7.jpg" class="pic7" />
<img src="img/mm8.jpg" class="pic8" />
<img src="img/mm9.jpg" class="pic9" />
<img src="img/mm10.jpg" class="pic10" />
</div>
</body>
</html>
需要注意的一些问题:
CSS3 transition 属性
实例
把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：
div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
定义和用法
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
语法
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
transform: rotate(40deg); /* 其中40是旋转的角度 */
transition: width 2s;产生带有平滑改变width的过渡效果,完成过渡效果需要2秒
HTML5+CSS3实现图片可倾斜摆放的动画相册效果的更多相关文章
- 基于CSS3图片可倾斜摆放的动画相册
今天我们又要来分享一个CSS3动画相册.之前我们分享过一个很酷的放满女神的HTML5/CSS3相册,相册是全屏展示的.今天这款相册的特点是图片可以任意角度的倾斜摆放,就像随意放在桌面上一样.另外,当鼠 ...
- 10款基于HTML5+CSS3实现的超酷源码动画
1.基于Bootstrap的jQuery登录表单 这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图 ...
- 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效
本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...
- css3实现图片划过一束光闪过效果
该效果在京东里的图片有. .img { display:block; position: relative; width:800px; height:450px; margin:0 auto; } . ...
- 推荐一款超级漂亮的HTML5 CSS3的图片轮播器
最近在学习HTML5和CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer. 本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图 ...
- HTML5/CSS3实现图片倒影效果
在线演示 本地下载
- CSS3——制作图片翻页的小动画
觉得还挺有意思的嘻嘻~ 这里有一个问题要注意一下,图片反转过程中可能会遇到一种如下所示的跳变bug: 这玩意一出来吓我一大跳,显然这种用户体验是很不好的,解决方法: 在.pic, .info{...} ...
- 黄聪：css3实现图片划过一束光闪过效果(图片光影掠过效果)
CSS代码 .guangshu { display:block; position: relative; width:800px; height:450px; margin:0 auto;} .gua ...
- jquery和CSS3带倒影的3D万花筒旋转动画特效效果演示
<!DOCTYPE html> <html> <head> <title></title> <meta charset='utf-8' ...
随机推荐
- 函数randint的使用
摘自百科: ANDINT 在MATLAB中用于产生基质的均匀分布的随机整数. 用法: 1.OUT = RANDINT 产生一个“ 0 ”或“ 1 ”等概率 2.OUT = RANDINT(M) 生成的 ...
- Dropbox创造共享新思维——Datastore API
7月9日,第一届Dropbox开发者大会上,Dropbox发布了Datastore API的beta版本,通过这个API,原始的结构化数据可以在多个设备间的Dropbox内同步.CEO Drew Ho ...
- Hadoop学习笔记—2.不怕故障的海量存储：HDFS基础入门
一.HDFS出现的背景 随着社会的进步,需要处理数据量越来越多,在一个操作系统管辖的范围存不下了,那么就分配到更多的操作系统管理的磁盘中,但是却不方便管理和维护—>因此,迫切需要一种系统来管理多 ...
- 【效率】专为Win7系统设计的极简番茄计时器 - MiniPomodoro （附源码）
时光飞逝,一转眼坚持使用番茄工作法已经快3年了!能坚持这么长时间,主要还是得益于它的简单.但是令人纠结的是,这么长时间以来,换了7款不同的番茄计时器,仍然没有找到非常满意的: ■ 机械的噪音太大,会妨 ...
- 几个SQL小知识
写在前面的话:之前做的一个项目,数据库及系统整体构架设计完成之后,和弟兄们经过一段时间的编码,系统如期上线,刚开始运行一切良好,后来随着数据量的急剧膨胀,慢慢出现了很多莫名其妙的问题,经过调试,修改了 ...
- TODO：Golang UDP连接简单测试慎用Deadline
TODO:Golang UDP连接简单测试慎用Deadline UDP 是User Datagram Protocol的简称, 中文名是用户数据报协议,是OSI(Open System Interco ...
- Hystrix框架5--请求缓存和collapser
简介 在Hystrix中有个Request的概念,有一些操作需要在request中进行 缓存 在Hystrix调用服务时,如果只是查询接口,可以使用缓存进行优化,从而跳过真实访问请求. 应用 需要启用 ...
- Chrome开发者工具不完全指南（二、进阶篇）
上篇向大家介绍完了基础功能篇,这次分享的是Chrome开发工具中最有用的面板Sources. Sources面板几乎是我最常用到的Chrome功能面板,也是在我看来决解一般问题的主要功能面板.通常只 ...
- 集群下session共享问题的解决方案.
这一篇博客来讲解下babasport这个项目中使用的Login功能, 当然这里说的只是其中的一些简单的部分, 记录在此 方便以后查阅. 一: 去登录页面首先我们登录需要注意的事项是, 当用户点击登录按 ...
- Sublime Text3 配置 NodeJs 环境
前言 大家都知道,Sublime Text 安装插件一般从 Package Control 中直接安装即可,当我安装 node js 插件时候,直接通过Package Control 安装,虽然插件安 ...