先看效果图：



代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>小水球</title>

		<style>

			*{

				margin:0;

				padding: 0;

			}

			body{

				height: 100vh;

				background: linear-gradient(rgb(95,95,250) 10%,rgb(3,3,110));

			}

			.main,.wave{

				width:200px;

				height:200px;

				border-radius: 50%;

				position: absolute;

				left: 50%;

				top:50%;

				transform: translate(-50%,-50%);

			}

			.main{

				border:3px solid darkturquoise;

				padding: 10px;

			}

			.wave{

				background: darkturquoise;

				overflow: hidden;

			}

			.wave::before{

				content: "水球";

				position: absolute;

				left: 50%;

				top: 0px;

				color: darkturquoise;

				z-index: 99;

				transform: translate(-50%,30px);

				text-transform: uppercase;

			}

			.wave::after{

				content: "";

				width: 300px;

				height: 300px;

				background: rgba(255,255,255,0.8);

				position: absolute;

				left: 50%;

				top: 0;

				transform: translate(-50%,-60%);

				border-radius: 40%;

				animation: wave 5s linear infinite;

			}

			@keyframes wave{

				100%{

					transform: translate(-50%,-60%) rotate(360deg);

				}

			}

		</style>

	</head>

	<body>

		<div class="main">

			<div class="wave"></div>

		</div>

	</body>

</html>

参考视频：https://www.bilibili.com/video/BV1nV411d7Q2

CSS实现漂亮的小水球效果的更多相关文章

  1. 如何使用CSS实现小三角形效果

    如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...

  2. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  3. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  4. 纯CSS实现各类气球泡泡对话框效果

    原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...

  5. 超级好看！巧用PS将风光人像打造成唯美的小星球效果！

    本篇教大家如何巧用PS将风光人像照片打造成唯美的小星球!教程讲解过程很细致,理论实操简单易懂,最终完成效果灰常的漂亮,喜欢的小伙伴赶快收走学起来吧! 原图: 效果图: PS:1.对齐图像,选中所有图, ...

  6. css选择器顺序的小技巧

    在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...

  7. 抖音抖一抖-SVG和CSS视觉故障艺术小赏

    故障艺术,英文名称叫glitch,在很多赛博朋克作品中经常看到,其实就是故意表现一种显示设备的小故障效果,抖音的图标其实就是这种的效果,我们看下这个图标 这个图标中的红色和蓝色的偏移其实就是一种故障艺 ...

  8. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  9. CSS Icon 项目地址 小图标-用css写成的

    http://cssicon.space/#/icon/focus 这是所有用css写成的  小图标  右侧有 html和css代码

随机推荐

  1. 修复.NET的HttpClient

    \ 看新闻很累?看技术新闻更累?试试下载InfoQ手机客户端,每天上下班路上听新闻,有趣还有料! \ \\ 早在2016年我们就报道过 ,.NET的HttpClient存在一些问题.随着.NET Co ...

  2. 01-复杂度2 Maximum Subsequence Sum

    01-复杂度2 Maximum Subsequence Sum   (25分) 时间限制:200ms 内存限制:64MB 代码长度限制:16kB 判题程序:系统默认 作者:陈越 单位:浙江大学 htt ...

  3. Codeforce 1255 Round #601 (Div. 2)B. Fridge Lockers（思维）

    Hanh lives in a shared apartment. There are nn people (including Hanh) living there, each has a priv ...

  4. 如何使用badboy录制一个脚本并成功的导入jmeter中？

    前言: 虽然,很多人已经不适用这种方式进行录制脚本了,因为不好维护.但是,还是有一些朋友在刚开始学习的过程中使用badboy. 可能有人会好奇了,人家五一都出去玩了,你在家学习吗?正巧前一阵有粉丝留言 ...

  5. 惠普 HP Pavilion 15 Notebook PC清灰教程总结 惠普g4系列清灰加内存条教程

    最近天气热的电脑都受不了,风扇总是异响,声音很大,感觉是散热不行了,就把电脑清一下灰,虽然之前也清过,但是基本都忘记了,机子比较老,找不到具体教程,清灰过程中因为不熟悉有点费劲,手动记录一下,方便下次 ...

  6. （Lineup the Dominoes筛子）三维状压

    传送门 描述:\(一堆筛子,每个筛子两个面,上面有1-6之间的数字.后一个筛子与前一个筛子的接触面的点数必须相等.\) \(求,有多少种方案堆完筛子.(方案只关心筛子的位置,不关心是否翻转)\) \( ...

  7. HDU1214圆桌会议

    一个环,从1编号到n. 每次可以交换相邻的两个人, 问最少交换几次,使得每个数字的左右数字交换. 转载自:https://blog.csdn.net/yin_zongming/article/deta ...

  8. P3467(矩形覆盖问题)

    描述:https://www.luogu.com.cn/problem/P3467 1.考虑如果整个建筑物链是等高的,一张高为链高,宽为整个建筑物宽的海报即可完全覆盖: 2.若有两个不等高的元素组成建 ...

  9. SpringBoot：扩展SpringMVC、定制首页、国际化

    目录 扩展使用SpringMVC 如何扩展SpringMVC 为何这么做会生效(原理) 全面接管SpringMVC 首页实现 页面国际化 SpringBoot扩展使用SpringMVC.使用模板引擎定 ...

  10. blesta运行造成阿里云服务器CPU频繁超载的原因分析

    博主在阿里云服务器上安装了主机软件Blesta后,阿里云后台频繁提示CPU超载,打开突发性能模式后,发现CPU负载到了100%.如下图所示: 直接在putty里面reboot整个系统后,负载瞬间降为2 ...