<!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. SOP、DIP、PLCC、TQFP、PQFP、TSOP、BGA封装解释

    1. SOP封装SOP是英文Small Outline Package的缩写,即小外形封装.SOP封装技术由1968-1969年菲利浦公司开发成功,以后逐渐派生出SOJ(J型引脚小外形封装).TSOP ...

  2. 发布ASP.NET网站时的设置

    在ASP.NET网站开发完成之后,一般都要进行发布,然后再使用. 点击“目标位置”后的按钮可以选择将网站发布到的位置,有“本地.本机IIS.FTP站点.远程网站站点”四个选项. 另外,发布网站时还有四 ...

  3. [iOS微博项目 - 1.2] - 导航栏搜索框

    A.导航栏搜索框 1.需求 在“发现”页面,在顶部导航栏NavigationBar上添加一个搜索框 左端带有“放大镜”图标 github: https://github.com/hellovoidwo ...

  4. MongoDB的安装配置

    1,下载: http://www.mongodb.org/downloads 2.4.5版:http://www.mongodb.org/dr/fastdl.mongodb.org/linux/mon ...

  5. 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 ...

  6. JQuery的Ajax使用Get,Post方法调用C#WebService并返回数据

    本文将介绍jQuery调用基于.NET Framework 3.5的WebService返回JSON数据,另外还要介绍一下用jQuery调用WebService的参数设置及设置不当所出现的问题,还有出 ...

  7. SqlServer刷新所有视图

    CREATE PROCEDURE RefreshAllView AS DECLARE MyCursor CURSOR FOR select Name from dbo.sysobjects where ...

  8. 微设计（www.weidesigner.com）介绍系列文章(一)

    1.1 什么是微设计? 微设计(www.weidesigner.com)是一个专门针对微信公众账号提供营销推广服务而打造的第三方平台.主要功能是针对微信商家公众号提供与众不同的.有针对性的营销推广服务 ...

  9. 一起聊聊 Swift 3.0

    Swift3.0将会给我们带来哪些改变: 1. 稳定二进制接口(ABI) ABI是什么呢?API大家都知道是应用程序接口 API只是提供函数签名 而ABI是系统和语言层面的 如果ABI稳定 意味着以后 ...

  10. WebFormJS注册位置

    1. int height = Request.Browser.ScreenPixelsHeight; int width = Request.Browser.ScreenPixelsWidth; R ...