<!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. 【转载】Java 集合详解

    转载:https://www.cnblogs.com/ysocean/p/6555373.html 一.集合的由来 通常,我们的程序需要根据程序运行时才知道创建多少个对象.但若非程序运行,程序开发阶段 ...

  2. Git server出现cache大回收分析

    实例 git server是一个io密集型的服务,当cache量很大的时候,cache会全部一次释放,导致那么一瞬间,IO read压力很大,因为,用户的大量请求,需要重新从磁盘读到内存,但是这个时刻 ...

  3. [USACO5.5]隐藏口令Hidden Password [最小表示法模板]

    最小表示法就是一个字符串构成一个环,找以哪个点为开头字典序最小. 然后我们就可以用n2的算法愉快的做啦~实际上有O(n)的做法的,就是用两个指针扫,如果这两个位置的字典序相等,就一起往后,如果某一个大 ...

  4. 编码GBK和GB2312、Unicode、UTF-8

    一.编码GBK和GB2312 随着计算机发展,各国已经不满足于单纯用ASCII码: 对于我们来说能在计算机中显示中文字符是至关重要的,所以我们还需要一张关于中文和数字对应的关系表: 一个字节8位二进制 ...

  5. 10.使用Mybatis-Generator自动生成Dao、Model、Mapping相关文件(转)

    出处:http://www.cnblogs.com/lichenwei/p/4145696.html Mybatis属于半自动ORM,在使用这个框架中,工作量最大的就是书写Mapping的映射文件,由 ...

  6. ul,li不能左右居中的问题

    近期帮朋友做一个他们公司的商品站点,用到了曾经学到的html+css技术,当然做站点少不了Javascript和jquery这些..... 这个功能主要实现了导航条里面的条目是居中的.所以声明了ul, ...

  7. jdbc 读取oracle long raw 字段，里面存的是文本

    jdbc 读取oracle long raw 字段,里面存的是文本 参考: http://singlewolf.iteye.com/blog/278769 http://blog.csdn.net/r ...

  8. 【机房收费系统C#版】——导出Excel

    前言 机房合作開始好长了一段时间.反重复复开了几次会,项目也是一拖再拖,作为组长.有80%的责任都在于我.为了不让这个项目陪着我过春节.要求自己一定要在这几天敲完. 还是一样的问题,用C#敲,从一開始 ...

  9. hdu5326 Work

    题目链接:点击打开链接 题目大意:有n个人.各自管理不同的人,问有多少人管理k个人. 思路:先记录每一个人的直接上级.然后模拟路径压缩的过程进行计数求和. #include<stdio.h> ...

  10. Object对象具体解释（二）之clone

    clone方法会返回该实例对象的一个副本,通常情况下x.clone() != x || x.clone().getClass() == x.getClass() || x.clone().equals ...