<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="images/12.jpeg">
<title>照片墙</title>
<link rel="stylesheet" type="text/css" href="css/1.css">
</head>
<body>
<div id="a">
<div id="b"> </div>
<img src="data:images/11.jpg" alt="123" title="范冰冰" class="z1">
<img src="data:images/1.jpg" alt="123" title="范冰冰" class="z2">
<img src="data:images/3.jpg" alt="123" title="李冰冰" class="z3">
<img src="data:images/4.jpg" alt="123" title="范冰冰" class="z4">

<div id="s"> </div>
<img src="data:images/5.jpg" alt="123" title="范冰冰" class="z5">
<img src="data:images/2.jpg" alt="123" title="范冰冰" class="z6">
<img src="data:images/8.jpg" alt="123" title="范冰冰" class="z7">
<img src="data:images/9.jpg" alt="123" title="赵丽雅" class="z8">

<div id="v"> </div>
<img src="data:images/10.jpg" alt="123" title="范冰冰" class="z9">
<img src="data:images/6.jpg" alt="123" title="范冰冰" class="z10">
<img src="data:images/7.jpg" alt="123" title="范冰冰" class="z11">
<img src="data:images/12.jpg" alt="123" title="范冰冰" class="z12">

</div>

</body>
</html>

body{
background-color:#F6DB6B;
}
#a{
line-height:100px;
margin:100px auto;
padding-top:80px;
border:3px solid #FFFCCC;
width:1300px;
height:2000px;
position:relative;
}
#a img{
background-color:white;
width:150px;
height:auto;
border:2px solid #ccc;
padding:20px;
box-shadow:2px 2px 2px rgba(5,5,5,0.7);
transition:all 0.4s ease-in;
position:absolute;
}
#a img:hover{
box-shadow:20px 20px 20px rgba(5,5,5,0.7);
transform:rotate(30deg) scale(1.2);
z-index:88;
}
#b{
background-color:white;
width:500px;
height:auto;
}
#c{
background-color:white;
width:500px;
height:auto;
}
#v{
background-color:white;
width:500px;
height:auto;
}
.z1{
transform:rotate(0deg);
left:100px;

}
.z2{
transform:rotate(10deg);
left:100px;
}
.z3{
transform:rotate(20deg);
left:100px;
}
.z4{
transform:rotate(30deg);
left:100px;

}
.z5{
transform:rotate(10deg);
left:400px;
}
.z6{
transform:rotate(20deg);
left:400px;
}
.z7{
transform:rotate(30deg);
left:400px;
}
.z8{
transform:rotate(40deg);
left:400px;
}
.z9{
transform:rotate(-20deg);
left:900px;
}
.z10{
transform:rotate(-10deg);
left:900px;
}
.z11{
transform:rotate(0deg);
left:900px;
}
.z12{
transform:rotate(10deg);
left:900px;
}

写css动画的更多相关文章

  1. Css 动画的回调

    在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...

  2. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

  3. css动画结束后 js无法修改translated值 .

    由于项目的需要,俺要做一些页面的转场动画. 即将是移动端,肯定是首先css动画了. 结果确发现,css动画中,如果设置animation-fill-mode: both;在动画结束后无法个性trans ...

  4. 关于CSS动画几点要注意的地方

    关于CSS动画几点要注意的地方 js操作transition无效果 先看这个demo以及stackoverflow的问题 http://jsfiddle.net/ThinkingStiff/QNnnQ ...

  5. 你所不知道的 CSS 动画技巧与细节

    怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...

  6. CSS动画总结与呼吸灯效果

    首先,先介绍一下主要用到的css属性:animation,text-shadow. text-shadow就不再介绍了,上一篇已经详细介绍了用法.这里先介绍一下animation属性. 1.anima ...

  7. 前端性能优化（css动画篇）

    正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章,学到 ...

  8. css动画-animation各个属性详解（转）

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  9. CSS动画原理及硬件加速

    一.图层 图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的<CSS层叠上下文和层叠顺序>,这里我们简单复习一下产生层叠上下文的原因. 1.根层叠上下文 指的是页面根元素 ...

随机推荐

  1. Global.asax.cs介绍

    转载  http://www.cnblogs.com/tech-bird/p/3629585.html ASP.NET的配置文件 Global.asax--全局应用程序文件 Web.config--基 ...

  2. Django 使用原生SQL

    def dictfetchall(cursor): "将游标返回的结果保存到一个字典对象中" desc = cursor.description return [ dict(zip ...

  3. 让sublime text 3默认新建GBK文件

    想让sublime text支持显示或者保存中文,需要安装插件convertToUTF8,具体安装可以问度娘. 安装插件以后,想让保存的html文件支持中文,可以通过ctrl+shift+C来完成.但 ...

  4. linux查看cpu、内存信息

    #查看CPU信息(型号) cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c   # 总核数 = 物理CPU个数 X 每颗物理CPU的核数  # ...

  5. Oracle数据库文件恢复与备份思路

    怎样才能对Oracle数据库进行备份?如何才能对删除的数据再进行恢复?这是困扰着很多人的问题.大家都知道,任何数据库在长期使用过程中,都会存在一定的安全隐患.对于数据库管理员来说不能仅寄希望于计算机操 ...

  6. C语言根据日期取其位于一年中的第几天

    #include <iostream> #include <stdlib.h> using namespace std; bool isLeapYear( int iYear ...

  7. AJAX顺序输出

    转载:http://www.cnblogs.com/niunan/archive/2010/10/13/1849873.html AJAX顺序输出  在安装大多数CMS的时候都会在安装界面上看到这样的 ...

  8. 【灵感】wifi通过wifi发送优惠信息

    1.[灵感]wifi通过wifi发送优惠信息 http://content.businessvalue.com.cn/post/15362.html 2.手机彩票大爆发 http://content. ...

  9. PostgreSQL的 initdb 源代码分析之十三

    继续分析: /* Bootstrap template1 */ bootstrap_template1(); 展开: 我这里读入的文件是:/home/pgsql/project/share/postg ...

  10. 数据字符集mysql主从数据库，分库分表等笔记

    文章结束给大家来个程序员笑话:[M] 1.mysql的目录:在rpm或者yum安装时:/var/lib/mysql  在编译安装时默许目录:/usr/local/mysql 2.用rpm包安装的MyS ...