···
首页
···
开发工具
···
开发入门教程
···
网址导航
···
搜索
Ctrl K
动漫
定义动画
1. 定义动画,想要运行一个动画，就要先去定义一个动画 —— 鲁迅。,,那么我们就先来看看矩形图要怎么定义动画：,/* 清除浏览器默认边距 */,* { padding: 0; margin: 0; },,body {, /* 这段代码是为了居中显示，不是重点，...
适合过渡动画的场景
1. 适合过渡动画的场景,最典型的一个例子就是当鼠标移入时进行一些动画效果：,运行结果：, 此时用过渡动画既简单方便，效果又好。 ,不过眼尖同学可以发现CSS里面居然可以写中文，这是怎么回事呢？,原来是因为我们引入了一...
过渡动画和帧动画的区别
1. 开场白,上一章我们已经了解了雪碧图需要的基本CSS语法，那么这一章节我们将带领大家体验一下动画的语法，以及不同动画种类之间的区别。,动画通常分为两种形式：一种是过渡动画、另一种是帧动画。,2. 过渡动画,之前我们...
CSS 动画的定义
1. 开场白,入门了动画以后，就来看看应该如何在网页中写出一个动画吧！,万丈高楼平地起，学会了基础语法就可以充分发挥自己的想象力，做出各种千奇百怪的动画效果啦！,2. 动画的定义,如果学过一些编程语言的同学会知道，有...
调用动画
1. 调用动画,定义好了就可以去调用了，来看一下怎么调用：,/* 清除浏览器默认边距 */,* { padding: 0; margin: 0; },,body {, /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */, height: 100vh;, display...
适合用帧动画的场景
1. 适合用帧动画的场景,有时候想要的动画并不是缩小、放大或者变个颜色之类的这么简单，比如我们需要一个复杂的形变加上复杂的运动轨迹，此时过渡动画就有些相形见绌了。虽然 Canvas 或 SVG 能够实现复杂逻辑的动画效果，...
连接两个雪碧图的动画
这节课我们把案例放在最前面，供大家直接观看效果。,这么做的原因一方面是考虑到有些同学可能前面都没看完，直接就翻到最后一节看看写的是什么。,另一方面是本节课案例较为复杂，防止大家看的晕了就不想继续往下看了，所以...
