在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. LeetCode题解-----Sliding Window Maximum

    题目描述: Given an array nums, there is a sliding window of size k which is moving from the very left of ...

  2. [No00008A]bat改变cmd命令提示符颜色

    从Windows 95到现在的Windows 10,系统中带的DOS命令提示符软件都是黑白画面,下面教大家几个自定义DOS命令提示符颜色的小技巧. 改变DOS命令提示符的标题:在开始菜单点运行,输入 ...

  3. Oracle 获取当前日期及日期格式

    http://blog.sina.com.cn/s/blog_6168ee920100l2ye.html Oracle 获取当前日期及日期格式 获取系统日期:  SYSDATE()   格式化日期:  ...

  4. [LeetCode] Factor Combinations 因子组合

    Numbers can be regarded as product of its factors. For example, 8 = 2 x 2 x 2; = 2 x 4. Write a func ...

  5. 编译自己的Ubuntu内核

    很多时候我们在使用Ubuntu的时候,想修改一下内核配置,然后编译,安装到Ubuntu中.这也是进行Ubuntu内核开发的前提. 获取当前Ubuntu对应代码 有很多方法可以获得Ubuntu内核代码, ...

  6. Mysql的连接状态

    对应mysql的连接,任何时刻都有一个状态.表示mysql当前正在做什么. command里面的状态: sleep:线程正在等待客户发送新的请求. query:正在执行查询或者正在将结果发送客户端 这 ...

  7. Django Admin

    //设置admin列表名称 def __str__(self): return u'%s' % self.name class Meta: db_table ="数据库的那个表" ...

  8. 解决java.net.MalformedURLException: unknown protocol: c问题

    修改前代码: DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); DocumentBuilder builde ...

  9. 个人作业-Week1

    问题1:程序员的优劣是否在软件开发中已经不重要了??用户实际关心的 外形,使用的乐趣和效率,自我形象,个人满足感,回忆,这么多条中,仅有效率与代码有关,而实际上用户比起效率却更在意其他这些“幺蛾子”. ...

  10. 学记：spring boot使用官网推荐以外的其他数据源druid

    虽然spring boot提供了4种数据源的配置,但是如果要使用其他的数据源怎么办?例如,有人就是喜欢druid可以监控的强大功能,有些人项目的需要使用c3p0,那么,我们就没办法了吗?我们就要编程式 ...