css 图片波浪效果
CSS 图片 效果 波浪
2023-09-27 14:29:10 时间
参考:https://blog.csdn.net/zhichaosong/article/details/80944924#_99
效果:
wave2.png
html:
<!DOCTYPE html> <html> <head> <style> body { margin: 0; } .blue-bg { height: 510px; width: 100%; margin: auto; background: linear-gradient(to bottom, #3ec4fc, #0081cc); } .top-btn { height: 400px; } .water-group { position: relative; height: 110px; width: 100%; overflow: hidden; } .water-group .water { position: absolute; width: 200%; height: 100%; background-size: 50% 100%; } .water-group .water1 { top: 20px; left: -100%; opacity: 0.2; animation: water-right 20s infinite linear; } .water-group .water2 { top: 30px; left: 0; opacity: 0.3; animation: water-left 30s infinite linear; } .water-group .water3 { top: 44px; left: -100%; animation: water-right 40s infinite linear; } @keyframes water-right { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 50% { transform: translateX(25%) translateZ(0) scaleY(0.85) } 100% { transform: translateX(50%) translateZ(0) scaleY(1) } } @keyframes water-left { from { transform: translate(0%, 0px); } to { transform: translate(-50%, 0px); } } </style> </head> <body> <div class="blue-bg"> <div class="top-btn"> </div> <div class="water-group"> <div class="water water1" style="background-image: url('wave2.png')"></div> <div class="water water2" style="background-image: url('wave2.png')"></div> <div class="water water3" style="background-image: url('wave2.png')"></div> </div> </div> </body> </html>
相关文章
- Python处理超强反爬(TSec防火墙+CSS图片背景偏移定位)
- .NET Core实战项目之CMS 第二章 入门篇-快速入门ASP.NET Core看这篇就够了 [WPF]为旧版本的应用添加触控支持 js css等静态文件版本控制,一处配置多处更新.net版【原创】 C#图片处理,缩略图制作 SqlDataReader 结果集 转成 DataTable DataTable转成List集合 如何使用linq读取DataTable集合?
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
- Web优化 --利用css sprites降低图片请求
- 前端基础 - CSS简介
- CSS - 炫酷Canvas动画动态效果及鼠标效果背景(无需图片)
- 【前端学习之HTML&CSS进阶篇】-- CSS第三篇 -- 基本布局概念
- 微信小程序的分享功能-css文字超过两行隐藏
- css动画
- 如果文字多了,想让超出元素外面的文字以省略号显示的css样式
- 通过使用CSS字体阴影效果解决hover图片时显示文字看不清的问题
- 使用 HTML、CSS 和 JavaScript 的实时计算器
- Jquery+css实现图片无缝滚动轮播
- CSS百分比padding实现比例固定图片自适应布局
- HTML + CSS实现图片3D旋转效果
- CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影、3/4圆
- 浅析CSS中clip-path属性的使用和不同形状的绘制及如何使用纯CSS实现六边形的图片效果
- css,图片和文字在父元素垂直居中,且图片和文字在中线对齐排列的几种方式
- CSS魔法堂:一起玩透伪元素和Content属性
- CSS魔法堂:重拾Border之——图片作边框
- html/css 图片展示效果