CSS动画实例移动的眼珠子.docx

上传人：b****1 文档编号：1655988 上传时间：2023-05-01 格式：DOCX 页数：16 大小：367.61KB

下载相关举报

第1页 / 共16页

第2页 / 共16页

第3页 / 共16页

第4页 / 共16页

第5页 / 共16页

第6页 / 共16页

第7页 / 共16页

第8页 / 共16页

第9页 / 共16页

第10页 / 共16页

第11页 / 共16页

第12页 / 共16页

第13页 / 共16页

第14页 / 共16页

第15页 / 共16页

第16页 / 共16页

亲，该文档总共16页，全部预览完了，如果喜欢就下载吧！

下载资源

资源描述

CSS动画实例移动的眼珠子.docx

《CSS动画实例移动的眼珠子.docx》由会员分享，可在线阅读，更多相关《CSS动画实例移动的眼珠子.docx（16页珍藏版）》请在冰点文库上搜索。

CSS动画实例移动的眼珠子.docx

CSS动画实例移动的眼珠子

CSS动画实例：

移动的眼珠子

适当地利用CSS的box-shadow可以构造图形，然后可以对构造的图形添加动画效果。

下面我们通过移动的眼珠子、圆珠一二三、一分为四、四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使用方法。

box-shadow属性的基本格式为：

box-shadow:

h-shadowv-shadowblurspreadcolorinset;

其中，属性值h-shadow为必需，表示水平阴影的位置，它允许负值；v-shadow也为必需，表示垂直阴影的位置，也允许负值：

blur可选，表示模糊距离；spread可选，给定阴影的尺寸；color可选，表示阴影的颜色；inset可选，表示将外部阴影（outset）改为内部阴影。

1．移动的眼珠子

设页面中有

，若为.shape设置样式规则如下：

.shape

{

width:

96px;

height:

64px;

border-radius:

50%;

background:

#FFFAFA;

box-shadow:

-105px000px#FFFAFA;

position:

relative;

margin-left:

105px;

}

可在页面中显示如图1所示的图形，这两个椭圆中前面的一个是由box-shadow属性设置的。

图1两个椭圆

再定义样式.Shape：

after如下：

.shape:

after

{

content:

"";

width:

height:

border-radius:

50%;

left:

35%;

top:

30%;

position:

absolute;

border:

11pxsolid#000;

box-shadow:

-102px000#000;

}

为表示眼珠的椭圆中加上两个黑点，可在页面中显示如图2所示的图形。

图2两颗眼珠子

为眼珠子中的黑点定义关键帧，使得它移动起来。

编写的HTML文件内容如下。

DOCTYPEhtml>

移动的眼珠子

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图3所示的动画效果。

图3移动的眼珠子（双眼）

为实现眼珠子移动动画效果，还可以编写如下的HTML文件。

DOCTYPEhtml>

移动的眼珠子

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图4所示的动画效果。

图4移动的眼珠子（单眼）

2．圆珠一二三

实现这样一个动画效果：

一个大圆环每翻动一次，里面增加一颗珠子，最多可增加到三颗。

编写如下的HTML文件。

DOCTYPEhtml>

圆珠一二三

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图5所示的动画效果。

图5圆珠一二三

3．一分为四

将一个圆球向上下左右四个方向生成四个同样的圆球，四个圆球采用box-shadow属性设置。

编写如下的HTML文件。

DOCTYPEhtml>

一分为四

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图6所示的动画效果。

图6圆球一分为四

若修改关键帧定义为：

@keyframesanim

{

0%,100%{box-shadow:

000#f0f;}

25%{box-shadow:

-80px00#f0f,80px00#f0f;}

50%{box-shadow:

000#f0f;}

75%{box-shadow:

080px00#f0f,0-80px00#f0f;}

}

则呈现出如图7所示的动画效果。

图7圆球一分为二

4．四个小圆旋转扩散

设页面中有，若为.shape设置样式规则如下：

.shape

{

position:

relative;

width:

30px;

height:

30px;

border-radius:

50%;

box-shadow:

-30px-30px0#f0f,30px-30px0#f0f,

30px30px0#f0f,-30px30px0#f0f;

}

可在页面中显示如图8所示的图形，这4个小圆均是由box-shadow属性设置的。

图8四个小圆

若将图8的四个小圆作为初始帧，用

box-shadow:

60px-60px0#f0f,60px60px0#f0f,

-60px60px0#f0f,-60px-60px0#f0f;

设置的另外4个圆作为终止帧，它和初始帧相比，四个小圆的大小不变，但位置发生了变化，这个变化产生的效果是小圆会旋转扩散。

编写的HTML文件内容如下。

DOCTYPEhtml>

四小圆旋转扩散

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图9所示的动画效果。

图9四小圆旋转扩散

展开阅读全文