代码

<!DOCTYPE HTML>

<html>

<style type="text/css">

    div {

        border: 1px solid red;

    }

    /*向上淡入*/

    .wrap {

        width: 800px;

        height: 200px;

        position: relative;

    }

    .moveUpBox {

        position: relative;

        width: 683px;

        height: 99px;

        background: url(1.jpg) no-repeat;

        top: 120px;

        animation: moveUp 0.6s ease-out 0.2s both 1;

        -moz-animation: moveUp 0.6s ease-out 0.2s both 1;

        -webkit-animation: moveUp 0.6s ease-out 0.2s both 1;

    }

    /*小图标翻转*/

    .iconRoll {

        width: 40px;

        height: 40px;

        display: block;

        margin: 2px 0;

        background: url(iconRoll.png);

        position: relative;

        cursor: pointer;

    }

    .iconRoll:hover {

        background: url(iconRoll.png) 0px 40px;

        transition: all 0.2s 0s ease-out;

    }

    /*360度旋转*/

    .roll360 a {

        display: block;

        border: 10px solid red;

        position: relative;

    }

    .roll360 a b {

        display: inline-block;

        width: 240px;

        height: 70px;

        background: url(roll360.png) no-repeat;

        background-position: 0 -140px;

        vertical-align: middle;

        -webkit-transition: all 1s;

        -o-transition: all 1s;

        transition: all 1s;

    }

    .roll360 a:hover b {

        opacity: 0;

        filter: alpha(opacity=0);

        -webkit-transform: rotateY(180deg);

        -ms-transform: rotateY(180deg);

        -o-transform: rotateY(180deg);

        transform: rotateY(180deg);

    }

    .roll360 a p {

        position: absolute;

        left: 0;

        top: 0;

        background-color: #fff;

        text-align: left;

        color: #333;

        opacity: 0;

        filter: alpha(opacity=0);

        -webkit-transition: all 1s;

        -o-transition: all 1s;

        transition: all 1s;

        -webkit-transform: rotateY(180deg);

        -ms-transform: rotateY(180deg);

        -o-transform: rotateY(180deg);

        transform: rotateY(180deg);

    }

    .roll360 a:hover p {

        opacity: 1;

        filter: alpha(opacity=100);

        -webkit-transform: rotateY(360deg);

        -ms-transform: rotateY(360deg);

        -o-transform: rotateY(360deg);

        transform: rotateY(360deg);

    }

    .roll360 a span {

        display: table-cell;

        width: 100%;

        height: 60px;

        border: 1px solid red;

        vertical-align: middle;

    }

    /* animate */

    @keyframes moveUp {

        from {

            top: 120px;

            opacity: 0;

            filter: alpha(opacity=0);

        }

        to {

            top: 0px;

            opacity: 1;

            filter: alpha(opacity=100);

        }

    }

    @-webkit-keyframes moveUp {

        from {

            top: 120px;

            opacity: 0;

            filter: alpha(opacity=0);

        }

        to {

            top: 0px;

            opacity: 1;

            filter: alpha(opacity=100);

        }

    }

</style>

<body>

    <div class="wrap">

        <div class="moveUpBox"> xiaoxiaosix </div>

    </div>

    <div class="iconRoll"></div>

    <div class="roll360">

        <a href="">

            <b></b>

            <p> <span>hello</span> </p>

        </a>

    </div>

</body>

</html>

扩展思路：

通过控制 class ，定点播放动画

css3 向上淡入 小图标翻转 360度旋转的更多相关文章

  1. 通过CSS3实现：鼠标悬停图片360度旋转效果

    效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转 鼠标离开图片:图片260度逆时针旋转 只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...

  2. CSS3 transition效果 360度旋转 旋转放大 放大 移动

    效果一:360°旋转 修改rotate(旋转度数) * { transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-o ...

  3. 分享4种CSS3效果(360度旋转、旋转放大、放大、移动)

    转自:http://www.j                     q-school.com/Show.aspx?id=281 本文仅供自己学习而转载,由于效果掩饰地址的转载出现问题,强烈建议去源 ...

  4. CSS3动画（360度旋转、旋转放大、放大、移动）

    Title div { width: 120px; height: 120px; line-height: 120px; margin: 20px; background-color: #5cb85c ...

  5. 使用CSS3制作三角形小图标

    话不多说,直接写代码,希望能够对大家有所帮助! 1.html代码如下: <a href="#" class="usetohover"> <di ...

  6. 4种CSS3效果(360度旋转、旋转放大、放大、移动)

    旋转: * { transition:All .4s ease-in-out; -webkit-transition:All .4s ease-in-out; -moz-transition:All ...

  7. Unity3d NGUI 360度旋转

    [AddComponentMenu("NGUI/Examples/Spin With Mouse")] publicclass SpinWithMouse : MonoBehavi ...

  8. 一款基于css3的散子3D翻转特效

    css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: <body& ...

  9. 利用Canvas实现360度浏览

    前言:最近几个月来到新公司,主要从事移动端方面的开发,有时候也挺忙挺累的,于是就好一段时间没写博客了.其实自己在这几个月里,自己对canvas以及createjs和egret都有了一定程度上的认识与掌 ...

随机推荐

  1. python全栈开发 * 35 知识点汇总 * 180720

    35 socket 一些常用方法 验证客户端信息 添加随机字符串 socketserver模块 一.socket模块中一些常用方法1.send和sendall的区别2.conn.getpeername ...

  2. orange---openresty.

    需要有一个类似于API网关的中间件来做API的管理工作,也就是API的实现方面更多的考虑业务逻辑,安全.性能.监控可以交由网关来做(如下图所示,下图根据Kong官方文档修改) 通过MySQL存储来简单 ...

  3. Java项目引用外部jar包时，使用bat启动

    1.将项目导出为jar包 1)点击项目—>右击—>点击Export—>进入export页面 2)点击JAR file——>Next——>勾选项目——>选择jar包存 ...

  4. centos6多实例安装mysql

    基本环境:setenforce 0service iptables stop yum install cmake libaio-devel ncurses-devel -yyum install gc ...

  5. Linux-003-Resource temporarily unavailable

    Jenkins构建任务向服务器发送war包时提示信息如下所示: 由上述信息可知通过SSH命令连接失败.通过Client连接服务器,提示信息如下: 提示信息说明资源暂时不可用. 原因一般是因为用户或应用 ...

  6. springboot2.0集成shiro出现ShiroDialect报错找不到AbstractTextChildModifierAttrPr

    @Bean public ShiroDialect shiroDialect() { return new ShiroDialect(); } 报错出现找不到org/thymeleaf/process ...

  7. 【English】【托业】【四六级】写译高频词汇

    大家都知道,四六级翻译每次考的话题不可能原句直接重复,但是,在研究了近几年的四六级真题后,我们惊奇地发现: 写译词汇在重复考! 写译词汇在重复考! 写译词汇在重复考! 因此,小编为大家整理了四六级写译 ...

  8. git pull 冲突拉取不到新的代码

    本地文件已经有冲突或者在pull的过程中拉取的文件和本地文件冲突时,拉取不到新的代码,git pull出现报错,如下: 这个时候,如果你有两种选择,如果你需要这些改动,那个你就需要手动解决冲突,然后a ...

  9. es6阮一峰读后感

    不经意间看了你一眼(阮一峰的es6读后感)我自己常用的 字符串篇:ES6 为字符串添加了遍历器接口(详见<Iterator>一章),使得字符串可以被for...of循环遍历.只要有遍历器接 ...

  10. Unity骨骼动画资源解析与优化

    一,背景 最近发现项目的动画文件有点大,不光内存大,而且文件也很大,所以从这2个方面下手处理 二,动画文件大小优化 为了优化动画文件大小,我们可以先分析下文件,Ctrl+D将动画文件从FBX拷贝出来, ...