通过css3的transform  transition可以实现平移,旋转,缩放,拉伸等效果

1.缩放

-webkit-transform: scale(1);

-moz-transform: scale(1);

-ms-transform: scale(1);

-o-transform: scale(1);

transform: scale(1);

2.平移

-webkit-transform: translate(0px, 0px);

-moz-transform: translate(0px ,0px);

-ms-transform: translate(0px, 0px);

-o-transform: translate(0px, 0px);

transform: translate(0px, 0px);

3旋转  deg是角度的单位

-webkit-transform: rotate(0);

-moz-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

4复合效果

-webkit-transform: translate(0px,0px) scale(1) rotate(0);

-moz-transform: translate(0px,0px) scale(1) rotate(0);

-ms-transform: translate(0px,0px) scale(1)rotate(0) ;

-o-transform: translate(0px,0px) scale(1) rotate(0);

transform: translate(0px,0px) scale(1) rotate(0);

5.让它变化持续时间变慢便于观看  第一个参数表示全部属性,第二个表示持续时间,第三个表示非线性变化,还有一个开始时间,可以省略

-webkit-transition: all 3s ease ;

-moz-transition: all 3s ease ;

-ms-transition: all 3s ease ;

-o-transition: all 3s ease ;

transition: all 3s ease ;

.test:hover{

-webkit-transform:  scale(2)rotate(180deg)  translate(200px,200px);

-moz-transform: scale(2) rotate(180deg)  translate(200px,200px);

-ms-transform: scale(2) rotate(180deg)  translate(200px,200px);

-o-transform:  scale(2) rotate(180deg)  translate(200px,200px);

transform: scale(2) rotate(180deg)  translate(200px,200px);

}

下面是本人做的一个简单的2D动画效果,大家可以参考<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/animate.css"/>

        <style type="text/css">

            @keyframes go{

                0%{

                    transform: translate(0,0)  rotateZ(0deg);

                }

                25%{

                    transform: translate(500px,0)  rotateZ(-1000deg);

                }

                50%{

                    transform: translate(500px,300px)  rotateZ(-2000deg);

                }

                75%{

                    transform: translate(0,300px)  rotateZ(-3000deg);

                }

                100%{

                    transform: translate(0,0)  rotateZ(-4000deg);

                }

               }

            .big{

                margin: 0 auto;

                margin-top: 200px;

                width: 600px;

                height: 400px;

                border: 1px solid red;

            }

            .small{

                margin: 0 auto;

                width: 400px;

                height: 200px;

                border: 1px solid yellow;

            }

            .a{

                width: 92px;

                height: 92px;

                border-left: 4px solid blue;

                border-bottom: 4px solid red;

                border-top: 4px solid orange;

                border-right: 4px solid aqua;

                background-image: -webkit-radial-gradient( 46px 46px, yellow 20%, red 60%, blue 20%);
                 /*这一句是颜色渐变为了美观*/

                border-radius: 50px;

                animation: go 10s linear;

                animation-iteration-count: infinite;

            }

        </style>

    </head>

    <body>

        <div class="big">

            <div class="a"></div>

            <div class="small"></div>

        </div>

    </body>

</html>

这样就可以看到有效果了,都写五行是为了做浏览器兼容问题,复合状态下改变顺序会改变效果.

希望对刚入门的新手有所帮助,本人也是刚入门,希望有错的地方大神多多指点

2D动画的制作的更多相关文章

  1. 关于Unity5.5中2D动画的制作

    1.首先要创建一个精灵 GameProject--2Dproject--Sprite 叫bird 2.给这个精灵附加纹理,并让它显示自己想让它显示的场景层中,一般它的静止纹理就是动画的第一张图片 3. ...

  2. 手游[追忆之青]动画导演:2D动画制作技巧

    转自:http://www.gamelook.com.cn/2016/09/264591 GameLook报道/由一般法人计算机娱乐协会(CESA)主办的CEDEC2016日前在日本横滨举行,诸多开发 ...

  3. HTML页面的动画的制作及性能

    原文:HTML页面的动画的制作及性能 WEB页面的动画的制作及性能 简介 目前WEB页面做动画的方式大的分两种1.JS间隔时间不断修改元素属性值,这也是CSS3出来前常用的做法,貌似也是唯一的做法.2 ...

  4. Unity3D初学之2D动画制

    作者:Alex Rose Unity最近宣布推出额外的2D游戏支持,添加了Box 2D物理和一个精灵管理器. 但这里还是有些技巧需要牢记在心.逐帧更改图像只是动画制作的冰山一角,若要让你的游戏出色运行 ...

  5. 2D动画如何做出3D体积感

    https://cowlevel.net/article/1959026 <AngerForce>幕后故事 这篇文章是个老坑,最近有时间开始写,也是对之前项目的一个总结和记录吧. 本篇文章 ...

  6. 使用Unity3D自带动画系统制作下雨效果

    之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪 步骤 ...

  7. Unity3D 之2D动画机

    这里来讲解一下2D动画机的使用 2D的时候,默认的情况下,可以调用默认的站立之类的动画,然后通过触发,可以变化自己的动画. 一:将一个图切成一些一个元素 二:创建一个精灵,给精灵添加一个动画机 三:给 ...

  8. css 2D动画

    2D动画: 通过 CSS3  transform转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动. ...

  9. Unity3d中使用自带动画系统制作下雨效果(一)

    之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪. 步 ...

随机推荐

  1. asp.net core 实战之 redis 负载均衡和"高可用"实现

    1.概述 分布式系统缓存已经变得不可或缺,本文主要阐述如何实现redis主从复制集群的负载均衡,以及 redis的"高可用"实现, 呵呵双引号的"高可用"并不是 ...

  2. transient关键字的用法

    本篇博客转自 一直在路上 Java transient关键字使用小记 1. transient的作用及使用方法 我们都知道一个对象只要实现了Serilizable接口,这个对象就可以被序列化,Java ...

  3. python之类介绍

    python对象销毁(垃圾回收): 1>同Java语言一样,python使用了引用计数这一简单计数来追踪内存中的对象,也就是说,python内部记录着所有使用中的对象各有多少引用,一个内部跟踪变 ...

  4. Openfire阶段实践总结

    从3月开始研究Openfire,其实就是要做一套IM系统,也正是这个原因才了解到Openfire.之前还真没想过有这么多的开源产品可以做IM,而且也没想到XMPP这个协议竟然如何强大.看来还是标准为先 ...

  5. Ubuntu(Linux) + mono + xsp4 + nginx +asp.net MVC3 部署

    折腾了一下,尝试用Linux,部署mvc3. 分别用过 centos 和 ubuntu ,用ubuntu是比较容易部署的. 操作步骤如下: 一.终端分别如下操作 sudo su ->输入密码 a ...

  6. 【腾讯优测干货分享】如何降低App的待机内存（二）——规范测试流程及常见问题

    本文来自于腾讯优测公众号(wxutest),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/806TiugiSJvFI7fH6eVA5w 作者:腾讯TMQ专项测 ...

  7. 在 Linux 打造属于自己的 Vim

    Linux 系统中很多东西都是以脚本代码.配置文件的形式存在,使用 Linux 系统时,需经常对这些文件进行编辑.很显然,如果没有文本编辑器,江湖之路寸步难行. 我的选择是 Vim.Vim 是 Lin ...

  8. Webgl的2D开发方案(一)spritebatcher

    使用TypeScript 和 webgl 开发   第一步:实现了SpriteBatcher 例子如下 http://oak2x0a9v.bkt.clouddn.com/test/index.html ...

  9. ubuntu 启动MySql和安装python的MySQLdb模块

    ubuntu一般会自己预安装mysql,你只需 /etc/init.d/mysql start|stop|restart|reload|force-reload|status  命令便可以实现mysq ...

  10. Swift -- 对AFN框架的封装

    Swift -- 对AFN框架的封装 一.封装AFN的目的 简单的说: 解耦 日常工作中,我们一般都不会去直接使用AFNetWorking来直接发送网络请求,因为耦合性太强,假设有多个控制器都使用AF ...