css3由内往外水波纹动态效果

如何利用css3实现一个由内往外水波纹动态效果？下面编程教程网小编带大家了解一下，代码如下：

1、定义一个div命名为ripple

2、css3样式如下：

body {
	height:100%;
	background:#121212;
	display:flex;
	justify-content:space-around;
	align-items:center;
}
.ripple{
	position:relative;
	display:block;
	width:100px;
	height:100px;
	margin:160px auto;
	animation:ripple 0.6s linear infinite;
	border-radius:50px;
}
@keyframes ripple {
  0% {
	box-shadow:0 0 0 0 rgba(0,128,0,0.1),0 0 0 20px rgba(0,128,0,0.1),0 0 0 40px rgba(0,128,0,0.1),0 0 0 60px rgba(0,128,0,0.1);
  }
  100% {
	box-shadow:0 0 0 20px rgba(0,128,0,0.1),0 0 0 40px rgba(0,128,0,0.1),0 0 0 60px rgba(0,128,0,0.1),0 0 0 80px rgba(0,128,0,0);
  }
}

以上是编程学习网小编为您介绍的“css3由内往外水波纹动态效果”的全面内容，想了解更多关于 前端知识 内容，请继续关注编程基础学习网。