效果：

代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        /* Index Card Styling */

        *

        {

         margin:0; padding:0;}

    ul#index_cards {

        margin-top:50px;

        text-align:center;

    }

        ul#index_cards li {

            background:url(Images/card_bg.jpg) repeat;

            height:450px;

            width:130px;

            display:block;

            float:left;

            border:1px solid #666;

            padding:25px 10px;

            position:relative;

            -moz-border-radius: 10px;

            -webkit-border-radius: 10px;

            -moz-box-shadow: 2px 2px 10px #000;

            -webkit-box-shadow: 2px 2px 10px #000;

            -moz-transition: all 0.5s ease-in-out; /*动画*/

            -webkit-transition: all 0.5s ease-in-out;

            margin-bottom:70px;

        }

    #card-1 {

        -webkit-transform: rotate(-20deg); /*变形 静态属性*/

        -moz-transform: rotate(-20deg);

        z-index:1;

        left:150px;

        top:40px;

    }

    #card-2 {

        -webkit-transform: rotate(-10deg);

        -moz-transform: rotate(-10deg);

        z-index:2;

        left:70px;

        top:10px;

    }

    #card-3 {

        background-color:#69732B;

        z-index:3;

    }

    #card-4 {

        -webkit-transform: rotate(10deg);

        -moz-transform: rotate(10deg);

        z-index:2;

        right:70px;

        top:10px;

    }

    #card-5 {

        -webkit-transform: rotate(20deg);

        -moz-transform: rotate(20deg);

        z-index:1;

        right:150px;

        top:40px;

    }

    /* Hover States */

    ul#index_cards li:hover {

        z-index:4;

    }

    #card-1:hover {

        -moz-transform: scale(1.1) rotate(-18deg);

            -webkit-transform: scale(1.1) rotate(-18deg);

    }

    #card-2:hover {

        -moz-transform: scale(1.1) rotate(-8deg);

            -webkit-transform: scale(1.1) rotate(-8deg);

    }

    #card-3:hover {

        -moz-transform: scale(1.1) rotate(2deg);

            -webkit-transform: scale(1.1) rotate(2deg);

    }

    #card-4:hover {

        -moz-transform: scale(1.1) rotate(12deg);

            -webkit-transform: scale(1.1) rotate(12deg);

    }

    #card-5:hover {

        -moz-transform: scale(1.1) rotate(22deg);

            -webkit-transform: scale(1.1) rotate(22deg);

    }

    /* Content Styling */

            ul#index_cards li img {

                margin-top:7px;

                background:#eee;

                -moz-border-radius: 5px;

                -webkit-border-radius: 5px;

                -moz-box-shadow: 0px 0px 5px #aaa;

                -webkit-box-shadow: 0px 0px 5px #aaa;

            }

            ul#index_cards li p {

                margin-top:4px;

                text-align:left;

                line-height:28px;

            }

    </style>

</head>

<body>

    <ul id="index_cards">

                    <li id="card-1">

                        <h3>Card 1</h3>

                        <img src="data:images/t9tuqui_trans.png" height="130" width="130" alt="Toucan">

                        <p>Name: Toucan<br>

                        Age: 5<br>

                        Size: 50 cm<br>

                        Weight: 600 g<br>

                        Food: Fruit<br>

                        Toucan lives in southern and central America and loves to fly around</p>

                    </li>

                    <li id="card-2">

                        <h3>Card 2</h3>

                        <img src="data:images/t9foxy_trans.png" height="130" width="130" alt="Fox">

                        <p>Name: Fox<br>

                        Age: 3<br>

                        Size: 70 cm<br>

                        Weight: 5.5 kg<br>

                        Food: Meat<br>

                        Fox lives in the northern hemisphere and loves to play seek and hide</p>

                    </li>

                    <li id="card-3">

                        <h3>Card 3</h3>

                        <img src="data:images/t9dog2_trans.png" height="130" width="130" alt="Dog">

                        <p>Name: Dog<br>

                        Age: 8<br>

                        Size: 120 cm<br>

                        Weight: 10 kg<br>

                        Food: Bones<br>

                        Dog lives in a dog hut and loves to chew shoes, bark and go for walks</p>

                    </li>

                    <li id="card-4">

                        <h3>Card 4</h3>

                        <img src="data:images/t9penguino_trans.png" height="130" width="130" alt="Penguin">

                        <p>Name: Penguin<br>

                        Age: 20<br>

                        Size: 110 cm<br>

                        Weight: 35 kg<br>

                        Food: Fish<br>

                        Penguin lives where it's cold and icy and loves to swim and dive</p>

                       </li>

                    <li id="card-5">

                        <h3>Card 5</h3>

                        <img src="data:images/t9lion_trans.png" height="130" width="130" alt="Lion">

                        <p>Name: Lion<br>

                        Age: 12<br>

                        Size: 190 cm<br>

                        Weight: 180 kg<br>

                        Food: Meat<br>

                        Lions lives in Africa and loves to sleep most of the day and hunt sometimes</p>

                    </li>

                </ul>

</body>

</html>

css3动画4的更多相关文章

  1. css3动画第一式--简单翻滚

    在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...

  2. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  3. 学习CSS3动画（animation）

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  4. 用CSS3动画，让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  5. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  6. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  7. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  8. CSS3动画事件

    CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...

  9. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  10. 简单CSS3动画制作

    本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...

随机推荐

  1. 2013年八月GBin1月刊

    2013年八月GBin1月刊 推荐十款来自极客标签的超棒前端特效[第十二期] 本周,我们带来了极客社区推荐的10款前端特效,仍然是非常有趣的小动态效果的页面生成.喜欢的可以直接将我们的在线调试代码插入 ...

  2. 创业之前 ——Paul Graham 最新博文

    原文:Paul Graham 译者:李智维 /LeanCloudproject师 2014年10月 (这篇文章是我在斯坦福大学举办的Sam Altman创业课堂上的嘉宾演讲稿.本意是写给大学生的,但当 ...

  3. OpenERP ODOO 千分位设置

    转自 :http://www.chinamaker.net/ OpenERP (ODOO)千分位设置在: 设置 > 翻译>语言 1)不同语言可以设置不同的千分位 2)格式选择: Separ ...

  4. mac 查看目前哪些进程占用哪些端口

    lsof -nP  | grep TCP | grep LISTEN lsof -i :TCP

  5. .gnet标准

    1  预祝 .gnet进军w3c!!!成为html5的标准 2  .gnet在进行压缩的时候.图片信息不会丢失 3 .gnet须要csdn.百度搜索.360.腾讯.新浪微博.各种视频软件的支持..! ...

  6. Chrome Dev Editor：一个新的JavaScript和Dart IDE

    在Google IO 2014期间,一位Google工程师带来了Chrome Dev Editor(CDE).该IDE用于创建面向桌面和移动设备的Chrome应用程序和Web应用程序.CDE支持Jav ...

  7. ML：交叉验证Cross-Validation

    PRML中首章绪论的模型选择,提到两个方法: 1.交叉验证(Cross-Validation) 2.赤池信息准则(Akaike Information Criterion),简称:AIC. 交叉验证是 ...

  8. form表单中的id 与name的区别

    以前经常写form表单时,不写id和name,总觉得没有什么用.后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器.原来表单 ...

  9. C#音视频网络流解码：H264视频和ACC音频

    下面两种方式是直接翻译过来的,还有问题,比如指针的使用和值的传入.考虑C#和C++的差异,还是要抱着怀疑的态度去看待,不一定是对的. H264视频解码网络流: using FFmpeg.AutoGen ...

  10. c#中abstract、override、new、virtual、sealed使用

    abstract     修饰类名为抽象类,修饰方法为抽象方法.如果一个类为抽象类,则这个类智能是其他某个类的基类.抽象方法在抽象类中没有函数体.抽象类中的抽象方法是没有方法体的,继承其的子类必须实现 ...