<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>使用transform和transition制作CSS3动画</title>

<style>

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */

body { background-color:#deddcd; font:14px/21px Arial,Helvetica,sans-serif; }

h1 { font: bold 65px/60px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; text-shadow: 0px 2px 6px #333; }

h1 small{ font-size: 20px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #000; }

h2 a { display: block; text-decoration: none; margin: 0 0 30px 0; font: italic 45px Georgia, Times, Serif;  text-align: center; color: #bfe1f1; text-shadow: 0px 2px 6px #333; }

h2 a:hover { color: #90bcd0; }

/* COMMON CLASSES */

.break { clear:both; }

/* WRAPPER */

#wrapper { width:960px; margin:40px auto; }

/* CONTENT */

#content { }

#content .info { padding:10px; }

/* MOVIE POSTERS */

#movieposters { list-style:none; margin:100px 0; height:550px; }

#movieposters li { display:inline; float:left;

-webkit-perspective: 500; -webkit-transform-style: preserve-3d;

-webkit-transition-property: perspective; -webkit-transition-duration: 0.5s; }

#movieposters li:hover { -webkit-perspective: 5000; }

#movieposters li img { border:10px solid #fcfafa; -webkit-transform: rotateY(30deg);

-moz-box-shadow:0 3px 10px #888; -webkit-box-shadow:0 3px 10px #888;

-webkit-transition-property: transform; -webkit-transition-duration: 0.5s; }

#movieposters li:hover img { -webkit-transform: rotateY(0deg); }

.movieinfo { border:10px solid #fcfafa; padding:20px; width:200px; height:180px; background-color:#deddcd; margin:-195px 0 0 55px; position:absolute;

-moz-box-shadow:0 20px 40px #888; -webkit-box-shadow:0 20px 40px #888;

-webkit-transform: translateZ(30px) rotateY(30deg);

-webkit-transition-property: transform, box-shadow, margin; -webkit-transition-duration: 0.5s; }

#movieposters li:hover .movieinfo { -webkit-transform: rotateY(0deg); -webkit-box-shadow:0 5px 10px #888; margin:-175px 0 0 30px; }

.movieinfo h3 { color:#7a3f3a; font-variant: small-caps; font-family:Georgia,serif,Times; text-align:center; padding-bottom:15px; }

.movieinfo p { padding-bottom:15px; }

.movieinfo a { background-color:#7a3f3a; padding:5px 10px; color:#eee; text-decoration:none; display:block; width:80px; text-align:center; margin:0 auto;

-moz-border-radius:5px; -webkit-border-radius:5px; }

.movieinfo a:hover, .movieinfo a:focus { background-color:#6a191f; color:#fff; }

</style>





</head>

<body>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<div id="wrapper">

<ul id="movieposters">

<li>

<img src="http://p8.qhimg.com/t01f085962622ed5302.jpg" alt="Iron Man 2" />

<div class="movieinfo">

<h3>Iron Man 2</h3>

<p>With the world now aware of his dual life as the armored superhero Iron Man, billionaire inventor Tony...</p>

<a href="#" title="Iron Man 2">More info</a>

</div>

</li>

<li>

<img src="http://p8.qhimg.com/t01f085962622ed5302.jpg" alt="The Last Airbender" />

<div class="movieinfo">

<h3>The Last Airbender</h3>

<p>The story follows the adventures of Aang, a young successor to a long line of Avatars, who must put his...</p>

<a href="#" title="Iron Man 2">More info</a>

</div>

</li>

<li>

<img src="http://p8.qhimg.com/t01f085962622ed5302.jpg" alt="Tron Legacy" />

<div class="movieinfo">

<h3>Tron Legacy</h3>

<p>Sam Flynn, the tech-savvy 27-year-old son of Kevin Flynn, looks into his father's disappearance and finds...</p>

<a href="#" title="Tron Legacy">More info</a>

</div>

</li>

 </ul>

</div>

</div>

<script type="text/javascript">

var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");

document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F7b1b0a3f92f550c351b60c95bab723a4' type='text/javascript'%3E%3C/script%3E"));

</script>

</body>

</html>

使用transform和transition制作CSS3动画的更多相关文章

  1. CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

  2. CSS3动画变形Animations

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  4. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  5. css3之动画属性transform、transition、animation

    工作当中,会遇到很多有趣的小动画,使用css3代替js会节省工作量,css3一些属性浏览器会出现不兼容,加浏览器的内核前缀 -moz-. -webkit-. -o- 1.transform rotat ...

  6. CSS3中和动画有关的属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个  transform. transition 和 animation.下面来一一说明:        transform     从字面来看transform的释义为 ...

  7. transform animation transition css3动画

    transform 定义   transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 值 应用  如果transform与transition联合起 ...

  8. 利用CSS3制作网页动画

    如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...

  9. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

随机推荐

  1. Grep查看日志的方法【转】

    转自:http://blog.csdn.net/stormkey/article/details/5905204 版权声明 :转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://go ...

  2. Python’s super() considered super!

    如果你没有被Python的super()惊愕过,那么要么是你不了解它的威力,要么就是你不知道如何高效地使用它. 有许多介绍super()的文章,这一篇与其它文章的不同之处在于: 提供了实例 阐述了它的 ...

  3. POCO库中文编程参考指南（1）总览

    POCO库中文编程参考指南(1)总览 作者:柳大·Poechant 博客:Blog.CSDN.net/Poechant 邮箱:zhongchao.ustc#gmail.com (# -> @) ...

  4. pymongo.errors.BulkWriteError错误排解

    在mongodb进行数据库操作的时候触发异常   pymongo Error: pymongo.errors.BulkWriteError: batch op errors occurred 这种问题 ...

  5. HDU 1203 【01背包/小数/概率DP】

    I NEED A OFFER! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tot ...

  6. Lightoj 1348 Aladdin and the Return Journey (树链剖分)（线段树单点修改区间求和）

    Finally the Great Magical Lamp was in Aladdin's hand. Now he wanted to return home. But he didn't wa ...

  7. 分金币 Uva 11300

    题意 给定N个人成环状坐,每个人初始分配Ai的金币,金币总数可以被N整除,每个人可以给左右相邻的人一定数量的金币使得最终每个人的金币数量相同,求转移数量最小的方案所转移的总金币数量. N<=10 ...

  8. windows如何安装python zmq

    百度windows python zmq 安装,真的是佩服百度还能活到今天,搜到的结果是各种yum 安装,各种jmq怎么安装,更有甚者直接整源代码编译,忍无可忍,所以自己写下这一篇自己探索出来的安装方 ...

  9. CocoaPods 错误 target overrides the `OTHER_LDFLAGS`...

    Xcode 升级到 6.0 后,更新 CocoaPods,出现了如下的警告 [!] The `Paopao [Debug]` target overrides the `PODS_ROOT` buil ...

  10. C语言基础之自增自减运算符及注意事项

    1.具体用法 1: int b; 2: int a = 10; 3: // b = 10 + 12; 4: //b = (a++) + (++a); 5: 6: // b = 11 + 11; 7: ...