css音量调节,CSS3 音量调节动画

最新推荐文章于 2024-03-19 11:58:01 发布
最新推荐文章于 2024-03-19 11:58:01 发布
阅读量481 收藏
点赞数
文章标签： css音量调节
本文介绍了一个使用CSS实现的动画效果案例，通过定义不同的动画延迟时间和高度变化，创建了一系列动态的竖条，展示了如何利用CSS动画属性来制作视觉效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

CSS

语言：

CSSSCSS

确定

html {

background: #222232; }

.shaft-load, .shaft-load2 {

/* @include centerer; */

margin: 50px auto; }

.shaft-load > div, .shaft-load2 > div {

background: #b96cff;

height: 100%;

width: 5px;

margin: 0;

padding: 0;

display: inline-block; }

.shaft-load {

width: 100px;

height: 30px; }

.shaft-load > div {

-webkit-animation: grow 1.5s infinite ease-in-out;

-moz-animation: grow 1.5s infinite ease-in-out;

-o-animation: grow 1.5s infinite ease-in-out;

animation: grow 1.5s infinite ease-in-out; }

.shaft-load .shaft1 {

-webkit-animation-delay: -1.5s;

-moz-animation-delay: -1.5s;

-o-animation-delay: -1.5s;

animation-delay: -1.5s; }

.shaft-load .shaft2 {

-webkit-animation-delay: -1.45s;

-moz-animation-delay: -1.45s;

-o-animation-delay: -1.45s;

animation-delay: -1.45s; }

.shaft-load .shaft3 {

-webkit-animation-delay: -1.4s;

-moz-animation-delay: -1.4s;

-o-animation-delay: -1.4s;

animation-delay: -1.4s; }

.shaft-load .shaft4 {

-webkit-animation-delay: -1.35s;

-moz-animation-delay: -1.35s;

-o-animation-delay: -1.35s;

animation-delay: -1.35s; }

.shaft-load .shaft5 {

-webkit-animation-delay: -1.3s;

-moz-animation-delay: -1.3s;

-o-animation-delay: -1.3s;

animation-delay: -1.3s; }

.shaft-load .shaft6 {

-webkit-animation-delay: -1.25s;

-moz-animation-delay: -1.25s;

-o-animation-delay: -1.25s;

animation-delay: -1.25s; }

.shaft-load .shaft7 {

-webkit-animation-delay: -1.2s;

-moz-animation-delay: -1.2s;

-o-animation-delay: -1.2s;

animation-delay: -1.2s; }

.shaft-load .shaft8 {

-webkit-animation-delay: -1.15s;

-moz-animation-delay: -1.15s;

-o-animation-delay: -1.15s;

animation-delay: -1.15s; }

.shaft-load .shaft9 {

-webkit-animation-delay: -1.1s;

-moz-animation-delay: -1.1s;

-o-animation-delay: -1.1s;

animation-delay: -1.1s; }

.shaft-load .shaft10 {

-webkit-animation-delay: -1.05s;

-moz-animation-delay: -1.05s;

-o-animation-delay: -1.05s;

animation-delay: -1.05s; }

.shaft-load2 {

width: 100px;

height: 30px; }

.shaft-load2 > div {

-webkit-animation: grow 1.5s infinite ease-in-out;

-moz-animation: grow 1.5s infinite ease-in-out;

-o-animation: grow 1.5s infinite ease-in-out;

animation: grow 1.5s infinite ease-in-out; }

.shaft-load2 .shaft1 {

height: 100%;

-webkit-animation-delay: -1.5s;

-moz-animation-delay: -1.5s;

-o-animation-delay: -1.5s;

animation-delay: -1.5s; }

.shaft-load2 .shaft2 {

height: 110%;

-webkit-animation-delay: -1.45s;

-moz-animation-delay: -1.45s;

-o-animation-delay: -1.45s;

animation-delay: -1.45s; }

.shaft-load2 .shaft3 {

height: 120%;

-webkit-animation-delay: -1.4s;

-moz-animation-delay: -1.4s;

-o-animation-delay: -1.4s;

animation-delay: -1.4s; }

.shaft-load2 .shaft4 {

height: 130%;

-webkit-animation-delay: -1.35s;

-moz-animation-delay: -1.35s;

-o-animation-delay: -1.35s;

animation-delay: -1.35s; }

.shaft-load2 .shaft5 {

height: 140%;

-webkit-animation-delay: -1.3s;

-moz-animation-delay: -1.3s;

-o-animation-delay: -1.3s;

animation-delay: -1.3s; }

.shaft-load2 .shaft6 {

height: 150%;

-webkit-animation-delay: -1.25s;

-moz-animation-delay: -1.25s;

-o-animation-delay: -1.25s;

animation-delay: -1.25s; }

.shaft-load2 .shaft7 {

height: 160%;

-webkit-animation-delay: -1.2s;

-moz-animation-delay: -1.2s;

-o-animation-delay: -1.2s;

animation-delay: -1.2s; }

.shaft-load2 .shaft8 {

height: 170%;

-webkit-animation-delay: -1.15s;

-moz-animation-delay: -1.15s;

-o-animation-delay: -1.15s;

animation-delay: -1.15s; }

.shaft-load2 .shaft9 {

height: 180%;

-webkit-animation-delay: -1.1s;

-moz-animation-delay: -1.1s;

-o-animation-delay: -1.1s;

animation-delay: -1.1s; }

.shaft-load2 .shaft10 {

height: 190%;

-webkit-animation-delay: -1.05s;

-moz-animation-delay: -1.05s;

-o-animation-delay: -1.05s;

animation-delay: -1.05s; }

@-webkit-keyframes grow {

0%, 100% {

-webkit-transform: scaleY(0.05) translateX(-10px);

-moz-transform: scaleY(0.05) translateX(-10px);

-ms-transform: scaleY(0.05) translateX(-10px);

-o-transform: scaleY(0.05) translateX(-10px);

transform: scaleY(0.05) translateX(-10px); }

50% {

-webkit-transform: scaleY(1.5) translateX(10px);

-moz-transform: scaleY(1.5) translateX(10px);

-ms-transform: scaleY(1.5) translateX(10px);

-o-transform: scaleY(1.5) translateX(10px);

transform: scaleY(1.5) translateX(10px);

background: #56d7c6; } }

@-moz-keyframes grow {

0%, 100% {

-webkit-transform: scaleY(0.05) translateX(-10px);

-moz-transform: scaleY(0.05) translateX(-10px);

-ms-transform: scaleY(0.05) translateX(-10px);

-o-transform: scaleY(0.05) translateX(-10px);

transform: scaleY(0.05) translateX(-10px); }

50% {

-webkit-transform: scaleY(1.5) translateX(10px);

-moz-transform: scaleY(1.5) translateX(10px);

-ms-transform: scaleY(1.5) translateX(10px);

-o-transform: scaleY(1.5) translateX(10px);

transform: scaleY(1.5) translateX(10px);

background: #56d7c6; } }

@-o-keyframes grow {

0%, 100% {

-webkit-transform: scaleY(0.05) translateX(-10px);

-moz-transform: scaleY(0.05) translateX(-10px);

-ms-transform: scaleY(0.05) translateX(-10px);

-o-transform: scaleY(0.05) translateX(-10px);

transform: scaleY(0.05) translateX(-10px); }

50% {

-webkit-transform: scaleY(1.5) translateX(10px);

-moz-transform: scaleY(1.5) translateX(10px);

-ms-transform: scaleY(1.5) translateX(10px);

-o-transform: scaleY(1.5) translateX(10px);

transform: scaleY(1.5) translateX(10px);

background: #56d7c6; } }

@keyframes grow {

0%, 100% {

-webkit-transform: scaleY(0.05) translateX(-10px);

-moz-transform: scaleY(0.05) translateX(-10px);

-ms-transform: scaleY(0.05) translateX(-10px);

-o-transform: scaleY(0.05) translateX(-10px);

transform: scaleY(0.05) translateX(-10px); }

50% {

-webkit-transform: scaleY(1.5) translateX(10px);

-moz-transform: scaleY(1.5) translateX(10px);

-ms-transform: scaleY(1.5) translateX(10px);

-o-transform: scaleY(1.5) translateX(10px);

transform: scaleY(1.5) translateX(10px);

background: #56d7c6; } }

@-webkit-keyframes grow {

0%, 100% {

-webkit-transform: scaleY(0.05) translateX(-10px);

-moz-transform: scaleY(0.05) translateX(-10px);

-ms-transform: scaleY(0.05) translateX(-10px);

-o-transform: scaleY(0.05) translateX(-10px);

transform: scaleY(0.05) translateX(-10px); }

50% {

-webkit-transform: scaleY(1.5) translateX(10px);

-moz-transform: scaleY(1.5) translateX(10px);

-ms-transform: scaleY(1.5) translateX(10px);

-o-transform: scaleY(1.5) translateX(10px);

transform: scaleY(1.5) translateX(10px);

background: #56d7c6; } }

@-moz-keyframes grow {

0%, 100% {

-webkit-transform: scaleY(0.05) translateX(-10px);

-moz-transform: scaleY(0.05) translateX(-10px);

-ms-transform: scaleY(0.05) translateX(-10px);

-o-transform: scaleY(0.05) translateX(-10px);

transform: scaleY(0.05) translateX(-10px); }

50% {

-webkit-transform: scaleY(1.5) translateX(10px);

-moz-transform: scaleY(1.5) translateX(10px);

-ms-transform: scaleY(1.5) translateX(10px);

-o-transform: scaleY(1.5) translateX(10px);

transform: scaleY(1.5) translateX(10px);

background: #56d7c6; } }

@-o-keyframes grow {

0%, 100% {

-webkit-transform: scaleY(0.05) translateX(-10px);

-moz-transform: scaleY(0.05) translateX(-10px);

-ms-transform: scaleY(0.05) translateX(-10px);

-o-transform: scaleY(0.05) translateX(-10px);

transform: scaleY(0.05) translateX(-10px); }

50% {

-webkit-transform: scaleY(1.5) translateX(10px);

-moz-transform: scaleY(1.5) translateX(10px);

-ms-transform: scaleY(1.5) translateX(10px);

-o-transform: scaleY(1.5) translateX(10px);

transform: scaleY(1.5) translateX(10px);

background: #56d7c6; } }

@keyframes grow {

0%, 100% {

-webkit-transform: scaleY(0.05) translateX(-10px);

-moz-transform: scaleY(0.05) translateX(-10px);

-ms-transform: scaleY(0.05) translateX(-10px);

-o-transform: scaleY(0.05) translateX(-10px);

transform: scaleY(0.05) translateX(-10px); }

50% {

-webkit-transform: scaleY(1.5) translateX(10px);

-moz-transform: scaleY(1.5) translateX(10px);

-ms-transform: scaleY(1.5) translateX(10px);

-o-transform: scaleY(1.5) translateX(10px);

transform: scaleY(1.5) translateX(10px);

background: #56d7c6; } }

CSS3使用animation实现一个类音量跳动加载图标
justforuse的博客
10-04 6952
效果图： 源码：<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div { display: inline-block;
音量切换CSS开关（volume toggle CSS switch）
知屋安砖
04-10 493
音量切换开关示例代码HTMLCSS 更多有趣示例 尽在 小红砖社区 示例 代码 HTML <label class="volume"> <input type="checkbox"> <svg viewBox="0 0 108 96"> <path d="M7,28 L35,28 L35,28 L59,8 L59,88 L...
jquery+css3控制音量调节
01-25
css3滑动条动画控制网站音量调节,jquery调用音量控制播放
css音量调节,CSS3 音量调节旋钮
weixin_35922490的博客
08-04 854
CSS语言：CSSSCSS确定ul {height: 40px;left: 50%;margin-left: -100px;margin-top: -20px;position: absolute;top: 50%;text-align: center;width: 200px; }.knob {background: -webkit-repeating-linear-gradient(145de...
css音量调节,原生js+css调节音量滑块
weixin_39531229的博客
08-04 739
本文实例为大家分享了js调节音量滑块的具体代码，供大家参考，具体内容如下html部分当前位置0%css部分.all {width: 500px;height: 80px;margin: 100px auto;position: relative;}.bar {width: 500px;height: 20px;border-radius: 10px;background: #aaa;positio...
css3实现音阶音频动画
社会人
01-02 3342
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS音阶动画</title> <style> .box{ width: 100px; background: red; } .box .main{ ...
CSS3实现音量控制动画
weixin_33795743的博客
06-17 1774
先上效果图，由于时间关系，记录下实现过程。 仔细观看效果，实现思路及用到的css3如下：采用svg绘制喇叭主体(假定喇叭由左右2个path组成)，动效实现：1，插入声波弧线并将位置matrix到喇叭口的竖线上: <g opacity="0" transform="matrix(1,0,0,1,32,10.859)" id='lin...
HTML5+CSS3实现的音量调节旋转按钮动态特效源码
08-31
实现了点击图标中间的按钮后拖动就可以调节音量的效果，只要按住鼠标即可旋转按钮来调节音量。本段代码是英语所有网页使用，有兴趣的朋友们可以前来下载使用。
css3的一个小动画-----声音跳动
qq_53280805的博客
11-21 1191
做视频的时候感觉每集在播放的时候有一个小动画在跳动感觉挺好看的，就觉得自己也要做一个，以前做的那个不是在同一个底线上的，他是来回跳动的，看着有点乱1，这星期我就把他的高度调了一下，后来发现我做的和爱奇艺上的是上下颠倒的，试试translateY的正负，发现越试越离谱，最后就想到了转他1890度，终于达到了想要的效果。 <div class='bounc'> <ul>
css 渐变动画_电子音乐站点导航，第1部分：CSS渐变动画
cungui5726的博客
08-18 212
css 渐变动画One of my interests is making proof-of-concept navigation templates for different kinds of music websites. Previously, I’ve created a Rock Band design; this time, my thoughts turned to electro...
HTML5 CSS3音量调节旋转按钮.zip
07-04
HTML5 CSS3音量调节旋转按钮是一款基于jQuery CSS3 HTML5实现的音量调节旋转按钮，只要按住鼠标即可旋转按钮来调节音量。
纯css3波浪音阶动画特效
07-24
纯css3波浪音阶动画特效是一款通过html和css3实现的彩色的波浪音阶动画效果代码。
css 简单的音频跳动的动画
liangyk1005的博客
05-19 2626
vue组件 <template> <div id="app"> <div id="box"> <div></div> <div></div> <div></div> <div></div> </div> </div> </template> <script
html怎么显示音量条,原生js+css调节音量滑块
weixin_28834169的博客
06-17 1319
本文实例为大家分享了js调节音量滑块的具体代码，供大家参考，具体内容如下效果html部分当前位置0%css部分.all {width: 500px;height: 80px;margin: 100px auto;position: relative;}.bar {width: 500px;height: 20px;border-radius: 10px;background: #aaa;posit...
css+原生js调节音量滑块
weixin_41770018的博客
07-09 7930
效果html部分&lt;body&gt; &lt;div class="all"&gt; &lt;p&gt;当前位置0%&lt;/p&gt; &lt;div class="bar"&gt; &lt;div class="box"&gt;&lt;/div&gt; &lt;/div&gt; &a
有趣的css - 音频小动效
最新发布
设计师工作日常
03-19 2708
用 css3 实现一个好玩的音频小动效。
css 语音,用css完成语音助手小动画
weixin_39942637的博客
08-03 922
用css完成语音助手小动画2020年08月10日|萬仟网IT编程 |我要评论震惊！用css完成语音助手小动画不要太简单！语音助手动画定位布局添加动画语音助手动画hello大家好，我是Aaron。想必大家都见过这个页面，在各个平台的语音助手都可以看到类似的动画。那么这个小动画用css怎么实现呢，其实我们只需要考虑最重要的两点，一是用定位布局把我们所...
css 语音,CSS3新特性一览-- 语音
weixin_32451453的博客
08-03 621
13. 语音CSS3的语音模块CSS3可以让你为屏幕阅读者指定语音样式。你可以控制语音的不同设置，比如:voice-volume使用从0到100的数字(0 即静音)、百分数或关键词(silent,x-soft,soft,medium,loud和x-loud等)来设置音量。voice-balance控制来自哪个声道(如果用户的音箱系统支持立体声)。Speak指示屏幕阅读器阅读相关的文字、数字或标点符...
HTML5和CSS3打造动态音量调节旋钮特效
本段HTML5+CSS3实现的音量调节旋转按钮动态特效源码涵盖了一系列现代Web开发的关键技术，包括HTML5的新语义元素、CSS3的视觉效果和动画、JavaScript的交互逻辑以及跨平台和跨浏览器的兼容性处理。通过将代码分解成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值