css3-11 如何实现2D动画

前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画

一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:scale(w,h); 宽度和高度,w,h都是填写缩放的倍数,没有单位,比如1.5就是放大1.5倍,1是默认的倍数,0.5缩小,还可以为负数(倒着缩放) 语法: transform:scale(1.5,2.0); 上面这句话等价于: transform:scaleX(1.5); 宽度 transf…

CSS3中的变形与动画【转】

最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速,性能更好. (下面均没写浏览器前缀,如有需要请自行添加~~) CSS3常见的动画效果的实现,其实主要是靠 transition和 animation . 而通常,这两个又会和CSS3中的新属性transform 来搭配使用那么这三个东西其实是干什么用的呢?我按我自己的理解来下个简单结论. tran…

2D动画的制作

通过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(0p…

高大上网站-CSS3总结1-图片2D处理以及BUG修复

高大上网站-CSS3总结1-图片2D处理以及BUG修复一,前言: 现在的前端UI相对JS来说,重视并不够. 但是CSS3提供的新特性,将现在的网站赤裸裸的划分为两类:一类还在写着老旧样式,或者通过bootstrap来蹭点CSS3动画.另一类,是用CSS3写着各种特效的网站. 也许国内还感觉不是很明显.但是在国外的网站真的很明显能看出来这些.也许很多时候,国内大部分公司都不愿意将时间和精力放在这上面.另外,愿意这样写的前端工程师也偏少.(你能指望一个实习生写这个?) 但是,这里我要说但是了. 一…

一款纯css3实现的超炫动画背画特效

之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览源码下载实现的代码. html代码: <div class='fake-gif'> <span class='stripe'></span><span class='stripe'></span><span class='stripe'&…

一款基于css3和jquery实现的动画弹出层

今天给大家分享一款基于css3和jquery实现的动画弹出层.这款弹出层初页面面一个显示弹出层按钮.单击该按钮时,弹出层以非常炫的动画形式出现.弹出层有关闭按钮,单击半闭按钮,弹出层关闭.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="papersheet">  <div class="papersheet__trigger"> <!-…

css 2D动画

2D动画: 通过 CSS3 transform转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动.移动参照元素左上角原点 a) 语法:translate(tx) | translate(tx,ty) b) tx是一个代表X轴(横坐标)移动的向量长度,当其值为正值时,元素向X轴右方向移动,反之其值为负值时,元素向X轴左方向移动. c) ty是一个代表Y轴(纵向标)移动的…

CSS3中的过渡、动画和变换

一.过渡过渡效果一般由浏览器直接改变元素的CSS属性实现. a.transition属性 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property transition-duration transition-timing-function transition-delay 注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果. 1 <!DOCTYPE html> 2 <html lang=&…

实用CSS3的transform实现多种动画效果

查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="http://keleyi.com"> <title>实用CSS3的transform实现多种动画效果-柯乐义</title…

css3很美的蟠桃动画

查看效果:http://hovertree.com/texiao/css3/26/ 源码下载:http://hovertree.com/h/bjaf/ndhxgfkn.htm 效果图如下: 代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta name="Copyright" conten…

CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)

刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是Web前端开发员,用CSS3做一些过渡效果和动画,并不比运用JS脚本实现要好(个人认为:用CSS只不过让不懂JS的人员(设计人员)也能做动画,而且使用浏览器封装好的方法,但使用JS脚本可以更灵活,在性能上也能去优化). 1.Transition Transition是一种直观上的效果,让DOM元素的某个…

用css3制作旋转加载动画的几种方法

以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会利用css3去实现一些很酷的效果,这些效果原来更多的是利用图片来实现.最近的一个改进就是利用css3制作旋转加载动画.以下将分别介绍几种实现的方案. 方案1,图片辅助传统做法是直接用动态的GIF图片,这个方案是用PNG图片加上背景颜色来模拟静止的加载图片,然后利用css中的animation处理图…

基于CSS3制作的鼠标悬停动画菜单

之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="page"> <section class="demo"> <nav class="nav"&…

html5+css3第一屏滚屏动画效果

详细内容请点击在线预览立即下载 html5+css3第一屏滚屏动画效果. 转载自:http://tympanus.net/codrops/2014/05/22/inspiration-for-article-intro-effects/ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-7243260-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.…

分享9款用HTML5/CSS3制作的动物人物动画

1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示源码下载 2.HTML5 Canvas头发飘逸动画很酷的HTML5动画 HTML5 Canvas动画非常炫酷,很多有创意的开发者可以利用HTML5的Canvas特性创造出很多不错的动画特效.今天我们要分享一款HTML5 Canvas头发飘逸动画,该动画模拟头发飘动的效果,加上可爱的人脸,可以说非常有技术含量,更富有创意. 在线演示源码下载 3.HTML5/SVG实现随风摇摆的动画…

7款纯CSS3实现的炫酷动画应用

1.纯CSS3实现人物摇头动画这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分陶醉的样子,周围还会出现跳动的音符动画. 在线演示源码下载 2.CSS3 Loading进度条加载动画特效 3款绚丽风格今天我要分享一款更加炫酷的CSS3进度条加载动画特效,该动画特效有3个不同的风格,注意,IE6,7,8是不支持该进度条动画的. 在线演示源码下载 3.纯CSS3实现云雾缭绕动…

Unity3D 之2D动画机

这里来讲解一下2D动画机的使用 2D的时候,默认的情况下,可以调用默认的站立之类的动画,然后通过触发,可以变化自己的动画. 一:将一个图切成一些一个元素二:创建一个精灵,给精灵添加一个动画机三:给动画机里面添加几个元素,用于动画的变换,点击开始按钮,就能够看到变化的动画了同时还可以给动画添加位置属性,不光物理变化,并且还能够有距离的移动不过有个问题(如果指定了Position可能会导致刚体使用不了,因为已经把位置的y给设定死了) 四:点击游戏开始,该精灵就可以调用默认的精灵动画了五:可…

7款纯CSS3实现的炫酷动画应用|慕课网只学有用的！

关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦ 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用…

超绚丽CSS3多色彩发光立方体旋转动画

CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.css3动画的属性主要分为三类:transform.transition以及animation. 下面就是用CSS3动画animation做的立方体旋转动画例图: 代码如下: <!doctype html><html><head><meta charset="utf-8"><title></title&g…

CSS3 的box-shadow进阶之 - 动画篇 - 制作辐射动画

本篇文章是上一篇讲box-shadow基础知识的延伸,建议先花几分钟阅读那篇文章,点击阅读,再来看这篇. 除了box-shadow属性知识外,制作动画,还需要对CSS3的animation, @keyframes制作动画有所了解. 接下来,还是那张图.. 基本思路如下: 1.写好一个div,<div class="circle"></div> 2.利用border-radius,把它变成一个圆 3.给它添加after伪类,伪类也是一个一样大小的圆(不设置背景色)…

（转）利用 SVG 和 CSS3 实现有趣的边框动画

目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四> 基础API SVG 学习<五> SVG动画 SVG 学习<六> SVG的transform SVG 学习<七> SVG的路径——path(1)直线命令.弧线命令 SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令.光滑贝塞尔曲线命令 (转…

Unity3D初学之2D动画制

作者:Alex Rose Unity最近宣布推出额外的2D游戏支持,添加了Box 2D物理和一个精灵管理器. 但这里还是有些技巧需要牢记在心.逐帧更改图像只是动画制作的冰山一角,若要让你的游戏出色运行,你还得使用转换和旋转等功能. 现在让我们先从基本技巧开始. 更改帧如果你已经准备好了制作动画的纹理,你可能会使用SpriteManager脚本的付费版本,或者Unity的新版本.假设你使用的是2D位面和纹理.这就是一个低效率的方法,但如果你是在制作一个game jam的项目,你可能会想塞入一些可…

纯CSS3悬停图标旋转导航动画代码

分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览源码下载实现的代码. html代码: <div id="x_contant"> <a class="xzt1" href="#"><img src="images/xztz_1.png" /></a> <a class="xzt2" hr…

css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3伪放大镜(图片放大动画)效果</title><style>.gallery{list-style:none}.gallery:before,.gallery__item:last-child{position:fixed;top:50…

基于jQ+CSS3页面滚动内容元素动画特效

今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览源码下载实现的代码. html代码: <div class="htmleaf-container"> <div class="container"> <h2 class…

一款jquery和css3实现的卡通人物动画特效

之前为大家分享了很多jquery和css3的动画实例.今天给大家带来一款非常炫的jquery和css3实现的卡通人物动画特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="wrapper"> <div class="border-circle" id="one"> </div> <div class="border-circle" id=&…

纯css3实现的鼠标悬停动画按钮

今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览源码下载实现的代码. html代码: <div> <span></span> </div> css3代码: body { background-color: #333; } div { width: 200px; height: 200px; margin: 0 auto; } span { positio…

重新想，重新看——CSS3变形，过渡与动画①

学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着急学,一旦有需求使用JS勉强应付即可.但后来就渐渐觉得心慌,看大家都在争相谈论使用CSS3的动画,做出一个个惊艳的效果.觉得这种想法真是害人,哪有程序员不向前看而呆在自己的舒适圈里坐井观天呢?手机端H5页面各种在用CSS动画,网页也使用CSS动画大大提升了页面性能,减少了JS代码负担,提高了效率,实…

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

转自:http://www.gamelook.com.cn/2016/09/264591 GameLook报道/由一般法人计算机娱乐协会(CESA)主办的CEDEC2016日前在日本横滨举行,诸多开发者都在活动现场发表自己的真知灼见.在活动的第二天,日本手游厂商GREE旗下动画导演清田徹以ARPG手游<追忆之青>为例,详解2D动画制作技巧. 在文章开始之前,我们先做一个简单的介绍:根据官方的资料,该作的主美是曾经负责过<最终幻想>系列的天野喜孝,音乐方面也是找来了<皇家骑士团…