CSS实现漂亮的小水球效果

灰太狼 2021-07-26 12:51 531阅读 0赞

先看效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbmdrb25ndGlhbnl1emhhbw_size_16_color_FFFFFF_t_70_pic_center]  
代码：

<!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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbmdrb25ndGlhbnl1emhhbw_size_16_color_FFFFFF_t_70_pic_center]: /images/20210726/3a3fb6be546446c697dcd769e79de78d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，531人围观）

还没有评论，来说两句吧...

相关阅读

相关如何用CSS实现漂亮的个人资料卡效果

点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群我们可以仅使用CSS为我们的网站做一些很棒的设计。在本文中，我将向你展示如何制作具有出色悬

末蓝、/ 2023年01月14日 11:52/ 0 赞/ 149 阅读

相关 js实现漂亮的雪花飘落效果

js实现漂亮的雪花飘落效果效果如下：雪花飘落四个按钮控制雪花的生成与停止关键代码：这个代码还有许多不足，希望大佬指正 var W =

Bertha 。/ 2022年12月25日 00:47/ 0 赞/ 203 阅读

相关 Css 实现漂亮弧形

在实现页面五花八门的有特色的ui时，我们有时会遇到要用实现一个弧形，而这样的弧形要怎么实现呢？用图片？好像不大现实，因为这样就要无故多加载一张图片了，这里我们来说说怎么用css

浅浅的花香味﹌/ 2022年12月23日 00:45/ 0 赞/ 236 阅读

相关 css 实现漂亮的分割线

<div class="test"></div> .test { width: 100%; height: 10rpx;

àì夳堔傛蜴生んèń/ 2022年10月23日 04:58/ 0 赞/ 275 阅读

相关 css效果实现一个物体的旋转小demo

定一个html中的一个元素，然后使用下面的效果即可 .img\{ width:200px; he

红太狼/ 2022年06月05日 11:43/ 0 赞/ 218 阅读

相关 css3实现漂亮的倒影效果

实际上还有很多CSS新属性并未包含进CSS3官方标准中。-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box

缺乏、安全感/ 2022年04月01日 06:28/ 0 赞/ 335 阅读

相关 Css 实现漂亮弧形

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

Dear 丶/ 2022年02月15日 07:06/ 0 赞/ 294 阅读

相关纯CSS简单实现漂亮的timeline时间轴效果(样式1)

背景最近需要用到timle效果，网上提供很多案例都加了很多特效，代码也比较复杂。最终找到了一个样式精美，代码简洁的timeline效果。我简单分享一下实现原理，并配上代

红太狼/ 2021年11月29日 07:44/ 0 赞/ 1885 阅读

相关纯CSS实现波动水球效果

今天学习到了一个新的css特效，波动水球效果，也是非常的好看，而且触类旁通，手机充电，被子里水的特效也都可以制作。 ![在这里插入图片描述][202005091816141

曾经终败给现在/ 2021年07月26日 20:20/ 0 赞/ 679 阅读

相关 CSS实现漂亮的小水球效果

先看效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

灰太狼/ 2021年07月26日 12:51/ 0 赞/ 532 阅读