CSS3实现水波纹扩散效果

最新推荐文章于 2024-02-11 10:47:26 发布

原创

最新推荐文章于 2024-02-11 10:47:26 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css3

本文介绍了一种使用HTML和CSS实现的圆点扩散动画效果，通过关键帧动画控制圆点的透明度和缩放，创建视觉上的扩散效果。适用于网页设计中的加载提示或交互反馈。

效果代码

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-casle=1.0,user-scalable=no" />
		<title>圆点扩散</title>
		<style type="text/css">
			body {
   
   
				background: #333;
			}

			.tips {
   
   
				width: 6px;
				height: 6px;
				position: relative;
				cursor: pointer;
				margin: 120px auto 0;
			}


			.tips b {
   
   
				width: 100%;
				height: 100%;
				background: #fff;
				border-radius: 50%;
				display: block;
				background-color: rgba(255, 255, 255, 0.6);
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}

			.tips b:nth-of-type(1) {
   
   
				-webkit-animation: click1 1s linear infinite;
				animation: click1 1s linear infinite;
				background-color: #1f868e;
				/* opacity: .7; */
			}

			.tips b:nth-of-type(2) {
   
   
				-webkit-animation: click2 1s linear infinite;
				animation: click2 1s linear infinite

最低0.47元/天解锁文章