css 图片波浪效果

参考：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>

转载于:https://www.cnblogs.com/linjiangxian/p/11464753.html

css 图片波浪效果相关推荐

纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
html网页切换效果，css图片切换效果
<title>html网页切换效果,css图片切换效果</title><link rel="stylesheet" href="./fami ...
css3波浪纹路_纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
CSS图片重叠效果~秒懂
利用CSS实现图片重叠,当鼠标悬浮到第一张图片的时候,第二张图片会显示出来. 效果如下: 源码: <!DOCTYPE html> <html lang="en"& ...
[CSS]图片展示效果
本例对于完全支持:hover伪类的浏览器来说,只需要CSS即可,但是同以前做的一些效果一样,还是需要JS来应付史前怪兽IE 6. 关于这个js文件,请参阅:<JS解决IE 6不支持:hover伪 ...
html图片纵向变,【转】15个CSS图片悬浮效果
先睹为快在开始之前,先欣赏一下所有将要在本文中创造的悬浮效果,点击图片查看. 设置在开始创造独特的演示之前,需要先做一些基本的设置.下面的CSS用来定义所有例子的基本显示. 大部分是一些基本的设置 ...
图片选中状态 html,一款漂亮的CSS图片选中效果
图片选中特效 .worksbox{width:130px;height:100px;position:relative;} .worksbox a{border:1px solid #ccc;back ...
html怎么把图片做成抖动效果,CSS图片抖动和JS点击特效
正文 CSS图片抖动效果代码,放在网站主要CSS文件中即可如:style.css,之前emlog博客中常添加这个效果 img:hover { -webkit-animation:sucaijiayu ...
CSS如何实现波浪效果
一直以来,使用纯 CSS 实现波浪效果都是十分困难的.因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS的方式,实现贝塞尔曲线,暂时是没有很好的方法. 当然,借助其他力量(SVG.CANVAS) ...

css 图片波浪效果

css 图片波浪效果相关推荐

最新文章

热门文章