通过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常用命令(3)mkdir命令

    mkdir命令1 命令格式:mkdir [选项]目录名2 命令功能:通过 mkdir 命令可以实现在指定位置创建以 DirName(指定的文件名)命名的文件夹或目录.要创建文件夹或目录的用户必须对所创 ...

  2. Xamarin和微软发起.NET基金会

    新闻<微软宣布成立.NET基金会全面支持开源项目 包括C#编译器Roslyn>,看到大家对微软的开放都很兴奋.在此之前在.NET社区也有了大量的开源项目,所列的24个项目也是早就开源,这次 ...

  3. Angular2学习笔记——在子组件中拿到路由参数

    工作中碰到的问题,特此记录一下. Angular2中允许我们以`path\:id\childPath`的形式来定义路由,比如: export const appRoutes: RouterConfig ...

  4. webpack搭建前端一条龙服务

    作为从grunt.gulp一路走来的老码农,一开始用webpack的时候我是很抗拒的.但由于核心库使用了vue,而webpack又是vue的最佳拍档(vue作者专门为其写了vue-loader),所以 ...

  5. ABP源码分析十六：DTO的设计

    IDTO:空接口,用于标注Dto对象. ComboboxItemDto:用于combobox/list中Item的DTO NameValueDto<T>/NameValueDto:用于na ...

  6. 给 Android 研发的一些的建议

    作为应用程序开发人员,我们需要注意在开发应用程序时的一些问题. 这些问题的安全级别是取决于应用程序的类型和使用域. 在这里列举了一些我们在开发中需要注意的一些问题: 开发日志输出相关: 1. 不要在 ...

  7. 堆排序与优先队列——算法导论(7)

    1. 预备知识 (1) 基本概念     如图,(二叉)堆是一个数组,它可以被看成一个近似的完全二叉树.树中的每一个结点对应数组中的一个元素.除了最底层外,该树是完全充满的,而且从左向右填充.堆的数组 ...

  8. 【译】Unity3D Shader 新手教程(5/6) —— Bumped Diffuse Shader

    本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 动机 如果你满足以下条件,我建议你阅读这篇教程: 你想学习片段着色器(Fragment Shader). 你想实现 ...

  9. ASP.NET Core中的依赖注入（3）: 服务的注册与提供

    在采用了依赖注入的应用中,我们总是直接利用DI容器直接获取所需的服务实例,换句话说,DI容器起到了一个服务提供者的角色,它能够根据我们提供的服务描述信息提供一个可用的服务对象.ASP.NET Core ...

  10. 理清JavaScript正则表达式--上篇

    在JavaScript中,正则表达式由RegExp对象表示.RegExp对象呢,又可以通过直接量和构造函数RegExp两种方式创建,分别如下: //直接量 var re = /pattern/[g | ...