<!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. Memcached 之取模与哈希算法命中率实验

    当5台memcache服务器中有一台宕机时的命中率实验. 一.php实现代码 1. config.php $server = array( "A" => array(&quo ...

  2. We wanted {"required":["value"]} and you sent ["text","value","id","sessionId"]

    重装python pycharm后再次执行以前执行没有问题的Appium脚本报错 We wanted {"required":["value"]} and yo ...

  3. Scala语言学习笔记——方法、函数及异常

    1.Scala 方法及函数区别 ① Scala 有方法与函数,二者在语义上的区别很小.Scala 方法是类的一部分,而函数是一个对象可以赋值给一个变量.换句话来说在类中定义的函数即是方法 ② Scal ...

  4. tomcat 热加载设置

    找到tomcat项目的apache-tomcat-8.0.30\conf\context.xml,打开进行编辑,把Context项中加上 reloadable="true" < ...

  5. Ubuntu下解压(unzip)乱码的解决方法

    在Windows上压缩的文件,是以Windows系统默认编码中文来压缩文件.由于zip文件中没有声明其编码,所以linux上的unzip一般以默认编码解压,中文文件名会出现乱码. 通过unzip -- ...

  6. Html-如何正确给table加边框

    一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...

  7. 【剑指Offer】25、复杂链表的复制

      题目描述:   输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节 ...

  8. 61.index CUD

    主要知识点 索引CUD     一.创建索引的语法     PUT /my_index { "settings": { ... any settings ... }, " ...

  9. phpstrom 汉化

    -- ---------- _--------------------------------------------------- ------------------- ----- ------- ...

  10. 使用SQLAlchemy对博客文章进行分页

    https://blog.csdn.net/hyman_c/article/details/54382161