设页面中有<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. leetcode 5473

    这个题真是当时想麻烦了,,,感谢LLdl 提供的题解 其实一个很重要的点就是,如果后面的玩意翻转了偶数次,那就跟没变一样．如果是奇数次就取反． 怪我天真,第一反应就去位运算去了,,,,哪有那么复杂诶 ...

  2. PHP fputs() 函数

    定义和用法 fputs() 函数将内容写入一个打开的文件中. 函数会在到达指定长度或读到文件末尾(EOF)时(以先到者为准),停止运行. 如果函数成功执行,则返回写入的字节数.如果失败,则返回 FAL ...

  3. 6.3 省选模拟赛 Decompose 动态dp 树链剖分 set

    LINK:Decompose 看起来很难 实际上也很难 考验选手的dp 树链剖分 矩阵乘法的能力. 容易列出dp方程 暴力dp 期望得分28. 对于链的情况 容易发现dp方程可以转矩阵乘法 然后利用线 ...

  4. 2019 HL SC day10

    10天都过去了 4天都在全程懵逼.. 怎么可以这么难啊 我服了 现在想起依稀只记得一些结论 什么 反演? 什么后缀自动机?什么组合数的应用?什么神仙东西 ,不过讲课人的确都是神仙.(实名羡慕. mzx ...

  5. Flink的流处理API(二)

    一.Environment 1,getExecutionEnvironment getExecutionEnvironment会根据查询运行的方式决定返回什么样的运行环境,是最常用的一种创建执行环境的 ...

  6. 物联网实验Arduino(1)

    回顾 我们使用的平台: Arduino 入门实验1 眨眼睛 /* Blink Turns an LED on for one second, then off for one second, repe ...

  7. SmartDb代码修改

    在之前的一篇博客中介绍过SmartDB(https://blog.csdn.net/wuquan_1230/article/details/89145012),在使用的过程中发现一个问题,会造成内存泄 ...

  8. 001_centos7下比特币源码编译安装

    今天我们介绍比特币的源码安装过程,是利用编译安装的 首先安装依赖 yum install -y boost-devel qt-devel protobuf-devel qrencode-devel l ...

  9. Python selenium爬虫实现定时任务过程解析

    现在需要启动一个selenium的爬虫,使用火狐驱动+多线程,大家都明白的,现在电脑管家显示CPU占用率20%,启动selenium后不停的开启浏览器+多线程, 好,没过5分钟,CPU占用率直接拉到9 ...

  10. 大型Java进阶专题(十一) 深入理解JVM (下)

    前言 ​ 前面我们了解了JVM相关的理论知识,这章节主要从实战方面,去解读JVM. 类加载机制 ​ Java源代码经过编译器编译成字节码之后,最终都需要加载到虚拟机之后才能运行.虚拟机把描述类的数据从 ...