aTeacher - 博客园

CSS动画实例：跳跃的字符

摘要： 1．翻转的字符在页面中放置一个类名为container的层作为容器，在该层中放置5个字符区域，HTML代码描述如下： <div class="container"> <span>H</span> <span>E</span> <span>L</span> <span>L</span> <span> 阅读全文

posted @ 2020-08-15 06:17 aTeacher 阅读(1121) 评论(0) 推荐(1) 编辑

CSS动画实例：一颗躁动的心

摘要：在页面中放置一个类名为container的层作为盛放心心的容器，在该层中再定义一个名为heart的子层，HTML代码描述如下： <div class="container"> <div class="heart"></div> </div> 分别为container和heart定义CSS样式规则如下阅读全文

posted @ 2020-08-14 05:51 aTeacher 阅读(903) 评论(0) 推荐(1) 编辑

CSS动画实例：旋转的叶片

摘要：在页面中放置一个类名为container的层作为容器，在该层中再定义一个名为shape的子层，HTML代码描述如下： <div class="container"> <div class="shape"></div> </div> 分别为container和shape定义CSS样式规则如下： .co 阅读全文

posted @ 2020-08-13 06:44 aTeacher 阅读(878) 评论(0) 推荐(0) 编辑

CSS动画实例：旋转的圆角正方形

摘要：在页面中放置一个类名为container的层作为效果呈现容器，在该层中再定义十个名为shape的层层嵌套的子层，HTML代码描述如下： <div class="container"> <div class="shape"><div class="shape"><div class="shape">< 阅读全文

posted @ 2020-08-13 04:30 aTeacher 阅读(888) 评论(0) 推荐(0) 编辑

CSS动画基础知识

摘要： CSS动画就是通过CSS （Cascading Style Sheet，层叠样式表）代码搭建的网页动画。它允许设计师和开发人员通过编辑网站的CSS代码来添加页面动画，从而轻松取代传统动画图片或flash动画的设计方式。 transition（过渡）和animation（动画）是CSS3中的两种动画属阅读全文

posted @ 2020-08-12 06:18 aTeacher 阅读(942) 评论(0) 推荐(1) 编辑

CSS动画实例：图文切换

摘要：先准备好一张图片，在页面中放置一个类名为container的层作为图文容器，在该层中再定义两个层：一个类名为image-box的层放置图片，一个类名为text-desc的层放置文本描述，HTML代码描述如下： <div class="container"> <div class="image-box 阅读全文

posted @ 2020-08-09 18:56 aTeacher 阅读(1276) 评论(0) 推荐(1) 编辑

JavaScript小游戏实例：简单的键盘练习

摘要：键盘是一种常用的输入设备，灵活熟练地使用键盘进行输入是计算机用户需掌握的一门基本功。下面我们编写一个简单的键盘练习游戏。 1．刺破气泡交互式小动画在编写简单的键盘练习游戏之前，先设计一个简单地刺破气泡交互式小动画。在面板底部逐个上升一些气泡，用鼠标在某个气泡上单击，该气泡被刺破，刺破后的小气泡逐阅读全文

posted @ 2020-08-07 11:43 aTeacher 阅读(1547) 评论(0) 推荐(1) 编辑

JavaScript小游戏实例：统一着色

摘要：设计如下的简单小游戏。在面板（画布）中放置10行10列共100个小方块，每个小方块随机在5种颜色中选一种颜色进行着色，在面板的下方，放置对应的5种颜色色块，如图1所示。图1 “统一着色”游戏界面游戏要求通过每次对包含最左上角方块的相邻同色区域方块改变着色的方式，最终使得面板中的100个小方块着阅读全文

posted @ 2020-08-06 06:05 aTeacher 阅读(842) 评论(0) 推荐(0) 编辑

JavaScript动画实例：炸开的小球

摘要： 1．炸开的小球定义一个小球对象类Ball，它有6个属性：圆心坐标（x,y）、小球半径radius、填充颜色color、圆心坐标水平方向的变化量speedX、圆心坐标垂直方向的变化量speedY。 Ball类定义2个方法：绘制小球的方法draw()和小球位置发生变化的方法update()。定义一个阅读全文

posted @ 2020-08-04 17:29 aTeacher 阅读(916) 评论(0) 推荐(0) 编辑

JavaScript动画实例：烟花绽放迎新年

摘要：先编写一个烟花绽放的动画效果。放烟花时，一个烟花可分为两个阶段：（1）烟花上升到空中；（2）烟花炸开成碎片，炸开的碎片慢慢消散。为此抽象出两个对象类：Firework和Particle。其中，Firework用于表示一个烟花对象，Particle用于表示一个烟花炸开后的各碎片。 Firework 阅读全文

posted @ 2020-08-04 09:51 aTeacher 阅读(755) 评论(0) 推荐(0) 编辑

I am a teacher!

导航

公告