当前位置: 首页 > news >正文

css水波浪动画效果

为缩小gif大小,动画效果做了加速,效果如下:

<!DOCTYPE html>
<html>
<head>
<style>
*{padding:0;margin:0;}/*清除默认填充及边距*/.water{position:relative;width:100vw;height:100vh;overflow:hidden;background:#cdfffc;}
.water:before,.water:after{content:"";position:absolute;left:50%;width:200vw;height:200vw;top:-158vw;margin-left:-100vw;background:linear-gradient(to right,rgba(1,174,255,1),rgba(11,5,255,1));border-radius:42%;animation:rotate 20s linear infinite;z-index:1;}
.water:after{border-radius:40%;background:linear-gradient(to right,rgba(11,5,255,0.5),rgba(1,174,255,0.5));animation:rotate 24s linear -10s infinite;z-index:2;}@keyframes rotate {
50%{transform:rotate(180deg);}
100%{transform:rotate(360deg);}
}.water .millia{position:relative;z-index:3;background:#fff;width:96vw;margin:1vh auto 0 auto;text-align:center;border-radius:1vh;}
</style>
</head>
<body><!--if--使用-->
<div class="water"></div><!--else--做背景图使用-->
<div class="water">
<div class="millia"><br><br><br>如<br>果<br>做<br>背<br>景<br>图<br>使<br>用<br><br><br><br></div>
</div>
</body>
</html>

 说明:

采用vw和vh单位可适配移动和pc,调整top的值可以改变高度

.water:before,.water:after设置width、height、border-radius、top、background等以改变效果

http://www.lryc.cn/news/416977.html

相关文章:

  • SQL二次注入
  • 深入学习小程序开发第二天:数据绑定与动态更新
  • 【ai】 时间序列分析的python例子
  • 生成订单幂等性(防止订单重复提交)
  • IDEA自定义注释模版
  • Spring Cloud Gateway实现API访问频率限制
  • 单例模式:确保唯一实例的设计模式
  • MCU调试技巧-串口打印
  • VS+Qt+C++点云PCL三维显示编辑系统
  • 代码随想录算法训练营第七天(一)| 454.四数相加II 383. 赎金信
  • SpringBoot+Mybatis 分页
  • 学习进行到了第十七天(2024.8.5)
  • 【Nuxt】Layout 布局和渲染模式
  • C:指针学习(1)-学习笔记
  • 【LVS】负载均衡之NAT模式
  • ASP.NET Core 基础 - 入门实例
  • 机器人主板维修|ABB机械手主板元器件故障
  • 大数据Flink(一百零六):什么是阿里云实时计算Flink版
  • ERCOT中的专业术语解释
  • Python酷库之旅-第三方库Pandas(069)
  • 基于hutools的国密SM2、3、4
  • 进程的等待(非阻塞轮询+阻塞)和替换控制详解
  • 24/8/6算法笔记 支持向量机
  • 测试用例等级划分
  • 打造Perl编译器前端:自定义语言处理的魔法
  • Visual Studio 和 Visual Studio Code 的比较与应用偏向
  • Python打开JSON/CSV文件的正确方式(针对UnicodeDecodeError)
  • 深入解析TikTok广告开户白名单:规范与申请指南
  • CSS技巧专栏:一日一例 19 -纯CSS实现超酷的水晶按钮特效
  • ArcGIS基础:基于数据图框实现地理坐标系下不同投影转换的可视化效果