代码

<!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. httpClient实例--返回响应部分并且转换成对象

    import java.io.ByteArrayOutputStream;import java.io.IOException;import java.io.InputStream;import ja ...

  2. Java 批量下载excel，并对excel赋值，压缩为zip文件（POI版）

    package com.neusoft.nda.servlet; import java.io.File;import java.io.FileInputStream;import java.io.F ...

  3. git 实战

    1.网站手动创建新分支 2.在master下 项目路径下 右键 Git branch here 3.切分支: git fetch git branch -a git branch -r git che ...

  4. Gym 101981I - Magic Potion - [最大流][2018-2019 ACM-ICPC Asia Nanjing Regional Contest Problem I]

    题目链接:http://codeforces.com/gym/101981/attachments There are n heroes and m monsters living in an isl ...

  5. ZOJ 4070 - Function and Function - [签到题][2018 ACM-ICPC Asia Qingdao Regional Problem M]

    题目链接:http://acm.zju.edu.cn/onlinejudge/showContestProblem.do?problemId=5840 Time Limit: 1 Second Mem ...

  6. Java ee第三周作业

    listener: Listener是JavaWeb的三大组件Servlet.Filter.Listener之一 Listener的中文名称为监听器,它是Servlet的监听器,它可以监听客户端的请求 ...

  7. Fiddler （进阶）内置命令与断点

    Fiddler 内置命令与断点 命令 对应请求项 介绍 示例 ? All 问号后边跟一个字符串,可以匹配出包含这个字符串的请求 ?google > Body 大于号后面跟一个数字,可以匹配出请求 ...

  8. Intellij IDEA注册激活破解

    1.2017年适用(2016.3.5到2017.2.4版均生效) 安装IntelliJ IDEA 最新版 启动IntelliJ IDEA 输入 license时,选择输入 [License serve ...

  9. random函数的使用

    random作为随机函数用处很多,在Python里面也经常使用,特别是处理一些随机事件的时候,特别好用! 废话不多说,直接看下面的例子: random.randomrandom.random()   ...

  10. java求最大公约数，和最小公倍数

    import java.util.Scanner; public class Test { public static void main(String[] args) { Scanner sc = ...