代码

<!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语法_注释

    #加需要注释的内容,#号后面的单行注释 #这一段注释 左右各三个注释单引号或者双引号 中间的内容为注释,可以包含多行 '''这一段注释''' """这一段注释" ...

  2. 地图标绘系统V1.0测试版【申明：来源于网络】

    地图标绘系统V1.0测试版[申明:来源于网络] 地址:http://blog.csdn.net/allgis/article/details/39718085

  3. linux安装jdk mysql

    mysql 安装进入到mysql官网 点击archives 选择版本下载tar linux 安装mysql数据库——tar.gz包解压安装法 mysql数据库有多种安装方式,本文只介绍在Linux服务 ...

  4. 20144306《网络对抗》MAL_恶意代码分析

    一.基础问题 1.如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些,用什么方法来监控? 使用Windows自带的schtasks指 ...

  5. SQL[Err] ORA-00933: SQL command not properly ended

    原文链接:https://www.cnblogs.com/godtrue/p/3784526.html 1:可能SQL语句中关键字前后缺少空格 2:Oracle 给表起别名时,直接在表名的后面空格别名 ...

  6. 【UML】-NO.44.EBook.5.UML.1.004-【UML 大战需求分析】- 顺序图（Sequence Diagram）

    1.0.0 Summary Tittle:[UML]-NO.44.EBook.1.UML.1.004-[UML 大战需求分析]- 顺序图(Sequence Diagram) Style:DesignP ...

  7. git 如何删除已经add的文件

    git rm --cached "文件" 参考: https://blog.csdn.net/kiss_the_sky/article/details/77921206

  8. char 类型的操作函数

    1.内存充填 void *memset(void *s,int ch,size_t n); 是由C Run-time Library提供的提供的函数,作用是在一段内存块中填充某个给定的值,它是对较大的 ...

  9. django 2.1 配sql server 2008R2

     请教了不少高手和度娘终于把这个事搞定了(基本上断断续续查试了2周时间),,,,,,,, 环境:  1-Microsoft Windows     2-Microsoft SQL SERVER2008 ...

  10. Porsche Piwis Tester II V14.000 with CF30 Laptop at autonumen.com

    Porsche piwis tester ii is the latest professional tester for Porshe,the most poweful diagnose and o ...