<!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. 什么是APNs证书？

    转载自 http://dev.xiaomi.com/doc/p=2977/index.html 什么是APNs和APNs证书? APNs(全称为Apple Push Notification Serv ...

  2. UVaLive 6862 Triples (数学+分类讨论)

    题意:给定一个n和m,问你x^j + y^j = z^j 的数量有多少个,其中0 <= x <= y <= z <= m, j = 2, 3, 4, ... n. 析:是一个数 ...

  3. Hibernate查询效率对比

    查询已知表名的实体时推荐使用getHibernateTemplate().executeWithNativeSession() + SQLQuery方式. 以下测试使用JUnit进行,仅查询一次,查询 ...

  4. ORACLE表坏块处理

    1.对于普通表,可以考虑使用事件方式处理 事件10231:设置在全表扫描时忽略损坏的数据块 ALTER SYSTEM SET EVENTS='10231 trace name context fore ...

  5. Minesweeper PC/UVa IDs: 110102/10189, Popularity: A,Success rate: high Level: 1

    #include<cstdio> #include<iostream> #include<string> #include<algorithm> #in ...

  6. PostgreSQL中，如何查表属于哪个数据库

    db1=# \x Expanded display is on. db1=# SELECT * FROM information_schema.tables WHERE table_name='tab ...

  7. jsp页面用el表达式获取枚举的code

    jsp页面用el表达式获取枚举的code <c:set var="D_BUSINESS" value="<%=DeptEnum.D_BUSINESS%> ...

  8. getDefinitionByName与ApplicationDomain.getDefinition

    主swf 定义:MC,被加载swf 定义:MC.MC1 ①父SWF的应用程序域的新建子域 (默认方式)称其为应用程序域的继承 var app:ApplicationDomain=new Applica ...

  9. 中国软件开发project师之痛

    在最近的一次会议上,有高层谈到之前在中国觉得自己做得非常牛,但与美国同行接触后却发现与人家存在非常大的差距,这一点我在外企工作时也有过相同的体会.真正与外国同行接触后才会知道什么是差距,在这篇文章中我 ...

  10. 从零开始学android开发-用Intent启动Activity的方法

    启动另外一个Activity,可以有的方法有用setClass()和Component Name 1. 先说在setClass启动一个Activity的方法吧: Intent intent = new ...