在w3cschool上面查阅css3的动画语法手册时，发现“css3 动画”栏目首页放了一个翻滚的div动画案例，觉得挺好看的，于是就自己模仿着写了一下，感觉还行O(∩_∩)O哈哈~

查看原地址

下面放代码：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="UTF-8">

<title>test</title>

<style>

.box {

    position: relative;

    margin-top: 50px;

    height: 60px;

}

.test {

    position: absolute;

    top: 0;

    left: 0;

    width: 100px;

    height: 50px;

    font:14px/50px Microsoft YaHei;

    text-align: center;

    color: #fff;

    border-radius: 5px;

    background-color: #eb5C7e;

    -webkit-animation-name: gogogo;

    -webkit-animation-duration: 6s;

    -webkit-animation-timing-function:ease;

    -webkit-animation-iteration-count: infinite;

    animation-name: gogogo;

    animation-duration: 6s;

    animation-timing-function:ease;

    animation-iteration-count: infinite;

}

@-webkit-keyframes gogogo

{

    0% {

        background-color: #eb5C7e;

        -webkit-transform: rotate(0);

    }

    10% {

        background-color: #eb5C7e;

        -webkit-transform: rotate(0);

    }

    30%{

        background-color: #1b9e55;

        left: 0;

        -webkit-transform: rotate(30deg);

    }

    50%{

        left: 400px;

        background-color: #2a7df8;

        -webkit-transform: rotate(0);

    }

    70%{

        left: 400px;

        background-color: #2a7df8;

        -webkit-transform: rotate(0);

    }

    100%{

        left:0;

        background-color: #eb5C7e;

        -webkit-transform: rotate(-360deg);

    }

}

@keyframes gogogo

{

    0% {

        background-color: #eb5C7e;

        transform: rotate(0);

    }

    10% {

        background-color: #eb5C7e;

        transform: rotate(0);

    }

    30%{

        background-color: #1b9e55;

        left: 0;

        transform: rotate(30deg);

    }

    50%{

        left: 400px;

        background-color: #2a7df8;

        transform: rotate(0);

    }

    70%{

        left: 400px;

        background-color: #2a7df8;

        transform: rotate(0);

    }

    100%{

        left:0;

        background-color: #eb5C7e;

        transform: rotate(-360deg);

    }

}

</style>

</head>

<body>

    <div class="box">

        <div class="test">

            翻滚吧

        </div>

    </div>

</body>

</html>

然后，你可能看不到效果？少年，该升级浏览器啦~~~

css3动画第一式--简单翻滚的更多相关文章

  1. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  2. css3动画的简单学习

    transform常用的属性(2D变化): translate(x,y) 定义 2D 转换. scale(x,y) 定义 2D 缩放转换 rotate(angle) 定义 2D 旋转,在参数中规定角度 ...

  3. 原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用滚动监测

    预览链接:http://www.vanwee.cn/%E6%BB%9A%E5%8A%A8%E7%9B%91%E5%90%AC/ <style> body{overflow-x: hidde ...

  4. 代码：　CSS3动画，简单示例（鼠标移上去后，背景图片旋转）

    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.mi ...

  5. css3动画简单应用

    CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.CSS3动画的属性主要分为三类:transform.transition以及anim ...

  6. Css3动画效果,彩色文字效果,超简单的loveHeart

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...

  7. 简单CSS3动画制作

    本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...

  8. SASS使用CSS3动画并使动画暂停和停止在最后一帧的简单例子

    今天在手机上试了试这个 css3 动画效果,可以把动画效果停留在最后一帧上,以及鼠标 :hover 暂停动画,比较实用的功能,不用 JS 也能实现这些效果了. 不过测试体验感觉手机上没有 jQuery ...

  9. css3动画简单案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. MFC消息映射机制以及画线功能实现

    ---此仅供用于学习交流,切勿用于商业用途,转载请注明http://www.cnblogs.com/mxbs/p/6213404.html. 利用VS2010创建一个单文档标准MFC工程,工程名为Dr ...

  2. Django之Model操作

    Django之Model操作 本节内容 字段 字段参数 元信息 多表关系及参数 ORM操作 1. 字段 字段列表 AutoField(Field) - int自增列,必须填入参数 primary_ke ...

  3. 第一个C语言的小项目

    这里先写下主要的业务代码,一些库代码稍后补充上 /** * Feed新闻个性化推送 */ #include "push_service_news.h" /** * 保证单进程运行 ...

  4. [开源]无sql之旅-Chloe.ORM之增删查改

    扯淡 这是一款轻量.高效的.NET C#数据库访问框架(ORM).查询接口借鉴 Linq(但不支持 Linq).借助 lambda 表达式,可以完全用面向对象的方式就能轻松执行多表连接查询.分组查询. ...

  5. 「post中文参数问题」以及「验证码自动识别备忘」

    前言 之前搞过几次模拟登录,都是模拟 post 后取到 cookie,之后便能用这个 cookie 愉快玩耍.这次碰到了验证码,其实只需手动登录一次,手动取到 cookie 后也能玩耍,不过 cook ...

  6. Service实时向Activity传递数据案例

    转自 http://www.cnblogs.com/linjiqin/p/3147764.html 演示一个案例,需求如下:在Service组件中创建一个线程,该线程用来生产数值,每隔1秒数值自动加1 ...

  7. Python NaN

    NaN, Not a Number, 非数. 它即不是无穷大, 也不是无穷小, 而是python/numpy/... 觉得无法计算时返回的一个符号(自己的推测, 未考证(TODO)). import ...

  8. java-读取javabean类的set方法并设值

    /** * 新反射实例化模型 * @param filenamepath * @return */ public static Object newIntence(String filenamepat ...

  9. podfile The dependency `` is not used in any concrete target

    内容提要: podfile升级之后到最新版本,pod里的内容必须明确指出所用第三方库的target,否则会出现The dependency `` is not used in any concrete ...

  10. iOS 10.0适配之旅

    1.升级Xcode体验 升级到Xcode之后,调试程序好多东西都不是太适应 控制台莫名给你打印一堆不是太好理解的东西 之前使用 Alcatraz 下载的插件都不能用(如何使用Alcatraz) 打开麦 ...