纯CSS3实现常见多种相册效果
本文包含
1.CSS3中2D转换和3D转换的介绍。
2.在相册中的应用实例。
CSS3中的转换效果和动画效果十分强大好用，可以实现一些常见的动态效果。
如此一来，CSS3便可以代替许多jQuery的功能。
先来介绍一下CSS中的转换。
CSS3中转换有2D转换和3D转换之分。
2D转换(简单来说就是让某个元素改变大小和位置):
1.translate()方法
该方法包含两个参数，分别是对应的x轴，y轴偏移的距离(相对于控件的原位置进行移动)。
也可以根据translateX()方法单独设置x轴偏移量，translateY()方法设置Y轴偏移量。
2.rotate()方法
此方法包含一个参数，表示该空间以中心为圆心，顺时针转过的角度。可以为负值，表示逆时针转过的角度。
3.scale()方法
此方法包含两个参数，代表沿X轴和沿Y轴扩大的倍数。
4.skew()方法
skew()方法，该元素会根据X轴和Y轴线参数旋转给定的角度
5.matrix()方法
matrix方法将2D转换的方法合并为一个
matrix 方法有六个参数，包含旋转，缩放，移动和倾斜功能。
3D转换:
3D转换主要有一个方法。
rotateX(),rotateY(),rotateZ()。参数为一个角度值，分别围绕着X,Y,Z轴转相应的角度。
下面多介绍一个过渡属性transition:
transition：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
接下来是一个纯CSS3转换效果做的相册例子
用到多种转换方法
HTML:
<body>
<div class="d_photo">
<div class="sig_photo"><img src="img/pic1.jpg" id="pic1"/></div>
<div class="sig_photo"><img src="img/pic2.jpg" id="pic2"/></div>
<div class="sig_photo"><img src="img/pic3.jpg" id="pic3"/></div>
<div class="sig_photo"><img src="img/pic4.jpg" id="pic4"/></div>
<div class="sig_photo"><img src="img/pic5.jpg" id="pic5"/></div>
<div class="d_photo">
<div class="sig_photo"><img src="img/pic6.jpg" id="pic6"/></div>
<div class="sig_photo"><img src="img/pic7.jpg" id="pic7"/></div>
<div class="sig_photo"><img src="img/pic8.jpg" id="pic8"/></div>
<div class="sig_photo"><img src="img/pic9.jpg" id="pic9"/></div>
<div class="sig_photo"><img src="img/pic10.jpg" id="pic10"/></div>
</div>
</body>
CSS：
body{
width: 100%;
background-image: url("img/bg.jpg") ;
}
.d_photo{
width: 900px;
height: 180px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.sig_photo{
float: left;
width: 150px;
height: 150px;
margin-top: 20px;
margin-left: 20px;
}
img{
width: 150px;
height: 150px;
-moz-transition: width 1s,height 1s,transform 1s;
-webkit-transition: width 1s,height 1s,transform 1s;
}
#pic1{
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
#pic2{
-moz-transform: rotate(-6deg);
-webkit-transform: rotate(-6deg);
}
#pic3{
-moz-transform: rotate(4deg);
-webkit-transform: rotate(4deg);
}
#pic4{
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
}
#pic5{
-moz-transform: rotate(6deg);
-webkit-transform: rotate(-6deg);
}
#pic6{
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
}
#pic7{
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
#pic8{
-moz-transform: rotate(4deg);
-webkit-transform: rotate(4deg);
}
#pic9{
-moz-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
}
#pic10{
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
#pic1:hover{
width: 300px;
height: 350px;
z-index: 10;
-moz-transform: rotate(360deg);
-webkit-transform:rotate(360deg);
}
#pic2:hover{
z-index: 10;
-moz-transform: scale(1.15);
-webkit-transform:scale(1.15);
}
#pic3:hover{
width: 300px;
height: 350px;
z-index: 10;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
#pic4:hover{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
z-index: 10;
}
#pic5:hover{
-moz-transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
z-index: 10;
}
#pic6:hover{
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
z-index: 10;
}
#pic7:hover{
width: 300px;
height: 350px;
-moz-transform: translate(100px,-170px);
-webkit-transform: translate(100px,-170px);
z-index: 10;
}
#pic8:hover{
width: 300px;
height: 350px;
z-index: 10;
-moz-transform: translate(0px,-170px);
-webkit-transform: translate(0px,170px);
}
以上1-8每张图片，每张都是一种常用的转换方法，在此就不截图说明了，有兴趣可以试试。
纯CSS3实现常见多种相册效果的更多相关文章
- 纯CSS3实现的动感菜单效果
1. [代码] 纯CSS3实现的动感菜单效果 <!DOCTYPE html><head><meta http-equiv="Content-Type" ...
- Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果，一款强大的扁平化长投影制造器。
Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...
- 9种纯CSS3人物信息卡片动态展示效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 纯CSS3实现轮播切换效果
使用纯css3实现与轮播器一样的功能. HTML代码: <div class="slide-container"> <input type="radio ...
- 纯Css3手工打造网页图片效果
.rotate-demo { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("http://i ...
- 纯css3代码写无缝滚动效果
主要用到css3中的动画 @keyframes, animation. 布局是外层一个div宽固定,然后overflow hidden 绝对定位,里面的ul 固定定位.通过对ul添加动画来实现效果.具 ...
- 纯css3实现文字间歇滚动效果
场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...
- HTML5 纯CSS3实现正方体旋转3D效果
实现效果: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- 纯CSS3实现GIF图片动画效果
在线演示 本地下载
随机推荐
- Html.raw(转帖)
Razor 在JS中嵌入后台变量 HTML 中定义全局变量 @{int CurrentUserId =ViewBag.CurrentUserId;} JS中取值方式var CurrentUserId ...
- Delete website with command.
1.AppCmd.exe 2.http://www.windowsnetworking.com/articles-tutorials/windows-server-2008/Configuring-I ...
- CodeFirst-Section1之小例子
尽可能做到不说一些晦涩难懂的语言,Follow Me...... 环境:Visual Studio 2013+.Net Framework 4.5 1.什么是Code First? 说白了就是先建好C ...
- FreeCodeCamp：Title Case a Sentence
要求: 确保字符串的每个单词首字母都大写,其余部分小写. 像'the'和'of'这样的连接符同理. 结果: titleCase("I'm a little tea pot") 应该 ...
- java反射机制入门3
Method对象的机制与实现 1.Method对象概述 1)java.lang.reflect.Method类是用于表示类中.接口中方法对象的类. 2)可以操作类中私有,以及公有等全部方法. 2.Me ...
- BZOJ 1827: [Usaco2010 Mar]gather 奶牛大集会( dp + dfs )
选取任意一个点为root , size[ x ] 表示以 x 为根的子树的奶牛数 , dp一次计算出size[ ] && 选 root 为集会地点的不方便程度 . 考虑集会地点由 x ...
- CSS小技巧-图片自动缩放
css的一个重要属性:max-width min-width 示例: <div width="500" height="259"><p> ...
- http://riddle.arthurluk.net walkthrough
MSVFMyU4MCU4MWh0dHAlM0ElMkYlMkZyaWRkbGUuYXJ0aHVybHVrLm5ldCUyRnN0YWdlb25lLnBocCUwRCUwQTIlRTMlODAlODFo ...
- python成长之路15
一:JavaScript: JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的 ...
- read/write拥塞与非拥塞
read/write read函数从打开的设备或文件中读取数据. #include <unistd.h> ssize_t read(int fd, void *buf, size_t co ...