通过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. Linux设备管理(五)_写自己的sysfs接口

    我们在Linux设备管理(一)_kobject, kset,ktype分析一文中介绍了kobject的相关知识,在Linux设备管理(二)_从cdev_add说起和Linux设备管理(三)_总线设备的 ...

  2. 不要着急改代码，先想想--centos 6.8下编译安装tmux

    诸位读者新年好,2017开年第一篇博客,请允许我先问候一下看到这篇博客的诸位.写博客是我2017年定下的目标之一,希望我会坚持下去. 最近打算尝试一下tmux这个神器,于是有了这一篇关于思维方式的Bl ...

  3. Concurrency

    <Concurrency>:http://docs.oracle.com/javase/tutorial/essential/concurrency/index.html <Java ...

  4. [httpserver]如何解析HTTP请求报文

    这个http server的实现源代码我放在了我的github上,有兴趣的话可以点击查看哦. 在上一篇文章中,讲述了如何编写一个最简单的server,但该程序只是接受到请求之后马上返回响应,实在不能更 ...

  5. 剁手党也有春天 -- 淘宝 UWP ”比较“功能诞生记

    前言 网购已经不再是现在的时髦,而变成了我们每天的日常生活.上网已经和买买买紧密地联系在了一起,成为了我们的人生信条.而逛街一词,越来越多地变成了一种情怀.有时候我们去逛街,要么是为了打发时间,要么是 ...

  6. JavaScript的妙与乐（一）之 函数优化

    JavaScript的妙与乐系列文章主要是展示一些JavaScript上面比较好玩一点的特性和一些有用的技巧,里面很多内容都是我曾经在项目中使用过的一些内容(当然,未必所有技巧的使用频率都很高^_^) ...

  7. [数据库基础]——图解JOIN

    阅读导航 一.概要 二.JOIN分类 三.JOIN分类详解 一.概要 JOIN对于接触过数据库的人,这个词都不陌生,而且很多人很清楚各种JOIN,还有很多人对这个理解也不是很透彻,这次就说说JOIN操 ...

  8. 一文搞懂HMM（隐马尔可夫模型）

    什么是熵(Entropy) 简单来说,熵是表示物质系统状态的一种度量,用它老表征系统的无序程度.熵越大,系统越无序,意味着系统结构和运动的不确定和无规则:反之,,熵越小,系统越有序,意味着具有确定和有 ...

  9. 自用的基于Emit的C#下DataTable转实体类方法

    之前一直在做WebForm的开发,数据绑定时直接DataTable绑定Gridview很方便,但是最近开始往MVC转,数据列表的传递和页面展示基本上是以List为主,像下面这样,遍历实体类的各个字段去 ...

  10. 搭建LNAMP环境（七）- PHP7源码安装Memcached和Memcache拓展

    上一篇:搭建LNAMP环境(六)- PHP7源码安装MongoDB和MongoDB拓展 一.安装Memcached 1.yum安装libevent事件触发管理器 yum -y install libe ...