css实现圆形水纹波动效果

<!doctype html>
<html><head><meta charset="utf-8"><title>CSS3实现水波浪浮动特效- 素材abc</title><style>@keyframes move_wave {0% {transform: translateX(0) translateZ(0) scaleY(1)}50% {transform: translateX(-25%) translateZ(0) scaleY(0.55)}100% {transform: translateX(-50%) translateZ(0) scaleY(1)}}.waveWrapper {overflow: hidden;position: absolute;left: 0;right: 0;bottom: 0;top: 0;width: 500px;height: 500px;border-radius: 500px;margin: auto;border: 10px double black;}.waveWrapperInner {position: absolute;width: 100%;overflow: hidden;height: 100%;bottom: 120px;background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);}.bgTop {z-index: 15;opacity: 0.5;}.bgMiddle {z-index: 10;opacity: 0.75;}.bgBottom {z-index: 5;}.wave {position: absolute;left: 0;width: 200%;height: 100%;background-repeat: repeat no-repeat;background-position: 0 bottom;transform-origin: center bottom;}.waveTop {background-size: 50% 100px;}.waveAnimation .waveTop {animation: move-wave 3s;-webkit-animation: move-wave 3s;-webkit-animation-delay: 1s;animation-delay: 1s;}.waveMiddle {background-size: 50% 120px;}.waveAnimation .waveMiddle {animation: move_wave 10s linear infinite;}.waveBottom {background-size: 50% 100px;}.waveAnimation .waveBottom {animation: move_wave 15s linear infinite;}</style></head><body><div class="waveWrapper waveAnimation"><div class="waveWrapperInner bgTop"><div class="wave waveTop" style="background-image: url('img/wave-top.png')"></div></div><div class="waveWrapperInner bgMiddle"><div class="wave waveMiddle" style="background-image: url('img/wave-mid.png')"></div></div><div class="waveWrapperInner bgBottom"><div class="wave waveBottom" style="background-image: url('img/wave-bot.png')"></div></div></div></body></html>

css实现圆形水纹波动效果相关推荐

android 贝塞尔曲线波浪线,Android 贝塞尔曲线实现水纹波动效果
贝塞尔曲线简介千篇一律,很多类似的文章都会介绍一下什么是贝塞尔曲线,但是这里就不做介绍了,我们在这里只需要知道在Android API为我们提供了绘制二阶贝塞尔曲线和三阶贝塞尔曲线的方法即可. 效果 ...
regl 水纹波动效果
原文链接: regl 水纹波动效果上一篇: vscode中直接使用es6 import, 可以右键直接运行js文件下一篇: regl fake-3d 静态图变动态图, 使用深度信息图片翻墙出去 ...
Android 贝塞尔曲线实现水纹波动效果
前言最近工作上比较忙碌,很久没有更新文章了,难得国庆小长假,现在是2019年10月2日凌晨00:49,写一篇简单且实用的贝塞尔曲线应用,许多技术点的文章很多前辈都已经写的很好了,所以如有纰漏之处, ...
html转动的圆圈,CSS圆形旋转效果纯CSS制作圆形旋转菜单效果(七步完成)
我们理念中的菜单都是矩形的,不是横向排列就是纵向排列,这里我们打破了常规的思维,把菜单做成圆形的. 在这里我们不得不克服几个问题: 如何定义html如何悬停定位菜单元素在此之前先看一下最终效果是怎样 ...
javascript ES6鼠标划入产生水纹波动效果
ES6写了一个水纹效果.还有点计算的问题.直接上代码Copy一下吧. export default class Vertex {static BASE_Y = 150;static BASE_R = ...
纯 CSS 实现优惠券透明圆形镂空打孔效果
本文同步发布在:纯 CSS 实现优惠券透明圆形镂空打孔效果我们在做商城类项目时,时常会有开发优惠券的需求,那么我们如何通过纯 CSS 来实现类似京东.淘宝的优惠券样式. 下面给大家分享一个纯 CSS ...
如何用CSS做倒计时/圆形进度条效果
前言:有时,我们会见一些圆形的进度条,随着进度条的推进,进行倒计时的变化. 若是只实现一个圆环的话,只用border和border-radius就能画出来. 但是这样的圆环不能动,产生进度条效果的重要 ...
CSS如何实现内凹角效果 By 大漠
记得@Lea Verou的<CSS Secrets>一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果.我也尝试着借助Vue的能力,把这种效果构建成一个 ...
html标题前圆圈样式,漂亮的css3圆形鼠标悬停效果实例
本文将给大家介绍一个漂亮的css3圆形鼠标悬停效果,这个效果在产品展示或列表图片中都可以应用,可以说是应用范围挺广泛的.关于鼠标悬停效果,你还可以看看另一篇文章<使用css转换和3d旋转的圆形鼠 ...

css实现圆形水纹波动效果

css实现圆形水纹波动效果相关推荐

最新文章

热门文章