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由内往外水波纹动态效果”的全面内容,想了解更多关于 前端知识 内容,请继续关注编程基础学习网。

本文标题为:css3由内往外水波纹动态效果

基础教程推荐