<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS3 动画</title>

    <style>

        body {

            margin: 0;

            padding: 0;

            background-color: #F7F7F7;

        }

        .box {

            width: 400px;

            margin: 100px auto;

        }

        .box img{

            /*4.调用动画*/

            animation: rotateFuc 4s linear 0s;

        }

        /*动画的第一步*/

        /*1.申明动画序列  @keyframes  跟着的是动画序列的名称*/

        @keyframes  rotateFuc{

            /*2.写动画的节点  from 0%  to 100%   百分比是时间节点*/

            from{

            }

            25%{

                /*3.添加动画属性*/

                transform: rotate(360deg) scale(2);

            }

            75%{

                /*3.添加动画属性*/

                transform: rotate(720deg) scale(0.5);

            }

            to{

                transform: none;

            }

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="./images/fengche.png">

    </div>

</body>

</html>

css3动画简单案例的更多相关文章

  1. css3动画小案例

    今天与大家来分享一下我做的css3动画案例. 在展示我的案例之前先给大家说说实现这个案例所需要的一些属性. transform 属性允许我们对元素进行旋转.缩放.移动或倾斜. 通过 CSS3 2D转换 ...

  2. css3动画简单应用

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

  3. css3动画第一式--简单翻滚

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

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

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

  5. 简单CSS3动画制作

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

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

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

  7. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

  8. css3学习--css3动画详解一(animation属性）

    ***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ 一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主 ...

  9. 浅谈CSS3动画的凌波微步--steps()

    背景 一日敲代码的我,得到一个需求:写一个10秒的倒计时. 用JavaScript定时器麻溜写完之后,恰好同事勇司机接完水.瞟了一眼,然后凑过来说,这个用CSS3也可以写,而且一行JavaScript ...

随机推荐

  1. js取最值：

    取最值是很常见的一种运算,各个语言都会遇到这个问题.Js中,如果简单的进行取最值,完全没必要自己写一个比较函数,原生的js就提供了方法.这些方法都属于Math 对象(引用w3c:Math 对象并不像 ...

  2. Firebug全了解

    Firebug是firefox下的一个扩展,能够调试所有网站语言,如Html,Css等,但FireBug最吸引人的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下都能使用(IE, ...

  3. JAVA版CORBA程序

    1.题目分析题目1.Java版CORBA程序1——HelloWorld编写实现显示“Hello,World!+班级+中文姓名”字符串.题目2.JAVA版CORBA程序2——Counter编写实现连加. ...

  4. vue中用v-for循环出出来的div下面的span不给宽度也能相对于div居中

    效果图 1.html <div> <div v-on:mousemove="dataDetails($event, item)" v-on:mouseleave= ...

  5. 洛谷 P2483 BZOJ 1975 [SDOI2010]魔法猪学院

    题目描述 iPig在假期来到了传说中的魔法猪学院,开始为期两个月的魔法猪训练.经过了一周理论知识和一周基本魔法的学习之后,iPig对猪世界的世界本原有了很多的了解:众所周知,世界是由元素构成的:元素与 ...

  6. 【ACM】nyoj_305_表达式求值_201308081018

    表达式求值时间限制:3000 ms  |  内存限制:65535 KB 难度:3描述 Dr.Kong设计的机器人卡多掌握了加减法运算以后,最近又学会了一些简单的函数求值,比如,它知道函数min(20, ...

  7. asp.net--owin的知识点

    一篇很好的介绍owin的文章 http://kb.cnblogs.com/page/509236/ Owin在webconfig中定义启动配置类IdentityConfig的方法(代码来自极客学院的教 ...

  8. angularjs时间轴

    1.炫酷的图片是开端啊 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  9. 《从零開始学Swift》学习笔记（Day48）——类型检查与转换

    原创文章,欢迎转载.转载请注明:关东升的博客 继承会发生在子类和父类之间,是一系列类的继承关系. 比如:Person是类层次结构中的根类.Student是Person的直接子类.Worker是Pers ...

  10. C++派生类中如何初始化基类对象（五段代码）

    今天收到盛大的面试,问我一个问题,关于派生类中如何初始化基类对象,我在想派生类对于构造函数不都是先构造基类对象,然后在构造子类对象,但是如果我们在成员初始化列表先初始化派生类的私有成员,在函数内去调用 ...