正文

css3动画：波浪效果

风雨后见彩虹  2022-02-08  288

关键词：

实现效果

如图所示：

首先得准备三张图，一张是浅黄色的背景图loading_bg.png，一张是深红色的图loading.png，最后一张为bolang.png。

css代码

body{background:#ffe894;}
.loading_bg{width:113px; height:111px;background:url(loading_bg.png) no-repeat left top;margin:30px auto;}
.loading{width:113px; height:111px;position:relative; -webkit-mask-image:url(loading.png);}
.show{
    width:120px; height:187px; position:absolute; left:0; top:40px;
    animation:sploosh 3s ease-in-out both infinite; 
    -webkit-animation:sploosh 3s ease-in-out both infinite;
    background-image: url(bolang.png);
}
.show_01{-webkit-animation-delay: -0.8s;  animation-delay: -0.8s; opacity:0.2;}
.show_02{-webkit-animation-delay: -1.6s;  animation-delay: -1.6s; opacity:0.4;}
.show_03{-webkit-animation-delay: -2.4s;  animation-delay: -2.4s; opacity:0.6;}
.show_04{-webkit-animation-delay: -3.2s;  animation-delay: -3.2s; opacity:0.8;}

@-webkit-keyframes sploosh{
  0% {background-position: 0 bottom;}
  100% {background-position: 200px bottom;}
}
@keyframes sploosh{
  0% {background-position: 0 bottom;}
  100% {background-position: 200px bottom;}
}

html代码

<div class="loading_bg">
    <div class="loading">
        <div class="show_01 show"></div>
        <div class="show_02 show"></div>
        <div class="show_03 show"></div>
        <div class="show_04 show"></div>
    </div>
</div>

css3动画：波浪效果

实现效果如图所示：首先得准备三张图，一张是浅黄色的背景图loading_bg.png，一张是深红色的图loading.png，最后一张为bolang.png。css代码body{background:#ffe894;}.loading_bg{width:113px;height:111px;background:url(loading_bg.png)no-repeatlefttop;margin: 查看详情

css3波纹特效h5实现动态波浪

css3实现动态波纹特效，由于css3里面有过渡和动画效果，现在利用css3实现动态波浪效果就很简单了，直接使用transform来实现就ok，使得translateX产生偏移就可以不断实现循环动态效果，这样就比传统的flash来实现更为简单。而且对... 查看详情

svg波浪动画(代码片段)

今天来试试用svg+css3制作波浪动画下图是我制作出的效果还不错吧在制作波浪前，首先我们要画波浪啊，至于画波浪，如果你想直接通过计算贝塞尔曲线绘制出波浪。。。好吧，那我也不拦着你我就直接用ai的钢笔工具画了为了... 查看详情

如何在 vuejs 中创建动画“波浪”效果？

】如何在vuejs中创建动画“波浪”效果？【英文标题】：Howtocreateanimated"wave"effectinvuejs?【发布时间】：2020-10-0113:56:16【问题描述】：这种效果的名称是什么？在标题上方什么是软盒？我的意思是波浪线，比如here.它也在标... 查看详情

css3实现悬停波浪效果

<ahref=""class="a1">商家入口</a>.a1{ 　　background-color:orange; 　　display:inline-block; 　　width:100px; 　　height:35px; 　　text-align:center; 　　text-decoration:none; 　　//设置好元素的定位和边界　　overflow:hi 查看详情

svg实现波浪效果(代码片段)

...形状　　　 A绘制圆弧形svganimate：制作波浪动画，为了波浪动画效果自然，设置values关键点　　　　　　　　　　　attributeName：变化属性名　　　　　　dur：动画时间　　　　　　repeatCount：循环次数<svgxmlns=... 查看详情

微信小程序：波浪动画实现

参考技术A先来看看效果(此效果web也适用)原理是三张图片通过动画滚动实现的图片只能是网络图片基本上就已经实现了动画，改成相应底色就可以了。查看详情

h5牛牛棋牌大厅搭建图文教程

[每天进步一点点~]uni-appcss制作雷达扫描、波浪移动动画效果

参考技术A第一种：第二种（有待改进，后续再补）查看详情

使用纯css实现波浪效果

...候我们需要实现水晃动的效果，其实我们可以通过css旋转动画和圆角来实现。首先来2个div,外层div相对定位，内层div绝对定位，内层div大致位于外层div上半部分。外层div设置一个颜色较深的背景色（水的颜色）;内层div颜色设置为... 查看详情

这些例子感觉很实用，希望对你也有帮助

html5css3圆形波浪加载动画特效点击》html5css3圆形波浪加载动画特效html5基于css3属性制作圆形容器波浪滚动上升加载动画效果代码。移动端企业工商服务网站模板https://www.mk2048.com/demo/demo_target_desc.php?id=hacicabc0j企业工商服务移动端... 查看详情

h5棋牌房间如何安装现在分享一套搭建教程

第八十三节，css3动画效果

CSS3动画效果学习要点：1.动画简介2.属性详解3.简写和版本本章主要探讨HTML5中CSS3的动画效果，可以通过类Flash那样的关键帧模式控制运行。一．动画简介 CSS3提供了类Flash关键帧控制的动画效果，通过animation... 查看详情

在 SwiftUI 中用波浪动画填充圆圈

】在SwiftUI中用波浪动画填充圆圈【英文标题】：FillcirclewithwaveanimationinSwiftUI【发布时间】：2020-08-1314:11:07【问题描述】：我在swiftUI中创建了一个圆圈，我想用正弦波动画填充它以实现水波效果/动画。我想用类似的外观填充它：... 查看详情

css3的动画效果

全新的css3加入的动画效果： [animation-name]：检索或设置对象所应用的动画名称[animation-duration]：检索或设置对象动画的持续时间[animation-timing-function]：检索或设置对象动画的过渡类型[animation-delay]：检索或设置对象动画延迟的... 查看详情

css3动画效果示例

CSS3动画遵循@kwyframes规则，规定了动画的名称、时长。1、示例代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>CSS3动画示例</title><style>*{margin:0;padding:0}section{widt 查看详情

33.css3动画效果

第二十六章 CSS3动画效果一、动画简介 & 查看详情

css3动画效果：33d动画

立方体旋转动画效果css1#container{2width:400px;3height:400px;4-webkit-perspective:800;5perspective:800;6-webkit-perspective-origin:50%225px;7perspective-origin:50%225px;89}10#stage{11width:300px;12height:300px; 查看详情