CSS动画实例移动的眼珠子Word下载.docx
- 文档编号:3098189
- 上传时间:2023-05-01
- 格式:DOCX
- 页数:16
- 大小:367.61KB
CSS动画实例移动的眼珠子Word下载.docx
《CSS动画实例移动的眼珠子Word下载.docx》由会员分享,可在线阅读,更多相关《CSS动画实例移动的眼珠子Word下载.docx(16页珍藏版)》请在冰点文库上搜索。
/div>
,若为.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:
"
"
;
0;
left:
35%;
top:
30%;
absolute;
border:
11pxsolid#000;
-102px000#000;
}
为表示眼珠的椭圆中加上两个黑点,可在页面中显示如图2所示的图形。
图2两颗眼珠子
为眼珠子中的黑点定义关键帧,使得它移动起来。
编写的HTML文件内容如下。
!
DOCTYPEhtml>
html>
head>
title>
移动的眼珠子<
/title>
style>
.container
margin:
0auto;
300px;
300px;
display:
flex;
justify-content:
center;
align-items:
#d8d8d8;
4pxsolidrgba(255,0,0,0.9);
10%;
animation:
move0.8slinearinfinitealternate;
@keyframesmove
0%{left:
100%{left:
55px;
/style>
/head>
body>
container"
<
/body>
/html>
在浏览器中打开包含这段HTML代码的html文件,可以呈现出如图3所示的动画效果。
图3移动的眼珠子(双眼)
为实现眼珠子移动动画效果,还可以编写如下的HTML文件。
2sanim1infinite;
before
'
'
block;
overflow:
hidden;
120px;
80%20%;
#fff;
1pxsolidcurrentcolor;
border-width:
3px1.5px1.5px3px;
transform:
rotate(45deg);
30px;
30px;
#000;
40px;
60%;
-4px4px010px#191970;
2sanim2linearinfinite;
@keyframesanim1
0%,30%,100%{transform:
scaleY
(1);
10%{transform:
scaleY(0);
@keyframesanim2
0%,100%{left:
60%;
30%{left:
10%;
50%{left:
80%;
在浏览器中打开包含这段HTML代码的html文件,可以呈现出如图4所示的动画效果。
图4移动的眼珠子(单眼)
2.圆珠一二三
实现这样一个动画效果:
一个大圆环每翻动一次,里面增加一颗珠子,最多可增加到三颗。
编写如下的HTML文件。
圆珠一二三<
160px;
8pxsolid#f0f;
anim11.25sinfinite-0.3s;
0;
right:
bottom:
auto;
20pxsolid#f00;
translate(-40px);
anim25sinfinitesteps
(1);
0%{transform:
rotateX(0deg);
100%{transform:
rotateX(180deg);
0%{opacity:
25%{opacity:
1;
50%{box-shadow:
40px00#0f0;
75%{box-shadow:
40px00#0f0,80px00#00f;
在浏览器中打开包含这段HTML代码的html文件,可以呈现出如图5所示的动画效果。
图5圆珠一二三
3.一分为四
将一个圆球向上下左右四个方向生成四个同样的圆球,四个圆球采用box-shadow属性设置。
一分为四<
#f0f;
anim2slinearinfinite;
@keyframesanim
15%{opacity:
25%{background:
100%
{
background:
-80px00#f0f,80px00#f0f,080px00#f0f,0-80px00#f0f;
}
在浏览器中打开包含这段HTML代码的html文件,可以呈现出如图6所示的动画效果。
图6圆球一分为四
若修改关键帧定义为:
0%,100%{box-shadow:
000#f0f;
25%{box-shadow:
-80px00#f0f,80px00#f0f;
080px00#f0f,0-80px00#f0f;
则呈现出如图7所示的动画效果。
图7圆球一分为二
4.四个小圆旋转扩散
-30px-30px0#f0f,30px-30px0#f0f,
30px30px0#f0f,-30px30px0#f0f;
可在页面中显示如图8所示的图形,这4个小圆均是由box-shadow属性设置的。
图8四个小圆
若将图8的四个小圆作为初始帧,用
60px-60px0#f0f,60px60px0#f0f,
-60px60px0#f0f,-60px-60px0#f0f;
设置的另外4个圆作为终止帧,它和初始帧相比,四个小圆的大小不变,但位置发生了变化,这个变化产生的效果是小圆会旋转扩散。
四小圆旋转扩散<
anim1slinearinfinite;
0%{box-shadow:
-30px-30px0#f0f,30px-30px0#f0f,30px30px0#f0f,-30px30px0#f0f;
60px-60px0#f0f,60px60px0#f0f,-60px60px0#f0f,-60px-60px0#f0f;
在浏览器中打开包含这段HTML代码的html文件,可以呈现出如图9所示的动画效果。
图9四小圆旋转扩散
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS 动画 实例 移动 眼珠子
![提示](https://static.bingdoc.com/images/bang_tan.gif)