<!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. log4j中的MDC和NDC

    NDC和MDC NDC(Nested Diagnostic Context)和MDC(Mapped Diagnostic Context)是log4j种非常有用的两个类,它们用于存储应用程序的上下文信 ...

  2. UVA10361 - Automatic Poetry

    “Oh God”, Lara Croft exclaims, “it’s one of these dumb riddles again!” In Tomb Raider XIV, Lara is, ...

  3. Codeforces Round #271 (Div. 2) F. Ant colony (RMQ or 线段树)

    题目链接:http://codeforces.com/contest/474/problem/F 题意简而言之就是问你区间l到r之间有多少个数能整除区间内除了这个数的其他的数,然后区间长度减去数的个数 ...

  4. HDU 3790 最短路径问题 (最短路)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3790 简单的最短路问题,这题听说有重边.我用spfa和dijkstra写了一遍,没判重边,速度都差不多 ...

  5. HDU2066一个人的旅行（dijkstra）

    一开始拿到这个题感觉floyd可能会超,还是写了写,果然1WA+1TLE,之后觉得用dijkstra试试看看S和D会不会比较小,还是1WA+1TLE,最后还是借鉴了别人的做法. 把他的家作为起点,与他 ...

  6. 树莓派加入定时任务实现花生壳定时重启（linux的定时任务）

    由于花生壳在linux下不稳定,联系开机一个星期左右会挂掉,所以要使用定时任务实现每小时刷新一次/启动一次. 使用的是linux下的定时任务crontab去实现. 实现步骤: 1.编辑/etc/cro ...

  7. Spring的ControllerAdvice注解

    @ControllerAdvice,是spring3.2提供的新注解,其实现如下所示: @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUN ...

  8. powershell里添加对git的支持

    在powershell命令行里依次运行 1. (new-object Net.WebClient).DownloadString("http://psget.net/GetPsGet.ps1 ...

  9. java中的定时器

    所有类型的 Java 应用程序一般都需要计划重复执行的任务.企业应用程序需要计划每日的日志或者晚间批处理过程.一个 J2SE或者 J2ME 日历应用程序需要根据用户的约定计划闹铃时间.不过,标准的调度 ...

  10. 哥也能写KMP了——实现strstr()

    经过上次去面试,面试官要求实现strstr(),当场就蒙了.这个题目是模式匹配问题,<算法导论>里列出了几种字符串匹配算法: 朴素算法 |  Rabin-Karp | 有限自动机算法 | ...