<!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. poj 3026 Borg Maze (BFS + Prim)

    http://poj.org/problem?id=3026 Borg Maze Time Limit:1000MS     Memory Limit:65536KB     64bit IO For ...

  2. [C语言 - 1] C语言数据类型

    基本数据类型: byte short int unsigned int long long long unsigned long float double char char * The size ( ...

  3. POJ 2828 Buy Tickets (线段树 or 树状数组+二分)

    题目链接:http://poj.org/problem?id=2828 题意就是给你n个人,然后每个人按顺序插队,问你最终的顺序是怎么样的. 反过来做就很容易了,从最后一个人开始推,最后一个人位置很容 ...

  4. [转]Freemarker数据类型转换

    转至:http://blog.sina.com.cn/s/blog_667ac0360102eaz8.html // 测试程序 package myTest; import java.io.Buffe ...

  5. MPAndroidChart

    该库的可扩展性强,代码相对规范,最近一次更新有很大改进,如果不喜欢AChartEngine的过于复杂可以考虑在此库的基础上开发自己的图表类. linechart 填充式lineChart 单条线的Li ...

  6. Hadoop on Mac with IntelliJ IDEA - 4 制作jar包

    本文讲述使用IntelliJ IDEA打包Project的过程,即,打jar包. 环境:Mac OS X 10.9.5, IntelliJ IDEA 13.1.4, Hadoop 1.2.1 Hado ...

  7. POJ2142——The Balance

    刚学习的扩展欧几里得算法,刷个水题 求解  线性不定方程 和  模线性方程 求方程 ax+by=c 或 ax≡c (mod b) 的整数解 1.ax+by=gcd(a,b)的一个整数解: <sp ...

  8. iOS开发笔记系列-基础5(分类和协议)

    分类 在Objective-C中,除了通过新建子类的方式来向类添加新方法外,还可以通过分类的方式.分类提供了一种简单的方式,将类的定义模块化到相关方法的组或分类中,它还提供了扩展现有类定义的简便方式, ...

  9. codeforces Gym 100500H A. Potion of Immortality 简单DP

    Problem H. ICPC QuestTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100500/a ...

  10. CSS里的单位

    CSS中预设了16种颜色以及16种颜色的衍生色,这16种颜色是CSS规范推荐的.并且一些主流的浏览器都可以识别.例如以下表所看到的: 十六进制颜色是最经常使用的定义方式.它的基本格式为#RRGGBB, ...