<!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. 微信小程序中的iPhone X适配问题

    微信小程序中的iPhone X适配问题 小程序中下方的导航会被iPhone X下面的那条黑线盖住[微笑脸],所以要专门为了iPhone X做样式上的适配[微笑脸] wx.getSystemInfo({ ...

  2. 【转载】解决方案：git@github.com出现Permission denied (publickey)

    遇到的问题 今天心血来潮,想将intellij上的项目代码放到GitHub上管理. 在进行添加远程库的时候,出现了:git@github.com出现Permission denied (publick ...

  3. [luogu3230 HNOI2013] 比赛 (搜索+Hash)

    传送门 Solution 搜索加Hash记录状态,记忆化搜索,需要注意顺序无关答案 Code //By Menteur_Hxy #include <map> #include <cm ...

  4. css sprites拼合

    一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.就是把网页中一些背景图片整合拼合成一张图片中,再利用DIV CSS的 ...

  5. elasticsearch实战 中文+拼音搜索

    需求 雪花啤酒  需要搜索雪花.啤酒 .雪花啤酒.xh.pj.xh啤酒.雪花pj ik导入 参考https://www.cnblogs.com/LQBlog/p/10443862.html,不需要修改 ...

  6. netty byteBuf (二)

    netty重新定义了byteBuf 而没使用jdk byteBuffer netty byteBuf与jdk  byteBuffer的区别 (1)jdk buffer长度固定  byteBuf超过最大 ...

  7. netty helloWord (一)

    什么是nettty netty是基于javaNio模型的网络编程框架.很多框架底层也是用netty实现的 比如dubbo 与NIO的区别 1.简化了API的使用.基于事件驱动.只需要在对应的事件写相应 ...

  8. DJANGO里让用户自助修改邮箱地址

    因为在部署过程中会涉及用户邮件发送,如果有的同事不愿意收到太多邮件,则可以自己定义为不存在的邮箱. 我们在注册的时候,也不会写用户邮箱地址,那么他们也可以在这里自己更改. changeemail.ht ...

  9. 楼控-西门子insight BBMD设置

    BBMD设置的目的就是让两个不同网段的设备可以同时在一个系统中访问的操作. 比如你有两个bacnet的网络,但是一个是192.168.0.1-192.168.0.255的网段,另一个是10.0.0.1 ...

  10. MySQL出现no mycat database selected的问题分析

    1.先抛开mycat来处理 2.在查询表时,要指定是哪个数据库,然后再查询. ①.如果再MySQL Workbench中,先使用use tablename;,然后在执行操作语句:或者在语句上指定要查询 ...