css3波纹效果

最新推荐文章于 2024-06-12 10:15:41 发布
最新推荐文章于 2024-06-12 10:15:41 发布
阅读量1.3k 收藏
点赞数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>波纹效果</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.contain-box{
width: 300px;
height: 240px;
margin: 50px auto;
position: relative;
/*background: #009ad7;*/
overflow: hidden;
}
.contain-box .wave{
position: absolute;
top: 0;
left: 50%;
z-index: 0;
margin-top: -290px;
margin-left: -230px;
height: 500px;
width: 500px;
background: #009ad7;
background:-webkit-linear-gradient(top,#009ad7,#28e7eb);
            background:-moz-linear-gradient(top,#009ad7,#28e7eb);
            border-radius: 44%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transform-origin: 50% 48%;
animation: waves 12s infinite linear;
opacity: .8;
}
.contain-box .wave.two{
opacity: .4;
animation: waves 6s infinite linear;

}
.contain-box .wave.three{

/* margin-top: -450px;
margin-left: -450px;*/
background-color: yellow;
opacity: .1;
animation: waves 15s infinite linear;

}
@keyframes waves{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="contain-box">
<div class="one wave"></div>
<div class="two wave"></div>
<div class="three wave"></div>
</div>
</body>
</html>
渣渣楠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3波浪音阶动画特效
06-24
CSS3波浪音阶动画特效是一款基于js跟css3绘制的音乐播放音阶频率波浪动画特效。
【css3】音频波纹加载效果
m0_56054312的博客
03-25 846
【代码】【css3】音频波纹加载效果。
css系列：音频播放效果-波纹律动
最新发布
zkx529的博客
06-12 1657
音频律动效果，实现了语音播放时的带有动画的特殊样式的进度条
CSS写的音频波纹效果
weixin_33802505的博客
06-11 4617
2019独角兽企业重金招聘Python工程师标准>>> ...
css 波纹扩散_html5 +css3 点击后水波纹扩散效果 兼容移动端
weixin_32306175的博客
12-24 189
html5+ js +css3 点击后水波纹扩散效果 兼容移动端-幸凡学习网body{margin:0;padding:0;}.center{text-align:center}.btn{position:relative;width:13em;height:3em;margin:2em;border:none;outline:none;letter-spacing:.2em;font-weigh...
css特效——音波加载
FallToHer的博客
04-26 564
音波加载 文章目录音波加载一、搭建思路二、步骤代码style="--num:1" 对于这个不懂的话下面有讲解。定义一个先下后上的动画三、CSS函数var()四、效果展示 接上一篇的内容 一、搭建思路 首先，造一个大的盒子outbox，接着往里面填充10个小盒子span。设置他们的布局，先让大盒子绕X轴旋转一定的角度，达到斜俯视的效果，更像3D.接着，将小盒子按顺序缩小，做成套环的样子，最后，设置动画效果，让每个小的盒子 都按向上后下的动画动起来，在按顺序延迟一定的秒数。这样就成了联动效果。 二、步
css3+js实现水波纹效果
03-28
css3+js实现水波纹效果，跟随点击位置为中心扩散，效果很不错，适用于主流浏览器。
js+css3波纹催眠动画特效
06-24
当用户触发某个事件（如点击）时，JavaScript会动态修改元素的大小或位置，配合CSS3的transition，使得元素的背景像水波一样向外扩散，形成波纹效果。此外，通过设置动画的循环次数和延迟时间，可以创造出不同节奏的...
C3波纹效果
08-20
【C3波纹效果】是一种使用CSS3技术实现的动态视觉效果，常见于网页设计中，尤其是按钮点击、鼠标悬停等交互时，为用户提供视觉反馈。这种效果模拟了水面上涟漪扩散的情景，增加了界面的生动性和用户体验。本文将深入...
利用css实现波纹动画效果实例
01-21
效果图如下 实例代码如下 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> <style> body{ background: #000; } .box{ width: 100%; height...
CSS3六边形波纹加载动画特效
07-24
波纹效果通常是通过径向渐变背景来创建的，使用background-image属性定义一个从中心点向外扩散的渐变。通过设置动画关键帧（@keyframes），可以控制背景的位置或半径随时间变化，从而形成波纹扩散和消失的动态效果。...
CSS3 svg 波浪效果
朝花夕拾的博客
02-20 427
svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"> <defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58.
超级好看的CSS波纹动画
枫ゞ的博客
09-19 216
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div...
CSS特效009：音频波纹加载律动
大剑师兰特的GIS世界
11-14 3313
css实战中，如何制作音频波纹加载律动效果呢？实际上很简单，主要用到keyframes状态的不同阶段，设置不同柱状条的高度、背景色、距顶部高度等。然后再来个动画无限大循环。
css3 做成的音频波动效果
热门推荐
Jason's Word
04-28 1万+
音频波效果 #container{ position:relative; } #container span{ width:5px; height: 5px; top:0px;
前端必学的CSS3波浪效果演示
一步一个脚印，踏实努力，向着目标前进
08-12 3877
通过在浏览器中打开这个示例，你可以看到一个简单的CSS3波浪效果。你可以根据需要调整容器的大小、颜色和动画效果来创建自己的波浪效果。这些示例只是展示了一些基本的CSS3波浪效果，你可以根据自己的需求进行调整和扩展，创造出更加独特的波浪效果。属性为伪元素添加了一个阴影效果，通过调整阴影的位置和颜色，可以创建出不同的波浪阴影效果。根据不同的需求和浏览器兼容性要求，你可以选择适合的波浪效果来应用到你的项目中。属性将伪元素的形状设置为圆形，从而创建了一个波浪形状的效果。值，从而实现波浪的运动效果。
CSS实现水波纹效果
weixin_43544930的博客
07-04 1231
【代码】CSS实现水波纹效果。
CSS3实现水波效果
MorningDuGe
01-14 7685
实现思路：利用伪类实现，伪类内容和背景图片一样，利用animation动画实现伪类的水波效果，而水波荡漾时最关键的就是： 像用放大镜看一样，因此，需先将图片长宽缩小后将其用放大镜即scale放大，逐渐增加其大小（此时仍小于原图）并减小其scale（此时scale仍大于1，因为实现的效果仍然是放大后的效果），最终将其大小和scale都设置成最初的大小。 水波荡漾时是从最中间开始由小变大的，所以在
css 实现水波纹效果
07-25
要实现水波纹效果，可以使用CSS的伪元素和动画来实现。下面是一个简单的示例代码： HTML: ```html <div class="ripple"></div> ``` CSS: ```css .ripple-container { position: relative; width: 200px; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值