代码

<!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. RFID系统 免费开源代码 开发,分享[申明：来源于网络]

    RFID系统 免费开源代码 开发,分享[申明:来源于网络] 地址:http://www.codeforge.cn/s/0/RFID%E7%B3%BB%E7%BB%9F

  2. MIP是什么

    MIP (Mobile Instant Pages - 移动网页加速器), 是一套应用于移动网页的开放性技术标准.通过提供MIP-HTML规范.MIP-JS运行环境以及MIP-Cache页面缓存系统, ...

  3. oracle&mysql配置

    ===========pom.xml=========== <dependency> <groupId>com.oracle.jdbc</groupId> < ...

  4. Web开发——HTML DOM基础

    文档资料参考: 参考:HTML DOM 参考手册 参考:HTML DOM 教程 目录: 1.HTML DOM (文档对象模型) 2.查找 HTML 元素 2.1 通过 id 查找 HTML 元素 2. ...

  5. 点击图片img提交form表单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. typescript 如何引入jquery

    webpack配置,不需要配置externals,webpack具体配置如下, const webpack = require('webpack'); const path = require('pa ...

  7. 15.1-uC/OS-III资源管理（锁调度器）

    1.大部分独占资源的方法都是创建临界段:1) 关中断方式2) 锁调度器方式3) 信号量方式4) mutex方式 2.独占共享资源的最快和最简单方法是关中断 然而,关/开中断是和CPU相关的操作,其相关 ...

  8. python框架之Flask(6)-flask-sqlalchemy&flask-script&flask-migrate使用

    整合SQLAlchemy 安装 pip3 install flask-sqlalchemy 简单使用 from flask import Flask from flask_sqlalchemy imp ...

  9. align-item 和 align-content的区别

    align-content 和 align-items  : 1:共同点:它们对齐方向为交叉轴 2:不同点:align-content 应用于为 多行   而 align-items:应用于单行.

  10. select，poll，epoll

    1. Epoll 是何方神圣? Epoll 可是当前在 Linux 下开发大规模并发网络程序的热门人选, Epoll 在 Linux2.6 内核中正式引入,和 select 相似,其实都 I/O 多路 ...