设页面中有<div class="circle "></div>，定义.circle的样式规则绘制一个半径为75px，边框厚度为4px的圆，再定义关键帧，使得圆从不可见到可见，再到放大后又不可见。

编写的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%;

}

.circle

{

width:150px;

height:150px;

border: 4px solid #000;

border-radius: 50%;

animation: anim 1s ease-out infinite;

}

@keyframes anim

{

0%  { transform: scale(0);   opacity: 0;  }

50% { opacity: 1;   }

100% { transform: scale(1);  opacity: 0;  }

}

</style>

</head>

<body>

<div  class="container">

<div class="circle"></div>

</div>

</body>

</html>

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

图1  圆的放大（一）

若将上面文件中的“border: 4px solid #000;”改写为“background: #000;”，则呈现出如图2所示的动画效果。

图2  圆的放大（二）

在图1的基础上再增加一个圆，并且新增加的圆延迟0.5s执行动画过程。编写如下的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%;

}

.circle

{

position: relative;

width:150px;

height:150px;

border: 0 solid transparent;

border-radius: 50%;

}

.circle:before, .circle:after

{

content: '';

border: 10px solid #000;

border-radius: 50%;

width: inherit;

height: inherit;

position: absolute;

top: 0;

left: 0;

animation: anim 1s linear infinite;

opacity: 0;

}

.circle:after

{

animation-delay: .5s;

}

@keyframes anim

{

0%  { transform: scale(0);   opacity: 0;  }

50% { opacity: 1;   }

100% { transform: scale(1);  opacity: 0;  }

}

</style>

</head>

<body>

<div  class="container">

<div class="circle"></div>

</div>

</body>

</html>

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

图3  两个圆的放大（一）

同样，若将上面文件中的“border: 10px solid #000;”改写为“background: #000;”，则呈现出如图4所示的动画效果。

图4  两个圆的放大（二）

增加到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%;

}

.circle

{

position:absolute;

width:60px;

height:60px;

border-radius:50%;

background-color:#666;

}

.circle:nth-child(1)

{

animation:anim 3s linear infinite;

}

.circle:nth-child(2)

{

animation:anim 3s linear 0.8s infinite;

}

.circle:nth-child(3)

{

animation:anim 3s linear 1.6s infinite;

}

@keyframes anim

{

from  {  opacity:1;  transform:scale(0);  }

to    {  opacity:0;  transform:scale(4);  }

}

</style>

</head>

<body>

<div  class="container">

<div class='circle'></div>

<div class='circle'></div>

<div class='circle'></div>

<div class='circle'></div>

</div>

</body>

</html>

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

图5  圆的涟漪扩散

CSS动画实例：圆的涟漪扩散的更多相关文章

  1. CSS动画实例

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

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

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

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

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

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

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

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

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

  6. 每天一点点之css - 动画-一个圆绕着另一个圆动(绕着轨迹运动)

    最近要开发一个类似星河的效果,需要小圆绕着一定的轨迹运动,这个时候我首先想到的是使用canvas来实现,在实现过程中发现这个实现起来不是很灵活,然后想到css3有动画也可以实现,下面是效果 注:图2是 ...

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

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

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

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

  9. CSS动画实例：跳跃的字符

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

随机推荐

  1. ken桑带你读源码 之scrapy pipelines\images.py

    大家先看看 http://www.cnblogs.com/attitudeY/p/7078559.html 下面我做一些补充   最新版本1.1 已经支持 下载路径保存到  item   48行    ...

  2. JPA第二天

    学于黑马和传智播客联合做的教学项目 感谢 黑马官网 传智播客官网 微信搜索"艺术行者",关注并回复关键词"springdata"获取视频和教程资料! b站在线视 ...

  3. Django学习路

    1.脚本不能随便运行,没准 linux 运行完就上不去了 2.pip 在 linux 上 写 pip3 同理 python 写为 python3 3.在 pycharm 上安装库之后,在命令提示符中依 ...

  4. 一图看懂华为云DevCloud如何应对敏捷开发的测试挑战

    作为敏捷开发中测试团队的一员,在微服务测试过程中,你是不是也遇到同样困惑:服务不具备独立验证能力.自动化用例开发效率很低等? 华为云DevCloud API全场景测试技术来支招~围绕API的全场景,打 ...

  5. C/C++编程笔记：C语言自增(++)和自减(--)运算符详解，笔记分享

    一个整数类型的变量自身加 1 可以这样写: a = a + 1; 或者 a += 1; 不过,C语言还支持另外一种更加简洁的写法,就是: a++; 或者 ++a; 这种写法叫做自加或自增,意思很明确, ...

  6. 牛客练习赛60 E 旗鼓相当的对手

    LINK:旗鼓相当的对手 考场上遇到这种简单的树形dp优化题目我真的不一定能写出来.. 虽然这道题思路很简单 设f[i][j]表示距i距离为j的点的个数 g[i][j]表示距i距离为j的点权和. 可以 ...

  7. Qt 中十六进制字节流转换为Base64编码

    在Qt中,在网络通信时,有时需要将16进制字节流转换为Base64编码传输,在Qt的QByteArray类中,提供了与Base64转换的接口: //16进制字节流转为Base64 QByteArray ...

  8. java_环境搭建、变量的使用

    java_环境搭建.变量的使用 Java语言开发环境搭建 1. Java虚拟机——JVM JVM(Java Virtual Machine ):Java虚拟机,简称JVM,是运行所有Java程序的假想 ...

  9. 基于索引的QA问答对匹配流程梳理

    知识库(主要是标准的QA信息)匹配需求是对已经梳理出的大量标准QA对信息进行匹配,找出最符合用户问题的QA对进行回复,拆分主要的处理流程主要为如下两点: 标准QA信息入库索引: 通过对用户提出的问题进 ...

  10. Integer.valueOf源码分析

    1. 引言 在牛客网上看到这样一道题目,判断一下打印的结果 public static void main(String[] args){ Integer i1 = 128; Integer i2 = ...