先看效果图：



代码：

<!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. Python 3之bytes新特性

    转载: Python 3最重要的新特性大概要算是对文本和二进制数据作了更为清晰的区分. 文本总是Unicode,由str类型表示,二进制数据则由bytes类型表示. Python 3不会以任意隐式的方 ...

  2. 5.Python是怎么解释的？

    Python是怎么解释的? Python language is an interpreted language. Python program runs directly from the sour ...

  3. log4net进阶手札(二)：基本用法

    本节将主要在WebSite中,对保存日志在文本文件的基本用法来进行介绍,并结合WebForm的初始化方式区别进行说明,解决方案如下图所示: 一.WebSite应用第1步:配置Web.Config文件, ...

  4. 基于 react 的Java web 应用—— 组件复用（后续需更新）

    前言 实习第二周,被告知要用React与导师进行基于React的Javaweb 的开发,jinzhangaaaaa~由于React 这款框架没学过,看了一峰老师的基础入门教程,硬着头皮开始上了... ...

  5. db2 锁表

    2019独角兽企业重金招聘Python工程师标准>>> 查询锁表情况 db2 => get snapshot for locks on databasename 可以看到什么表 ...

  6. NodeJs mysql 开启事务

    如题:node后台使用mysql数据库,并使用事务来管理数据库操作. 这里主要讲一个事务的封装并写了一个INSERT 插入操作. code: 基础code: db.config.js const my ...

  7. 解决iframe跨域刷新的问题

    用iframe的location.reload(true); 方法来刷新外部URL会报 Blocked a frame with origin xxxx from accessing a cross- ...

  8. python requests 接口测试

    1.get方法请求接口 url:显而易见,就是接口的地址url啦 headers:请求头,例如:content-type = application/x-www-form-urlencoded par ...

  9. 刷短视频看新闻看小说也能赚钱的几款APP

    一.抖音极速版 发啦! 刷短视频也能赚钱 第1步:下载[抖音极速版] 第2步:填我邀请码[831008243] 第3步:立刻提现最高[38元]红包 二.今日头条极速版 1元现金速撸 下载[今日头条极速 ...

  10. Java中的动态定义数组

    1.一维矩阵的动态定义(代码注释) 1.1方法一 package dongtai; import java.util.Scanner; import java.util.ArrayList; publ ...