<!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. php常用字符串和例子

    //输出一个或多个字符串 //注:echo 不是一个函数(它是一个语言结构), 因此你不一定要使用小括号来指明参数,单引号,双引号都可以 $a = "admin1"; $b = & ...

  2. Day 23 类的继承,派生,组合,菱形继承,多态与多态性

    类的继承 继承是一种新建类的方式,新建的类称为子类,被继承的类称为父类 继承的特性是:子类会遗传父类的属性 继承是类与类之间的关系 为什么用继承 使用继承可以减少代码的冗余 对象的继承 python中 ...

  3. vue http请求 vue自带的 vue-resource

    vue-resource安装 npm install vue-resource --save-dev 配置 在main.js中引入插件 //Resource 为自定义名 vue-resource 为插 ...

  4. eas之style接口

    Obj可以是KDTable对象,也可以是IRow,IColumn,ICell对象锁定Obj.getStyleAttributes().setLocked(true);Obj.getStyleAttri ...

  5. 软件工程1916|W（福州大学）_助教博客】团队Beta冲刺作业（第9次）成绩公示

    1. 作业链接: 项目Beta冲刺(团队) 2. 评分准则: 本次作业包括现场Beta答辩评分(映射总分为100分)+团队互评分数(总分40分)+博客分(总分130分)+贡献度得分,其中博客分由以下部 ...

  6. [luogu 4886] 快递员

    传送门 Solution 虽然不是点分治但用类似点分治的方法不断接近正确结果 Code // luogu-judger-enable-o2 #include <cstdio> #inclu ...

  7. Nginx Rewrite（伪静态）

    一.作用: 实现URL地址改写. 二.语法: 例:rewrite ^/(.*) http://bbs.wangguangtao.com/$1 permanent; 注:应用位置server.loeat ...

  8. Django-xadmin+django-import-export导入导出的实现

    转载自:https://blog.csdn.net/zcyuefan/article/details/77748850 1. 需求vs现状1.1 需求要求做一个ERP后台辅助管理的程序,有以下几项基本 ...

  9. @Resource与@Autowired区别

    每次理解清楚,过段时间就忘了,还是记一下,方便之后再回看. @ Autowired 是spring提供,包含3种自动装配Bean形式 1.@Autowired默认按类型byType匹配,自动装配Bea ...

  10. BZOJ 1455 罗马游戏 左偏树

    题目大意:给定n个点,每一个点有一个权值,提供两种操作: 1.将两个点所在集合合并 2.将一个点所在集合的最小的点删除并输出权值 非常裸的可并堆 n<=100W 启示式合并不用想了 左偏树就是快 ...