2020 年 8月随笔档案 - aTeacher

CSS动画实例：圆与圆的碰撞

摘要：在页面中放置9个<div class=” circle”></div>，定义每个.circle的样式规则，使得9个圆在页面中显示为半径依次相差20px的同心圆。定义关键帧anim，使得9个圆各自按给定的延迟沿左下角到右上角的直线移动，形成圆与圆碰撞的效果，碰撞后改变移动方向，从而保证里面的小圆一定在阅读全文

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

CSS动画基础：常用动画效果的设置

摘要：设页面中有<div class=”shape”></div>，若定义.shape的样式规则为： .shape { position: absolute; left:125px; top:75px; width: 150px; height: 150px; border-radius:10% 50% 阅读全文

posted @ 2020-08-30 18:36 aTeacher 阅读(2815) 评论(0) 推荐(2) 编辑

CSS动画实例：旋转的同心圆

摘要：设页面中有<div class=” wrap”></div>，若定义.wrap的样式规则为： .wrap { width: 200px; height: 100px; top:100px; left:100px; position: absolute; background-color:#ff0; 阅读全文

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

CSS动画实例：花瓣发光旋转

摘要：1．旋转的花瓣设页面中有<div class=” petal”></div>，若定义.shape的样式规则为： .petal { width:100px; height:100px; background-color:#f00; border-radius:0 100% 0 100%; } 可在页阅读全文

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

CSS图形基础：利用圆锥渐变绘制图形

摘要：1．圆锥渐变在CSS中，除了线性渐变（linear-gradient）和径向渐变（radial-gradient）外，还有一种渐变叫“圆锥渐变”。它是围绕中心点按照扇形方向进行旋转的渐变，而不是像径向渐变那样从中心点沿圆环向外慢慢辐射。圆锥渐变的调用格式为： background-image: 阅读全文

posted @ 2020-08-29 05:49 aTeacher 阅读(1042) 评论(0) 推荐(0) 编辑

CSS图形基础：利用径向渐变绘制图形

摘要：1．径向渐变 radial-gradient() 函数用于创建一个径向渐变的“图像”，其一般调用格式为： background-image: radial-gradient(shape size at position, start-color, ..., last-color); 其中，参数sha 阅读全文

posted @ 2020-08-28 05:23 aTeacher 阅读(1630) 评论(0) 推荐(0) 编辑

CSS图形基础：利用线性渐变绘制图形

摘要：1．线性渐变 linear-gradient() 函数用于创建一个线性渐变的“图像”。其一般调用格式为： background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 其中，参数direction可选，用来指阅读全文

posted @ 2020-08-27 05:10 aTeacher 阅读(1152) 评论(0) 推荐(0) 编辑

CSS动画实例：SierPinski地毯

摘要：设页面中有<div class=”shape”></div>，若定义.shape的样式规则为： .shape { width: 100px; height: 100px; background: conic-gradient(from 270deg at calc(100% / 3) calc(10 阅读全文

posted @ 2020-08-26 05:56 aTeacher 阅读(458) 评论(0) 推荐(0) 编辑

CSS动画实例：3D立方体

摘要：CSS3支持3D转换，与3D转换有关的属性有： transform：向元素应用 2D或3D 转换。 transform-origin：改变被转换元素的位置。 transform-style：规定被嵌套元素如何在3D空间中显示。 perspective：规定 3D 元素的透视效果。 perspecti 阅读全文

posted @ 2020-08-25 05:29 aTeacher 阅读(1236) 评论(1) 推荐(3) 编辑

CSS动画实例：圆的涟漪扩散

摘要：设页面中有<div class="circle "></div>，定义.circle的样式规则绘制一个半径为75px，边框厚度为4px的圆，再定义关键帧，使得圆从不可见到可见，再到放大后又不可见。编写的HTML文件如下。 <!DOCTYPE html> <html> <head> <title>圆阅读全文

posted @ 2020-08-24 05:16 aTeacher 阅读(4390) 评论(0) 推荐(0) 编辑

CSS动画实例：行星和卫星

摘要：设页面中有<div class=" planet "></div>，用来绘制一个行星和卫星图形。这个图形包括三部分：行星、卫星和卫星旋转的轨道。定义. planet的样式规则如下： .planet { position:absolute; top:80px; left:80px; height:10 阅读全文

posted @ 2020-08-23 11:46 aTeacher 阅读(780) 评论(0) 推荐(0) 编辑

CSS动画实例：小圆球的海洋

摘要：CSS背景属性用于定义HTML元素的背景，在CSS提供的背景属性中， background-image：指定要使用的一个或多个背景图像； background-color：指定要使用的背景颜色； background-position：指定背景图像的位置； background-size：指定背景图阅读全文

posted @ 2020-08-23 05:21 aTeacher 阅读(650) 评论(0) 推荐(0) 编辑

CSS图形基础：纯CSS绘制图形

摘要：为了在页面中利用CSS3绘制图形，在页面中定义 <div class="container"> <div class="shape"></div> </div> 其中，container作为显示图形的画布（容器），shape描述所绘制的图形。定义.container的样式规则如下： .contai 阅读全文

posted @ 2020-08-22 05:33 aTeacher 阅读(2363) 评论(0) 推荐(0) 编辑

CSS动画实例：移动的眼珠子

摘要：适当地利用CSS的box-shadow可以构造图形，然后可以对构造的图形添加动画效果。下面我们通过移动的眼珠子、圆珠一二三、一分为四、四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使用方法。 box-shadow属性的基本格式为： box-shadow: h-shadow v-sh 阅读全文

posted @ 2020-08-21 06:07 aTeacher 阅读(720) 评论(0) 推荐(0) 编辑

CSS动画实例：太极图在旋转

摘要：利用CSS可以构造出图形，然后可以对构造的图形添加动画效果。下面我们通过旋转的太极图、放大的五角星、跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法。 1．旋转的太极图设页面中有<div class="shape"></div>，若为. shape设置样式规则如下： .shape { widt 阅读全文

posted @ 2020-08-20 05:57 aTeacher 阅读(1687) 评论(0) 推荐(2) 编辑

CSS动画实例：升空的气球

摘要：1．制作一个气球设页面中有<div class="balloon"></div>，为. balloon设置样式规则如下： .balloon { height: 96px; width: 80px; background: hsla(0, 100%, 50%, 0.8); border-radius 阅读全文

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

CSS动画实例：Loading加载动画效果（三）

摘要：3．小圆型Loading 这类Loading动画的基本思想是：在呈现容器中定义1个或多个子层，再对每个子层进行样式定义，使得其均显示为一个实心圆形，最后编写关键帧动画控制，使得各个实心圆或者大小发生改变、或者平移、或者旋转。（1）小圆大小或透明度进行变化。例如，在container层中定义两个名阅读全文

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

CSS动画实例：Loading加载动画效果（二）

摘要：2．条状型Loading 这类Loading动画的基本思想是：在呈现容器中定义一个或多个子层，再对每个子层进行样式定义，使得其显示为一个条形或方形，最后编写关键帧动画控制，使得各个条形（或方形）的大小、位置、填充色等发生变化或者进行旋转。（1）多个竖条进行变化的加载效果。例如，编写如下的HTML 阅读全文

posted @ 2020-08-16 10:04 aTeacher 阅读(786) 评论(0) 推荐(1) 编辑

CSS动画实例：Loading加载动画效果（一）

摘要：一些网站或者APP在加载新东西的时候，往往会给出一个好看有趣的Loading图，大部分的Loading样式都可以使用CSS3制作出来，它不仅比直接使用gif图简单方便，还能节省加载时间和空间。下面介绍常见的一些Loading动画效果图的制作方法。 1．圆环型Loading 这类Loading动画的基阅读全文

posted @ 2020-08-16 06:10 aTeacher 阅读(2524) 评论(0) 推荐(1) 编辑

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 阅读(1125) 评论(0) 推荐(1) 编辑

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

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

posted @ 2020-08-14 05:51 aTeacher 阅读(907) 评论(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 阅读(880) 评论(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 阅读(892) 评论(0) 推荐(0) 编辑

CSS动画基础知识

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

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

CSS动画实例：图文切换

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

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

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

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

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

JavaScript小游戏实例：统一着色

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

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

JavaScript动画实例：炸开的小球

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

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

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

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

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

JavaScript动画实例：圆点的衍生

摘要：考虑如下的曲线方程： R=S*sqrt(n) α=n*θ X=R*SIN(α) Y=R*COS(α) 其中，S和θ可指定某一个定值。对n循环取0~999共1000个值，对于每个n，按照给定的坐标方程，求得一个坐标值(x,y)，然后以（x,y）为圆心绘制一个半径为6的圆，可以得到一个螺旋状的图形。编阅读全文

posted @ 2020-08-02 10:41 aTeacher 阅读(732) 评论(1) 推荐(1) 编辑

JavaScript动画实例：运动的字母特效

摘要：已知圆的坐标方程为： X=R*SIN(θ) Y=R*COS(θ) （0≤θ≤2π）给定初始坐标位置（X,Y），按照圆的坐标方程，从角度angle = 0开始，每间隔angleSpeed = 0.2求得一个坐标值(x,y)，将这个坐标值作为偏移变化量，分别加到初始坐标位置上，即在（X+x,Y+y）处阅读全文

posted @ 2020-08-01 11:01 aTeacher 阅读(596) 评论(0) 推荐(0) 编辑

导航

统计

公告

搜索

常用链接

随笔档案

08 2020 档案