一、css3设置文字粗细？
CSS可以将文字的粗细进行了细致的划分，而且，还可以将本身是粗体的文字，变为正常的粗细显示。
文字的粗细在CSS中通过属性：font-weight设置，如上代码几乎涵盖了所有的文字粗细值，并且，可以是本身是粗体的字体，变成正常粗体
二、css3动画forwards怎么用？
举个例如下：
会长大的
这里div.test会变宽到500px停住，当给他添加上test-high类时，会保持500px的宽度，在变高。这可能就是想要的，关键是再下一个动画开始前将样式调整到上一个动画结束时一样。三、CSS3动画和js动画各有什么优劣？
CSS3的动画的优点：
1.在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化（比如专门新建一个图层用来跑动画）
2.代码相对简单 但其缺点也很明显： 1.在动画控制上不够灵活 2.兼容性不好
3.部分动画功能无法实现（如滚动动画，视差滚动等） JavaScript的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容IE6，并且功能强大。但想想CSS动画的transform矩阵是C++级的计算，必然要比javascript级的计算要快。另外对库的依赖也是一个很让人头疼的问题。 所以，对于一些复杂控制的动画，使用javascript会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑CSS吧。
四、css3自上而下的动画怎么改成自下而上？
@keyframes myitems{from {position:absolute;bottom:0;}to {position:absolute;bottom:500px;}}开始定位到底部，结尾到你指定高度。css3动画过程
五、如何使用html5与css3完成google涂鸦动画？
知道如何使用CSS3动画比知道如何使用<canvas>元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式，比如CSS)，而我们使用canvas自定义画出来的效果却不能被优化。原因又在于，浏览器使用的硬件主要取决于显卡的能力。目前，浏览器没有给予我们直接访问显卡的权力，比如，每一个绘画操作都不得不在浏览器中先调用某些函数。 1.canvas html代码：
代码如下:
<html> <head> <meta charset="UTF-8" /> <title>Animation in HTML5 using the canvas element</title> </head> <body onload="init();"> <canvas id="canvas" width="1000" height="600">Your browser does not support the <code><canvas></code>-element.Please think about updating your brower!</canvas> <div id="controls"> <button type="button" onclick="speed(-0.1);">Slower</button> <button type="button" onclick="play(this);">Play</button> <button type="button" onclick="speed(+0.1)">Faster</button> </div> </body> </html>
js代码： 定义一些变量：
代码如下:
var dx=5, //当前速率 rate=1, //当前播放速度 ani, //当前动画循环 c, //画图(Canvas Context) w, //汽车[隐藏的](Canvas Context) grassHeight=130, //背景高度 carAlpha=0, //轮胎的旋转角度 carX=-400, //x轴方向上汽车的位置(将被改变) carY=300, //y轴方向上汽车的位置(将保持为常量) carWidth=400, //汽车的宽度 carHeight=130, //汽车的高度 tiresDelta=15, //从一个轮胎到最接近的汽车底盘的距离 axisDelta=20, //汽车底部底盘的轴与轮胎的距离 radius=60; //轮胎的半径
为了实例化汽车canvas(初始时被隐藏)，我们使用下面的自执行的匿名函数
代码如下:
(function(){ var car=document.createElement('canvas'); //创建元素 car.height=carHeight+axisDelta+radius; //设置高度 car.width=carWidth; //设置宽度 w=car.getContext('2d'); })();
点击“Play”按钮，通过定时重复执行“画汽车”操作，来模拟“帧播放”功能：
代码如下:
function play(s){ //参数s是一个button if(ani){ //如果ani不为null，则代表我们当前已经有了一个动画 clearInterval(ani); //所以我们需要清除它(停止动画) ani=null; s.innerHTML='Play'; //重命名该按钮为“播放” }else{ ani=setInterval(drawCanvas,40); //我们将设置动画为25fps[帧每秒]，40/1000，即为二十五分之一 s.innerHTML='Pause'; //重命名该按钮为“暂停” } }
加速，减速，通过以下方法，改变移动距离的大小来实现：
代码如下:
function speed(delta){ var newRate=Math.max(rate+delta,0.1); dx=newRate/rate*dx; rate=newRate; } 页面加载的初始化方法： //init function init(){ c=document.getElementById('canvas').getContext('2d'); drawCanvas(); }
主调方法：
代码如下:
function drawCanvas(){ c.clearRect(0,0,c.canvas.width, c.canvas.height); //清除Canvas(已显示的)，避免产生错误 c.save(); //保存当前坐标值以及状态，对应的类似“push”操作 drawGrass(); //画背景 c.translate(carX,0); //移动起点坐标 drawCar(); //画汽车(隐藏的canvas) c.drawImage(w.canvas,0,carY); //画最终显示的汽车 c.restore(); //恢复Canvas的状态，对应的是类似“pop”操作 carX+=dx; //重置汽车在X轴方向的位置，以模拟向前走 carAlpha+=dx/radius; //按比例增加轮胎角度 if(carX>c.canvas.width){ //设置某些定期的边界条件 carX=-carWidth-10; //也可以将速度反向为dx*=-1; } }
画背景：
代码如下:
function drawGrass(){ //创建线性渐变，前两个参数为渐变开始点坐标，后两个为渐变结束点坐标 var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height); //为线性渐变指定渐变色，0表示渐变起始色，1表示渐变终止色 grad.addColorStop(0,'#33CC00'); grad.addColorStop(1,'#66FF22'); c.fillStyle=grad; c.lineWidth=0; c.fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight); }
画车身：
代码如下:
function drawCar(){ w.clearRect(0,0,w.canvas.width,w.canvas.height); //清空隐藏的画板 w.strokeStyle='#FF6600'; //设置边框色 w.lineWidth=2; //设置边框的宽度，单位为像素 w.fillStyle='#FF9900'; //设置填充色 w.beginPath(); //开始绘制新路径 w.rect(0,0,carWidth,carHeight); //绘制一个矩形 w.stroke(); //画边框 w.fill(); //填充背景 w.closePath(); //关闭绘制的新路径 drawTire(tiresDelta+radius,carHeight+axisDelta); //我们开始画第一个轮子 drawTire(carWidth-tiresDelta-radius,carHeight+axisDelta); //同样的，第二个 }
画轮胎：
代码如下:
function drawTire(x,y){ w.save(); w.translate(x,y); w.rotate(carAlpha); w.strokeStyle='#3300FF'; w.lineWidth=1; w.fillStyle='#0099FF'; w.beginPath(); w.arc(0,0,radius,0,2*Math.PI,false); w.fill(); w.closePath(); w.beginPath(); w.moveTo(radius,0); w.lineTo(-radius,0); w.stroke(); w.closePath(); w.beginPath(); w.moveTo(0,radius); w.lineTo(0,-radius); w.stroke(); w.closePath(); w.restore(); }
由于原理简单，并且代码中作了详细注释，这里就不一一讲解！ 2.CSS3 你将看到我们未通过一句JS代码就完全实现了和上面一样的动画效果： HTML代码：
代码如下:
<html> <head> <meta charset="UTF-8" /> <title>Animations in HTML5 using CSS3 animations</title> </head> <body> <div id="container"> <div id="car"> <div id="chassis"></div> <div id="backtire" > <div ></div> <div ></div> </div> <div id="fronttire" > <div ></div> <div ></div> </div> </div> <div id="grass"></div> </div> <footer></footer> </body> </html> CSS代码： body { padding:0; margin:0; }
定义车身与轮胎转到的动画（你会看到基本每一个动画都有四个版本的定义：原生版本/webkit【Chrome|Safari】/ms【为了向后兼容IE10】/moz【FireFox】）
代码如下:
/*定义动画：从-400px的位置移动到1600px的位置 */ @keyframes carAnimation { 0% { left:-400px; } /* 指定初始位置，0%等同于from*/ 100% { left:1600px; } /* 指定最终位置,100%等同于to*/ } /* Safari and Chrome */ @-webkit-keyframes carAnimation { 0% {left:-400px; } 100% {left:1600px; } } /* Firefox */ @-moz-keyframes carAnimation { 0% {left:-400; } 100% {left:1600px; } } /*IE暂不支持,此处定义是为了向后兼容IE10*/ @-ms-keyframes carAnimation { 0% {left:-400px; } 100%{left:1600px; } } @keyframes tyreAnimation { 0% {transform: rotate(0); } 100% {transform: rotate(1800deg); } } @-webkit-keyframes tyreAnimation { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(1800deg); } } @-moz-keyframes tyreAnimation { 0% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(1800deg); } } @-ms-keyframes tyreAnimation { 0% { -ms-transform: rotate(0); } 100% { -ms-transform: rotate(1800deg); } } #container { position:relative; width:100%; height:600px; overflow:hidden; /*这个很重要*/ } #car { position:absolute; /*汽车在容器中采用绝对定位*/ width:400px; height:210px; /*汽车的总高度，包括轮胎和底盘*/ z-index:1; /*让汽车在背景的上方*/ top:300px; /*距顶端的距离(y轴)*/ left:50px; /*距左侧的距离(x轴)*/ /*以下内容赋予该元素预先定义的动画及相关属性*/ -webkit-animation-name:carAnimation; /*名称*/ -webkit-animation-duration:10s; /*持续时间*/ -webkit-animation-iteration-count:infinite; /*迭代次数-无限次*/ -webkit-animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/ -moz-animation-name:carAnimation; /*名称*/ -moz-animation-duration:10s; /*持续时间*/ -moz-animation-iteration-count:infinite; /*迭代次数-无限次*/ -moz-animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/ -ms-animation-name:carAnimation; /*名称*/ -ms-animation-duration:10s; /*持续时间*/ -ms-animation-iteration-count:infinite; /*迭代次数-无限次*/ -ms-animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/ animation-name:carAnimation; /*名称*/ animation-duration:10s; /*持续时间*/ animation-iteration-count:infinite; /*迭代次数-无限次*/ animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/ } /*车身*/ #chassis { position:absolute; width:400px; height:130px; background:#FF9900; border: 2px solid #FF6600; } /*轮胎*/ .tire { z-index:1; /*同上，轮胎也应置于背景的上方*/ position:absolute; bottom:0; border-radius:60px; /*圆半径*/ height:120px; /* 2*radius=height */ width:120px; /* 2*radius=width */ background:#0099FF; /*填充色*/ border:1px solid #3300FF; -webkit-animation-name:tyreAnimation; -webkit-animation-duration:10s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -moz-animation-name:tyreAnimation; -moz-animation-duration:10s; -moz-animation-iteration-count:infinite; -moz-animation-timing-function:linear; -ms-animation-name:tyreAnimation; -ms-animation-duration:10s; -ms-animation-iteration-count:infinite; -ms-animation-timing-function:linear; animation-name:tyreAnimation; animation-duration:10s; animation-iteration-count:infinite; animation-timing-function:linear; } #fronttire { right:20px; /*设置右边的轮胎距离边缘的距离为20*/ } #backtire { left:20px; /*设置左边的轮胎距离边缘的距离为20*/ } #grass { position:absolute; /*背景绝对定位在容器中*/ width:100%; height:130px; bottom:0; /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */ background:linear-grdaient(bottom,#33CC00,#66FF22); background:-webkit-linear-gradient(bottom,#33CC00,#66FF22); background:-moz-linear-gradient(bottom,#33CC00,#66FF22); background:-ms-linear-gradient(bottom,#33CC00,#66FF22); } .hr,.vr { position:absolute; background:#3300FF; } .hr { height:1px; width:100%; /*轮胎的水平线*/ left:0; top:60px; } .vr { width:1px; height:100%; /*轮胎的垂直线*/ left:60px; top:0; }
3.JQuery与CSS3 这是一个效果与兼容性俱佳的方式（特别对于IE9暂不支持CSS3而言） HTML代码（可以看到与CSS3中的HTML代码并无不同）：
代码如下:
<html> <head> <meta charset="UTF-8" /> <title>Animations in HTML5 using CSS3 animations</title> </head> <body> <div id="container"> <div id="car"> <div id="chassis"></div> <div id="backtire" > <div ></div> <div ></div> </div> <div id="fronttire" > <div ></div> <div ></div> </div> </div> <div id="grass"></div> </div> <footer></footer> </body> </html> CSS: <style> body { padding:0; margin:0; } #container { position:relative; width:100%; height:600px; overflow:hidden; /*这个很重要*/ } #car { position:absolute; /*汽车在容器中采用绝对定位*/ width:400px; height:210px; /*汽车的总高度，包括轮胎和底盘*/ z-index:1; /*让汽车在背景的上方*/ top:300px; /*距顶端的距离(y轴)*/ left:50px; /*距左侧的距离(x轴)*/ } /*车身*/ #chassis { position:absolute; width:400px; height:130px; background:#FF9900; border: 2px solid #FF6600; } /*轮胎*/ .tire { z-index:1; /*同上，轮胎也应置于背景的上方*/ position:absolute; bottom:0; border-radius:60px; /*圆半径*/ height:120px; /* 2*radius=height */ width:120px; /* 2*radius=width */ background:#0099FF; /*填充色*/ border:1px solid #3300FF; -o-transform:rotate(0deg); /*旋转(单位：度)*/ -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); } #fronttire { right:20px; /*设置右边的轮胎距离边缘的距离为20*/ } #backtire { left:20px; /*设置左边的轮胎距离边缘的距离为20*/ } #grass { position:absolute; /*背景绝对定位在容器中*/ width:100%; height:130px; bottom:0; /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */ background:linear-grdaient(bottom,#33CC00,#66FF22); background:-webkit-linear-gradient(bottom,#33CC00,#66FF22); background:-moz-linear-gradient(bottom,#33CC00,#66FF22); background:-ms-linear-gradient(bottom,#33CC00,#66FF22); } .hr,.vr { position:absolute; background:#3300FF; } .hr { height:1px; width:100%; /*水平线*/ left:0; top:60px; } .vr { width:1px; height:100%; /*垂直线*/ left:60px; top:0; } </style>
JS代码： 首先引入在线API：
代码如下:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
实现动画代码（相当简洁）：
代码如下:
<script> $(function(){ var rot=0; var prefix=$('.tire').css('-o-transform')?'-o-transform':($('.tire').css('-ms-transform')?'-ms-transform':($('.tire').css('-moz-transform')?'-moz-transform':($('.tire').css('-webkit-transform')?'-webkit-transform':'transform'))); var origin={ /*设置我们的起始点*/ left:-400 }; var animation={ /*该动画由jQuery执行*/ left:1600 /*设置我们将移动到的最终位置*/ }; var rotate=function(){ /*该方法将被旋转的轮子调用*/ rot+=2; $('.tire').css(prefix,'rotate('+rot+'deg)'); }; var options={ /*将要被jQuery使用的参数*/ easing:'linear', /*指定速度，此处只是线性，即为匀速*/ duration:10000, /*指定动画持续时间*/ complete:function(){ $('#car').css(origin).animate(animation,options); }, step:rotate }; options.complete(); }); </script>
六、世界动画日宣传文字？
1892年的10月28日，一个叫埃米尔·雷诺的法国人用他发明的一种叫“活动视镜”的动画装置，在巴黎葛莱凡蜡人馆公开放映“影戏”，这就是现代动画的前身。 为了纪念这一历史性的事件，世界动画协会组织（ASIFA）把世界动画日定在每年的10月28日，世界各地的动画爱好者们将在这一天共同庆祝他们自己的节日。这个活动今年已经是第十届了，不过在我们国家才是第一次举办这样的活动。今年中国的世界动画日，由世界动画协会中国代表处（ASIFA-CHINA）发起，相信会在这一天给大家带来一场精美绝伦的动画盛宴！不容错过哦~
七、ppt动画文字播放顺序？
1.首先在我们在ppt当中将需要动画效果出场的文字选中，右键点击自定义动画。
2.这时候页面右边出现了自定义动画的相关选项，我们将开始时设置为单击时，方向选择自底部，速度设置为快速。这时候就完成了第一段文字的动画效果。
3.然后将光标选中下一段需要添加动画的文字，在右边的添加效果页面选择一个新的动画效果，将开始设置为之后就可以了。
4.当然你也可以同样将第二段文字的开始选项设置为单击时。这样的话文字就不会在第一段文字弹出以后自动出现，而是在鼠标单击后再次出现，具体设置结果看用户需求而定。
5.之后将每一段的文字自定义动画效果的开始都设置为之后就可以让文字在ppt里一段一段出来了。你还可以设置更多的动画效果来让文字出场更加炫酷。
八、文字动画算原创吗？
文字动画如果富有创意，内容丰富，还是可以算原创的，具体情况要看平台的规则。
九、音频转文字，生成文字动画视频，文字识别软件？
不好意思，我暂时对这一块的问题不太了解，如果我知道了就告诉你。
十、文字转动画视频的app？
文字动画视频制作app是一款专业的视频剪辑软件，拥有众多剪辑功能，集视频特效、视频滤镜、视频裁剪、视频字幕、视频合成等功能与一身，让您轻松制作明星同款视频大片。