先看效果图：



代码：

<!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. 美版健康码要来了！苹果Google被网友质疑：这是变相的监视系统吗？

    4 月 30 日消息,据外媒报道,由苹果和谷歌合作开发一个冠状病毒追踪系统将在 5 月 1 日正式上架,今天已经进入测试阶段. 图自:techcrunch 这款应用可以让 iOS 和 Android ...

  2. Linux硬盘分区知识

    前言 硬盘使用前,一般要分区,格式化(创建文件系统)<== 存放数据 类比,房子使用前,一般要隔断,装修,买家具,再住人. 分区 一块硬盘: 主分区.扩展分区.逻辑分区 主分区+扩展分区的数量& ...

  3. JavaScript HTMlL DOM对象（下）

    DOM:document operation model 文档操作模型 每个标签都是一个对象. 一.查找元素 DOM 回顾 直接查找 var obj = document.getElementById ...

  4. Git 常见问题汇总

    git reabse 合并多个commit git rebase -i HEAD~{NUM} git rebase -i start end 会进入一个指定区间的commit列表 根据提示进行文本编辑 ...

  5. 历史上的今天mysql数据库包含详情分类以及图片

    历史上的今天mysql数据库包含详情分类以及图片 https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111debo71iaJ& ...

  6. ansible roles 自动化安装

    例:  ansible roles 自动化安装memcached 文件目录结构如下: cat memcached_role.yml - hosts: memcached remote_user: ro ...

  7. Qt数据库总结

    使用Qt SQL库 头文件: #include <QtSql> 项目: QT += sql 常用类 QSqlDatabase:数据库的连接打开等操作 QSqlQuery:执行语句,获取结果 ...

  8. C# 判断文件格式的一些总结

    前提概述: 项目中 经常会有上传图片的地方  有的时候需要对图片类型做一些要求   这个时候就需要一些判断   虽然前段上传的时候可以去做类型的限制  或者后台接受的时候从file的type 中获取图 ...

  9. Angular 从入坑到挖坑 - Router 路由使用入门指北

    一.Overview Angular 入坑记录的笔记第五篇,因为一直在加班的缘故拖了有一个多月,主要是介绍在 Angular 中如何配置路由,完成重定向以及参数传递.至于路由守卫.路由懒加载等&quo ...

  10. 【SPOJ – SUBST1】New Distinct Substrings 后缀数组

    New Distinct Substrings 题意 给出T个字符串,问每个字符串有多少个不同的子串. 思路 字符串所有子串,可以看做由所有后缀的前缀组成. 按照后缀排序,遍历后缀,每次新增的前缀就是 ...