请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5实战 HTML5应用 查看内容

使用css3动画变形元素 制作动态照片墙

2013-11-16 22:15| 发布者: admin| 查看: 3103| 评论: 0|原作者: admin

摘要: 本例给大家介绍一下使用css3动画元素,综合移动、旋转、缩放等控制函数制作动态的照片墙界面。当鼠标移动到照片上时,照片会竖直摆放,并且会有放大效果。 先看效果图: 在这个案例中,用到了css3阴影,透明 ...
本例给大家介绍一下使用css3动画元素,综合移动、旋转、缩放等控制函数制作动态的照片墙界面。当鼠标移动到照片上时,照片会竖直摆放,并且会有放大效果。
先看效果图:
使用css3动画变形元素 制作动态照片墙


在这个案例中,用到了css3阴影,透明效果,变形动画等。因此,先带大家了解一下CSS3 transform 动画变形属性。

transform 动画属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
语法:transform: none|transform-functions;

matrix(n,n,n,n,n,n)        定义 2D 转换,使用六个值的矩阵。        
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)        定义 3D 转换,使用 16 个值的 4x4 矩阵。        
translate(x,y)        定义 2D 转换。        
translate3d(x,y,z)        定义 3D 转换。        
translateX(x)        定义转换,只是用 X 轴的值。
translateY(y)        定义转换,只是用 Y 轴的值。        
translateZ(z)        定义 3D 转换,只是用 Z 轴的值。        
scale(x,y)        定义 2D 缩放转换。        
scale3d(x,y,z)        定义 3D 缩放转换。        
scaleX(x)        通过设置 X 轴的值来定义缩放转换。        
scaleY(y)        通过设置 Y 轴的值来定义缩放转换。        
scaleZ(z)        通过设置 Z 轴的值来定义 3D 缩放转换。        
rotate(angle)        定义 2D 旋转,在参数中规定角度。        
rotate3d(x,y,z,angle)        定义 3D 旋转。        
rotateX(angle)        定义沿着 X 轴的 3D 旋转。        
rotateY(angle)        定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)        定义沿着 Z 轴的 3D 旋转。        
skew(x-angle,y-angle)        定义沿着 X 和 Y 轴的 2D 倾斜转换。        
skewX(angle)        定义沿着 X 轴的 2D 倾斜转换。        
skewY(angle)        定义沿着 Y 轴的 2D 倾斜转换。        
perspective(n)        为 3D 转换元素定义透视视图。        


css3动画照片墙实现代码如下:
界面代码:
  1. <body>
  2. <ul class="polaroids">
  3.     <li> <a href="1" title="相识"> <img src="images/11.jpg" alt="相识" /> </a> </li>
  4.     <li> <a href="2" title="凝视"> <img src="images/22.jpg" alt="凝视" /> </a> </li>
  5.     <li> <a href="3" title="甜睡"> <img src="images/33.jpg" alt="甜睡" /> </a> </li>
  6.     <li> <a href="4" title="逗乐"> <img src="images/44.jpg" alt="逗乐" /> </a> </li>
  7.     <li> <a href="5" title="奔跑"> <img src="images/55.jpg" alt="奔跑" /> </a> </li>
  8.     <li> <a href="6" title="漠视"> <img src="images/66.jpg" alt="漠视" /> </a> </li>
  9.     <li> <a href="7" title="险峰"> <img src="images/image-07.jpg" alt="险峰" /> </a> </li>
  10.     <li> <a href="8" title="胜景"> <img src="images/image-08.jpg" alt="胜景" /> </a> </li>

  11. </ul>
  12. </body>
复制代码


css样式代码:

  1. <style type="text/css">
  2. body { background:#fff url(images/bg3.JPG); }
  3. ul.polaroids li { display: inline; }
  4. ul.polaroids a {
  5.     background: #fff;
  6.     display: inline;
  7.     float: left;
  8.     margin: 0 0 27px 30px;
  9.     width: auto;
  10.     padding: 10px 10px 15px;
  11.     text-align: center;
  12.     font-family: "Marker Felt", sans-serif;
  13.     text-decoration: none;
  14.     color: #333;
  15.     font-size: 18px;
  16.     -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
  17.     -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
  18.     -webkit-transform: rotate(-2deg);
  19.     -webkit-transition: -webkit-transform .15s linear;
  20.     -moz-transform: rotate(-2deg);
  21. }
  22. ul.polaroids img {
  23.     display: block;
  24.     height: 100px;
  25.     margin-bottom: 12px;
  26. }
  27. ul.polaroids a:after { content: attr(title); }
  28. ul.polaroids li:nth-child(even) a {
  29.     -webkit-transform: rotate(5deg);
  30.     -moz-transform: rotate(5deg);
  31. }
  32. ul.polaroids li:nth-child(2n) a {
  33.     position: relative;
  34.     top: -5px;
  35.     -webkit-transform: none;   
  36.     -moz-transform: none;
  37. }
  38. ul.polaroids li:nth-child(3n) a {
  39.     position: relative;
  40.     right: 5px;
  41.     -webkit-transform: rotate(-10deg);   
  42.     -moz-transform: rotate(-10deg);
  43. }
  44. ul.polaroids li:nth-child(4n) a {
  45.     position: relative;
  46.     right: 5px;
  47.     top: 8px;
  48. }
  49. ul.polaroids li:nth-child(5n) a {
  50.     position: relative;
  51.     left: -5px;
  52.     top: 3px;
  53. }
  54. ul.polaroids li a:hover {
  55.     -webkit-transform: scale(1.25);
  56.     -moz-transform: scale(1.25);
  57.     -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
  58.     -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
  59.     position: relative;
  60.     z-index: 5;
  61. }
  62. </style>
复制代码


到此,整个css3照片墙动画就已经实现了,是不是很简单呢?大家可以借助这个案例将css3的
transform动画好好的练习一下。

在线体验地址:http://www.html5star.com/demo/css3/css3-animation-photo-wall






鲜花

握手

雷人

路过

鸡蛋

相关阅读

相关分类

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-11-21 08:55 , Processed in 0.088433 second(s), 30 queries .

返回顶部