代码

<!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. c++stack容器介绍

    c++stack(堆栈)是一个容器的改编,它实现了一个先进后出的数据结构(FILO) 使用该容器时需要包含#include<stack>头文件: 定义stack对象的示例代码如下: sta ...

  2. java框架之SpringBoot(8)-嵌入式Servlet容器

    前言 SpringBoot 默认使用的嵌入式 Servlet 容器为 Tomcat,通过依赖关系就可以看到: 问题: 如何定制和修改 Servlet 容器相关配置? SpringBoot 能否支持其它 ...

  3. 极验验证使用-滑动&选字验证码

    准备 SDK下载 首先在极验官网下载好SDK,附上官网链接,点此可直接下载python版zip包. 模块安装 使用该SDK时发现它依赖两个模块,分别是geetest和requests. pip ins ...

  4. 关于容器类型数据的强转一共:str() list() set() tuple() dict() 都可以转换成对应的数据类型 /Number 数据类型的强转一共: int() bool() flaot() complex() 都可以转换成对应的数据类型

    # ###强制转换成字典类型 # 多级容器数据:该类型是容器数据,并且里面的元素还是容器类型数据 # ###二级容器 # 二级列表 listvar = [1,3,4,5,[6,7,8,9]] res ...

  5. spring datasource 使用 proxool

    XmlWebApplicationContext使用的xml配置如下: <?xml version="1.0" encoding="UTF-8"?> ...

  6. 131A

    #include <stdio.h> #include <string.h> #include <stdbool.h> #define MAXSIZE 105 in ...

  7. 这10个Python项目超有趣！

    前言: Python可谓是现在很多人正在学或者想学的一个脚本语言了,提到学习自然就少不了拿项目练手,可是一般的项目根本提不起兴趣嘛,这10个项目可是非常有趣的,不信你看看. [Python 图片转字符 ...

  8. 设置mac笔记本为固定ip

    第一步.点击Mac桌面“系统偏好设置”图标 第二步.在打开的系统偏好设置界面,点击互联网和无线选项中的“网络” 第三步.在网络界面,点击“高级”,进入高级设置.  第四步.在以太网设置界面,在TCP/ ...

  9. python中列表中元素的增删改查

    增: append : 默认添加到列表的最后一个位置 insert : 可以通过下标添加到列表的任意位置 extend: a.extend[b] --将b列表的元素全加入到列表b中 删; remove ...

  10. Substrate 使用

    1.安装 首先安装sdk,按官网教程http://www.cydiasubstrate.com/id/73e45fe5-4525-4de7-ac14-6016652cc1b8/ http://asdk ...