通过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. ubuntu安装ANSYS17.2全过程

    本次介绍在Ubuntu kylin1604下安装Ansys 17.2的全部过程. 1 安装文件准备 关于ANSYS的软件安装文件,在网络上可以找到.这里采用SSQ版本的安装文件,如图所示,包含一个名为 ...

  2. 前端如何正确选择offer，到底选哪个？

    文章背景:来自于一次线上交流,当时回答感觉比较粗糙,做个阶段性的总结,也分享给其它朋友. 当时的题目是,共2个offer,如何选择: 1. 美团外卖前端 2. 京东深圳前端研发(只有通过邮件,还有收到 ...

  3. [BOT]自己动手实现android 饼状图，PieGraphView，附源码解析

    本文要介绍的是一个参照手机支付宝app里面记账本功能里的"饼状图"实现的控件.通常app中可能的数据展示控件有柱状图,折线图,饼状图等,如果需要一个包含多种View控件的库,那么 ...

  4. Handlebars 模板引擎之前后端用法

    前言 不知不觉间,居然已经这么久没有写博客了,坚持还真是世界上最难的事情啊. 不过我最近也没闲着,辞工换工.恋爱失恋.深圳北京都经历了一番,这有起有落的生活实在是太刺激了,就如拿着两把菜刀剁洋葱一样, ...

  5. ExtJS in Review - xtype vs. alias

    今天在帮一个兄弟检查一段自定义控件的代码时觉得他对xtype以及alias的使用和ExtJS各示例代码的使用有较多的不一致,而我自己也不是很清楚使用这两个属性时的最佳方法.因此在回家后整理出了这样一篇 ...

  6. CSharpGL(32)矩阵与四元数与角度旋转轴的相互转换

    CSharpGL(32)矩阵与四元数与角度旋转轴的相互转换 三维世界里的旋转(rotate),可以用一个3x3的矩阵描述:可以用(旋转角度float+旋转轴vec3)描述.数学家欧拉证明了这两种形式可 ...

  7. MySql免安装版安装配置，附MySQL服务无法启动解决方案

          文首提要:             我下载的MySQL版本是:mysql-5.7.17-winx64.zip  Archive版:系统:Windows7 64位. 一.解压文件 下载好My ...

  8. Git技巧：右键菜单怎么去除？

    如果你是按照http://www.cnblogs.com/dunitian/p/5034624.html 那么你就没有这么多蛋疼的菜单了(反之:vs帮你安装的就蛋疼了) 说下解决方法: 1.Win+R ...

  9. MongoDB安装与故障

    下载完毕后   bin为官方代码   data为自行创建的文件夹 db存在数据 log存在日志   启动MongoDB 通过cmd到db的文件目录 通过mongod.exe代码执行data下的log文 ...

  10. C# windows服务制作（包括安装及卸载）

    开篇语 因工作内容需要做一个windows服务,此前并没有相关经验,所以做了一个demo来跑跑这个梗(高手跳过,需要的来踩)- 效果如下:打开服务,可以找到我们新增的一个windows服务,这个dem ...