设页面中有<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. VSCode package.json warning: Problems loading reference 'https://json.schemastore.org/package'...

    报错内容 Problems loading reference 'https://json.schemastore.org/package': Unable to load schema from ' ...

  2. 远光武汉研发中心区块链事业部Java面试总结

    面试在约定的时间准时进行,也是采用腾讯会议远程面试的方式.但是这是我第一次遇到面试官未打开摄像头的情况,后面经过沟通,双方都打开摄像头进行交流. 之前了解这个岗位主要是区块链相关的Java开发,所以事 ...

  3. 无线网络安全攻防实战进阶(杨哲) PDF|网盘下载内附提取码|

    面对当前国内企事业单位及soho无线网络的飞速发展.智能手机等便携式设备的广泛使用.无线网络犯罪案例日益递增的发展现状,<无线网络安全攻防实战进阶>作为<无线网络安全攻防实战> ...

  4. C/C++编程笔记：C语言NULL值和数字 0 值区别及NULL详解

    在学习C语言的时候,我们常常会碰到C语言NULL值和数字 0 ,很多小伙伴搞不清楚他们之间的一个区别,今天我们就了解一下他们之间的区别,一起来看看吧! 先看下面一段代码输出什么: 输出<null ...

  5. P2489 [SDOI2011]迷宫探险 概率dp

    LINK:迷宫探险 题目中要求在最优的策略下的最大概率 而并非期望概率. 一个坑点 题目中虽然没有明说 但是 探险者是知道地图的模样和每个陷阱的概率的. 所以才有最优策略一说. 最优策略尽管不知道可以 ...

  6. Pr剪辑

    目录 Pr剪辑教程 入门基础 创建序列类别 处理非正常序列 导出文件 导出设置 导入各类别素材 简单使用: 剪辑素材常用方法 剃刀工具 选择工具 波纹编辑工具 打入点和出点 剪辑速度 整个素材视频速度 ...

  7. Vue笔记（有点乱）

    Vue学习笔记(2019.7.31) 目录 Vue学习笔记(2019.7.31) vue 基本指令用法 v-cloak v-text v-html v-bind v-on 跑马灯 v-on v-mod ...

  8. Linux常用命令之用户权限管理chmod、chown、chgrp、umask命令讲解

    这节课我们重点来学习权限管理命令,说到权限大家可能第一时间能想到的就是读.写.执行 rwx 三种权限,在正式讲解权限命令之前,先简单的介绍一下rwx权限对于文件和目录的不同含义. 权限字符 权限 对文 ...

  9. LInux下Posix的传统线程示例

    简介 Linux线程是需要连接pthreat库,线程的使用比进程更灵活,需要注意的是线程间的互斥,或者说是资源共享问题. C++11之后,C++标准库也引入了线程,并且使用非常方便,以后再介绍,这里先 ...

  10. java_Object类、日期时间类、System类、包装类

    Object类 java.lang.Object 类是所有类的父类.它描述的所有方法子类都可以使用.在对象实例化的时候,最终找的父类就是Object. 如果一个类没有特别指定父类, 那么默认则继承自O ...