CSS实现漂亮的小水球效果
先看效果图：
代码：
<!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>
CSS实现漂亮的小水球效果的更多相关文章
- 如何使用CSS实现小三角形效果
如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...
- css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- 纯CSS实现各类气球泡泡对话框效果
原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...
- 超级好看！巧用PS将风光人像打造成唯美的小星球效果！
本篇教大家如何巧用PS将风光人像照片打造成唯美的小星球!教程讲解过程很细致,理论实操简单易懂,最终完成效果灰常的漂亮,喜欢的小伙伴赶快收走学起来吧! 原图: 效果图: PS:1.对齐图像,选中所有图, ...
- css选择器顺序的小技巧
在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...
- 抖音抖一抖-SVG和CSS视觉故障艺术小赏
故障艺术,英文名称叫glitch,在很多赛博朋克作品中经常看到,其实就是故意表现一种显示设备的小故障效果,抖音的图标其实就是这种的效果,我们看下这个图标 这个图标中的红色和蓝色的偏移其实就是一种故障艺 ...
- HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...
- CSS Icon 项目地址 小图标-用css写成的
http://cssicon.space/#/icon/focus 这是所有用css写成的 小图标 右侧有 html和css代码
随机推荐
- 【JAVA基础】10 Object类
1. Object类概述 是类层次结构的根类 每个类都使用 Object 作为超类 所有类都直接或者间接的继承自该类 所有对象(包括数组)都实现这个类的方法. 2. Object的构造方法 publi ...
- python的sqlalchemy框架
先看一下sqlalchemy框架中的映射,sqlalchemy一共有三种映射方式:传统映射(classic).现代化映射(modern).自定义映射.在这里,只为大家讲一下classic映射和mode ...
- nat和静态映射
拓扑图: 实验要求: 1.R2.R3能访问外网的4.4.4.4(4.4.4.4为R4上的环回接口,用来模拟inter网). 2.R4访问222.222.222.100其实访问到的是内网的192.168 ...
- JSbridge 在Vue的封装与交互
原文转自: 点我 写在 JSbridge.js let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator. ...
- POJ3614防晒霜 这个贪心有点东西（贪心+优先队列）
这个题是说有C头牛去晒太阳,带了L瓶防晒霜,每瓶防晒霜都有一个SPF值(每瓶防晒霜都能解决一个最短路 ) 每头牛给出了他可以接受防晒霜的上限,和下限,每种防晒霜都给出了SPF值与数量. 从防晒霜的sp ...
- ACM卡常处理办法（虽然我到现在没遇到）
今天做预流推送,一样的代码.别人500MS(OI选手)而我5S,百思不得其解,然后我知道了还有卡常这一说. 我们今天就来看一看吧: 1.循环展开: 在缓存和寄存器允许的情况下一条语句内大量的展开运算会 ...
- 《C程序设计语言》 练习1-21
问题描述 编写程序entab,将空格串替换为最少数量的制表符和空格,但要保持单词之间的间隔不变.假设制表符终止位的位置与练习1 - 20的detab程序的情况相同.当使用一个制表符或者一个空格都可以到 ...
- tarjan 算法应用
主要讲证明,流程倒是也有 然后发现自己并不会严谨证明 其实后面一些部分流程还是挺详细 本来这篇blog叫做"图论部分算法证明",然后发现OI中的图论想完全用数学上的方法证明完全超出 ...
- python 中关于无法导入自己写的类。解决方法
1.错误描述 之前在学习python的过程中,导入自己写入的包文件时.from 自己写的类,会发现没有弹出选择.并且全输入类名称后会发现类名与相关导入的方法会爆红.如图: 2.原因分析 pycharm ...
- 从一条数据说起——InnoDB存储数据结构
本篇博客参考掘金小册--MySQL 是怎样运行的:从根儿上理解 MySQL 先给大家讲一个故事,我刚参加工作,在一个小作坊里面当[码畜](尽管现在也是),有一天老板从我背后走过,说了一句举世震惊的话: ...