利用CSS3动画实现圆圈由小变大向外扩散的效果实例_CSS

CSS

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: CSS伪类:empty让我眼前一亮(实例... 下一篇:详解CSS3原生支持div铺满浏览器的...

利用CSS3动画实现圆圈由小变大向外扩散的效果实例

发布时间：2022-04-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了利用CSS3动画实现圆圈由小变大向外扩散的效果实例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

前言

本文主要给大家分享的是关于利用CSS3动画实现圆圈由小变大向外扩散的效果实例，文中涉及到 CSS3 的动画（animation）、2D 转换（transform: scale）

css3中新增了一个animation的属性，该属性类似于创建一个animation对象

如：animation: bounce 2.0s infinITe ease-in-out;

animation有以下几个参数：

属性	描述	CSS
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

CSS 3 中2D转换的实现用到两个属性：

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	指定变换的基点的位置。	3

静态效果图：

具体如代码所示：

<!DOCTYPE htML>
<html>
<head>
<;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
@keyframes warn {
 0% {
  transform: scale(0);
  opacity: 0.0;
 }
 25% {
  transform: scale(0);
  opacity: 0.1;
 }
 50% {
  transform: scale(0.1);
  opacity: 0.3;
 }
 75% {
  transform: scale(0.5);
  opacity: 0.5;
 }
 100% {
  transform: scale(1);
  opacity: 0.0;
 }
}
@-webkit-keyframes "warn" {
 0% {
  -webkit-transform: scale(0);
  opacity: 0.0;
 }
 25% {
  -webkit-transform: scale(0);
  opacity: 0.1;
 }
 50% {
  -webkit-transform: scale(0.1);
  opacity: 0.3;
 }
 75% {
  -webkit-transform: scale(0.5);
  opacity: 0.5;
 }
 100% {
  -webkit-transform: scale(1);
  opacity: 0.0;
 }
}
 
.container {
 position: relative;
 width: 40px;
 height: 40px;
 border: 1px solid #000;
}
/* 保持大小不变的小圆圈  */
.dot {
 position: absolute;
 width: 6px;
 height: 6px;
 left: 15px;
 top: 15px;
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border: 2px solid red;
 border-radius: 20px;
 z-index: 2;
}
/* 产生动画（向外扩散变大）的圆圈  */
.pulse {
 position: absolute;
 width: 24px; 
 height: 24px;
 left: 2px;
 top: 2px;
 border: 6px solid red;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
 border-radius: 30px;
 z-index: 1;
 opacity: 0;
 -webkit-animation: warn 3s ease-out;
 -moz-animation: warn 3s ease-out;
 animation: warn 3s ease-out;
 -webkit-animation-iteration-count: infinite;
 -moz-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
}
</style>
 
</head>
 
<body>
<div class="container">
    <div class="dot"></div>
    <div class="pulse"></div>
</div>
</body>
</html>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本宝典的支持。