适当地利用CSS的box-shadow可以构造图形,然后可以对构造的图形添加动画效果。下面我们通过移动的眼珠子、圆珠一二三、一分为四、四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使用方法。

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

box-shadow: h-shadow v-shadow blur spread color inset;

其中,属性值h-shadow为必需,表示水平阴影的位置,它允许负值;v-shadow也为必需,表示垂直阴影的位置,也允许负值:blur可选,表示模糊距离;spread可选,给定阴影的尺寸;color可选,表示阴影的颜色;inset    可选,表示将外部阴影 (outset) 改为内部阴影。

1.移动的眼珠子

设页面中有<div class="shape"></div>,若为. shape设置样式规则如下:

.shape

{

width: 96px;

height: 64px;

border-radius: 50%;

background:#FFFAFA;

box-shadow: -105px 0 0 0px #FFFAFA;

position: relative;

margin-left:105px;

}

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

图1  两个椭圆

再定义样式. Shape:after如下:

.shape:after

{

content: "";

width: 0;

height: 0;

border-radius: 50%;

left: 35%;

top: 30%;

position: absolute;

border:12px solid #000;

box-shadow: -102px 0 0 0 #000;

}

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

图2  两颗眼珠子

为眼珠子中的黑点定义关键帧,使得它移动起来。编写的HTML文件内容如下。

<!DOCTYPE html>
<html>
<head>
<title>移动的眼珠子</title>
<style>
.container
{
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.shape
{
width: 96px;
height: 64px;
border-radius: 50%;
background:#FFFAFA;
box-shadow: -105px 0 0 0px #FFFAFA;
position: relative;
margin-left:105px;
}
.shape:after
{
content: "";
width: 0;
height: 0;
border-radius: 50%;
left: 35%;
top: 30%;
position: absolute;
border:12px solid #000;
box-shadow: -102px 0 0 0 #000;
animation: move 0.8s linear infinite alternate;
}
@keyframes move
{
0% { left: 0; }
100% { left: 55px; }
}
</style>
</head>
<body>
<div class="container">
<div class="shape"></div>
</div>
</body>
</html>

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

图3  移动的眼珠子(双眼)

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

<!DOCTYPE html>
<html>
<head>
<title>移动的眼珠子</title>
<style>
.container
{
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.shape
{
position: relative;
animation: 2s anim1 infinite;
}
.shape:before
{
content: '';
display: block;
overflow:hidden;
width: 120px;
height: 120px;
border-radius: 80% 20%;
background:#fff;
border: 3px solid currentcolor;
border-width: 3px 1.5px 1.5px 3px;
transform: rotate(45deg);
}
.shape:after
{
content: '';
display: block;
width:30px;
height: 30px;
position: absolute;
background: #000;
top: 40px;
left: 60%;
border-radius: 50%;
box-shadow: -4px 4px 0 10px #191970;
animation: 2s anim2 linear infinite;
}
@keyframes anim1
{
0%, 30%, 100% { transform: scaleY(1); }
10% { transform: scaleY(0); }
}
@keyframes anim2
{
0%, 100% { left:60%; }
30% { left:10%; }
50% { left:80%; }
}
</style>
</head>
<body>
<div class="container">
<div class="shape"></div>
</div>
</body>
</html>

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

图4  移动的眼珠子(单眼)

2.圆珠一二三

实现这样一个动画效果:一个大圆环每翻动一次,里面增加一颗珠子,最多可增加到三颗。编写如下的HTML文件。

<!DOCTYPE html>
<html>
<head>
<title>圆珠一二三</title>
<style>
.container
{
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.shape
{
position: relative;
width: 160px;
height: 160px;
border: 8px solid #f0f;
border-radius: 50%;
animation: anim1 1.25s infinite -0.3s;
}
.shape:after
{
content: '';
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width: 0;
height: 0;
border: 20px solid #f00;
border-radius: 50%;
transform: translate(-40px);
animation: anim2 5s infinite steps(1);
}
@keyframes anim1
{
0% { transform: rotateX(0deg); }
100% { transform: rotateX(180deg); }
}
@keyframes anim2
{
0% { opacity: 0; }
25% { opacity: 1; }
50% { box-shadow: 40px 0 0 #0f0; }
75% { box-shadow: 40px 0 0 #0f0, 80px 0 0 #00f; }
}
</style>
</head>
<body>
<div class="container">
<div class="shape"></div>
</div>
</body>
</html>

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

图5  圆珠一二三

3.一分为四

将一个圆球向上下左右四个方向生成四个同样的圆球,四个圆球采用box-shadow属性设置。编写如下的HTML文件。

<!DOCTYPE html>
<html>
<head>
<title>一分为四</title>
<style>
.container
{
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.shape
{
position: relative;
width: 30px;
height: 30px;
background: #f0f;
border-radius: 50%;
animation: anim 2s linear infinite;
}
@keyframes anim
{
0% { opacity: 0; }
15% { opacity: 1; }
25% { background:#d8d8d8; }
100%
{
background:#d8d8d8;
box-shadow: -80px 0 0 #f0f, 80px 0 0 #f0f,0 80px 0 0 #f0f,0 -80px 0 0 #f0f;
}
}
</style>
</head>
<body>
<div class="container">
<div class="shape"></div>
</div>
</body>
</html>

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

图6  圆球一分为四

若修改关键帧定义为:

@keyframes anim

{

0%,100%   { box-shadow: 0 0 0 #f0f; }

25%  { box-shadow: -80px 0 0 #f0f, 80px 0 0 #f0f; }

50%  { box-shadow: 0 0 0 #f0f; }

75%  { box-shadow: 0 80px 0 0 #f0f,0 -80px 0 0 #f0f; }

}

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

图7  圆球一分为二

4.四个小圆旋转扩散

设页面中有<div class="shape"></div>,若为. shape设置样式规则如下:

.shape

{

position: relative;

width: 30px;

height: 30px;

border-radius: 50%;

box-shadow: -30px -30px 0 #f0f, 30px -30px 0 #f0f,

30px 30px  0 #f0f,-30px 30px 0 #f0f;

}

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

图8  四个小圆

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

box-shadow: 60px -60px 0 #f0f,60px 60px 0 #f0f,-60px 60px 0 #f0f,-60px -60px 0 #f0f;

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

编写的HTML文件内容如下。

<!DOCTYPE html>
<html>
<head>
<title>四小圆旋转扩散</title>
<style>
.container
{
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.shape
{
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
animation: anim 1s linear infinite;
}
@keyframes anim
{
0% { box-shadow: -30px -30px 0 #f0f, 30px -30px 0 #f0f,30px 30px 0 #f0f,-30px 30px 0 #f0f; }
100%
{
box-shadow: 60px -60px 0 #f0f,60px 60px 0 #f0f,-60px 60px 0 #f0f,-60px -60px 0 #f0f; }
}
</style>
</head>
<body>
<div class="container">
<div class="shape"></div>
</div>
</body>
</html>

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

图9  四小圆旋转扩散

CSS动画实例:移动的眼珠子的更多相关文章

  1. CSS动画实例

    上一篇讲过css动画transform transition的语法,这一节展示自己做的几个小例子加深印象 1. 线条动画效果 代码:最外层div包含2个小的div : a和b.   a有左右边框(高度 ...

  2. CSS动画实例:太极图在旋转

    利用CSS可以构造出图形,然后可以对构造的图形添加动画效果.下面我们通过旋转的太极图.放大的五角星.跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法. 1.旋转的太极图 设页面中有<div ...

  3. CSS动画实例:小圆球的海洋

    CSS背景属性用于定义HTML元素的背景,在CSS提供的背景属性中, background-image:指定要使用的一个或多个背景图像: background-color:指定要使用的背景颜色: ba ...

  4. CSS动画实例:旋转的圆角正方形

    在页面中放置一个类名为container的层作为效果呈现容器,在该层中再定义十个名为shape的层层嵌套的子层,HTML代码描述如下: <div class="container&qu ...

  5. CSS动画实例:一颗躁动的心

    在页面中放置一个类名为container的层作为盛放心心的容器,在该层中再定义一个名为heart的子层,HTML代码描述如下: <div class="container"& ...

  6. CSS动画实例:跳跃的字符

    1.翻转的字符 在页面中放置一个类名为container的层作为容器,在该层中放置5个字符区域,HTML代码描述如下: <div class="container"> ...

  7. CSS动画实例:Loading加载动画效果(三)

    3.小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...

  8. CSS动画实例:升空的气球

    1.制作一个气球 设页面中有<div class="balloon"></div>,为. balloon设置样式规则如下: .balloon { heigh ...

  9. CSS动画实例:行星和卫星

    设页面中有<div class=" planet "></div>,用来绘制一个行星和卫星图形.这个图形包括三部分:行星.卫星和卫星旋转的轨道.定义. pl ...

随机推荐

  1. HTTP的实体数据

      数据类型表示实体数据的内容是什么,使用的是MIME    type,相关的头字段是Accept和Content-Type:  text:即文本格式的可读数据,我们最熟悉的应该就是text/html ...

  2. java基础(五)--基本数据类型、占用字节、数值范围

    一.Java基本数据类型 基本数据类型有8种:byte.short.int.long.float.double.boolean.char 分为4类:整数型.浮点型.布尔型.字符型. 整数型:byte. ...

  3. 【Gin-API系列】需求设计和功能规划(一)

    场景需求 数据库存储2个模型,每个模型都有一个或多个IP字段,需要通过 Golang Http Api(Restful Api) 返回 IP 信息. 模型1 - 服务器 ID 主机名 IP 内存大小 ...

  4. 统计一个16位二进制数中1的个数,并将结果以十六进制形式显示在屏幕上,用COM格式实现。

    问题 统计一个16位二进制数中1的个数,并将结果以十六进制形式显示在屏幕上,用COM格式实现. 代码 code segment assume cs:code org 100h main proc ne ...

  5. Python File next() 方法

    概述 next() 方法在文件使用迭代器时会使用到,在循环中,next()方法会在每次循环中调用,该方法返回文件的下一行,如果到达结尾(EOF),则触发 StopIteration高佣联盟 www.c ...

  6. PHP utf8_encode() 函数

    定义和用法 utf8_encode() 函数把 ISO-8859-1 字符串编码为 UTF-8.高佣联盟 www.cgewang.com Unicode 是全球标准,已经发展到能够通过每个字符/符号的 ...

  7. Python编程入门(第3版) PDF|百度网盘下载内附提取码

    Python编程入门(第3版)是图文并茂的Python学习参考书,书中并不包含深奥的理论或者高级应用,而是以大量来自实战的例子.屏幕图和详细的解释,用通俗易懂的语言结合常见任务,对Python的各项基 ...

  8. SparkSQL & Spark on Hive & Hive on Spark

    刚开始接触Spark被Hive在Spark中的作用搞得云里雾里,这里简要介绍下,备忘. 参考:https://blog.csdn.net/zuochang_liu/article/details/82 ...

  9. 理解JavaScript的原型链

    1. 什么是对象 在JavaScript中,对象是属性的无序集合,每个属性存放一个原始值.对象或函数. 1.1 创建对象 在JavaScript中创建对象的两种方法: ① 字面上: var myObj ...

  10. JS 本地存储笔记

    本地存储     1.数据存储在用户浏览器中的     2.设置.读取方便.甚至刷新都不会丢失数据     3.容量比较大,sessionStorange约5M,localstorage约20M    ...