CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Lobster);

html {

font-size: 1em;

}

body {

color: #bbb;

background-color: #444;

text-align: center;

}

fieldset {

border: #999 solid 0.2em;

border-radius: 0.5em;

display: inline-block;

text-align: left;

position: relative;

transition: border-color 0.25s linear;

}

fieldset:hover {

border: #bbb solid 0.2em;

}

legend {

font-size: 1.8em;

font-family: "Lobster", sans-serif;

padding-left: 0.3em;

padding-right: 0.2em;

color: #ace;

/* Slider *

* ====== */

/* ## Slider main element */

text-shadow: -0.125em 0.05em 0 #214893, -0.25em 0.1em 0 #313131;

}

input[type='range'] {

display: block;

margin: 0;

padding: 0;

font-size: inherit;

width: 9.9em;

height: 1em;

border-radius: 0.25em;

border: 0.2em solid #242424;

background-color: #242424;

background-size: 100% 100%;

background-repeat: no-repeat;

overflow: hidden;

cursor: pointer;

transition: box-shadow 0.2s linear;

box-shadow: 0 0 0 0 transparent;

}

input[type='range']:focus {

box-shadow: 0 0 0 0.1em #aaa;

}

input[type='range']:hover {

/* ## Orientation tweak, with [orient] attribute in degrees */

/* > I know it's not standard, but that's the cleaner way I was thinking of. */

box-shadow: 0 0 0 0.15em #6fc5f0;

}

input[type='range'][orient] {

transform: rotate(attr(orient));

}

input[type='range'][orient='90deg'] {

transform: rotate(90deg);

}

input[type='range'][orient='180deg'] {

transform: rotate(180deg);

}

input[type='range'][orient='270deg'] {

/* ### all vertical ranges : */

transform: rotate(270deg);

}

input[type='range'][orient='90deg'],

input[type='range'][orient='270deg'] {

margin: 4.5em -4.5em;

display: inline-block;

}

input[type='range'][orient='90deg']::-webkit-slider-thumb,

input[type='range'][orient='270deg']::-webkit-slider-thumb {

cursor: ns-resize;

}

input[type='range'][orient='90deg']::-moz-range-thumb,

input[type='range'][orient='270deg']::-moz-range-thumb {

cursor: ns-resize;

}

input[type='range'][orient='90deg']::-ms-thumb,

input[type='range'][orient='270deg']::-ms-thumb {

/* ## Slider components */

/* ### Slider::-track */

cursor: ns-resize;

}

input[type='range']::-webkit-slider-runnable-track {

border: none;

background: none;

height: 100%;

width: 100%;

}

input[type='range']::-moz-range-track {

border: none;

background: none;

height: 100%;

width: 100%;

}

input[type='range']::-ms-track {

border: none;

background: none;

height: 100%;

/* ### Slider::-thumb */

width: 100%;

}

input[type='range']::-webkit-slider-thumb {

margin: 0.05em;

padding: 0;

height: 0.9em;

width: 0.9em;

border-radius: 0.1em;

box-sizing: border-box;

border: none;

background-color: #6fc5f0;

box-shadow: -10em 0 0 0 #313131, -9em 0 0 0 #313131, -8em 0 0 0 #2f343f, -7em 0 0 0 #283f6b, -6em 0 0 0 #214893, -5em 0 0 0 #1a52bc, -4em 0 0 0 #2769d3, -3em 0 0 0 #3e87dc, -2em 0 0 0 #55a5e6, -1em 0 0 0 #6fc5f0, 1em 0 0 0 #181818, 2em 0 0 0 #181818, 3em 0 0 0 #181818, 4em 0 0 0 #181818, 5em 0 0 0 #181818, 6em 0 0 0 #181818, 7em 0 0 0 #181818, 8em 0 0 0 #181818, 9em 0 0 0 #181818;

cursor: ew-resize;

}

input[type='range']::-moz-range-thumb {

margin: 0.05em;

padding: 0;

height: 0.9em;

width: 0.9em;

border-radius: 0.1em;

box-sizing: border-box;

border: none;

background-color: #6fc5f0;

box-shadow: -10em 0 0 0 #313131, -9em 0 0 0 #313131, -8em 0 0 0 #2f343f, -7em 0 0 0 #283f6b, -6em 0 0 0 #214893, -5em 0 0 0 #1a52bc, -4em 0 0 0 #2769d3, -3em 0 0 0 #3e87dc, -2em 0 0 0 #55a5e6, -1em 0 0 0 #6fc5f0, 1em 0 0 0 #181818, 2em 0 0 0 #181818, 3em 0 0 0 #181818, 4em 0 0 0 #181818, 5em 0 0 0 #181818, 6em 0 0 0 #181818, 7em 0 0 0 #181818, 8em 0 0 0 #181818, 9em 0 0 0 #181818;

cursor: ew-resize;

}

input[type='range']::-ms-thumb {

margin: 0.05em;

padding: 0;

height: 0.9em;

width: 0.9em;

border-radius: 0.1em;

box-sizing: border-box;

border: none;

background-color: #6fc5f0;

box-shadow: -10em 0 0 0 #313131, -9em 0 0 0 #313131, -8em 0 0 0 #2f343f, -7em 0 0 0 #283f6b, -6em 0 0 0 #214893, -5em 0 0 0 #1a52bc, -4em 0 0 0 #2769d3, -3em 0 0 0 #3e87dc, -2em 0 0 0 #55a5e6, -1em 0 0 0 #6fc5f0, 1em 0 0 0 #181818, 2em 0 0 0 #181818, 3em 0 0 0 #181818, 4em 0 0 0 #181818, 5em 0 0 0 #181818, 6em 0 0 0 #181818, 7em 0 0 0 #181818, 8em 0 0 0 #181818, 9em 0 0 0 #181818;

/* ## Browser tweaks */

/* ### webkit */

cursor: ew-resize;

}

input[type='range'],

input[type='range']::-webkit-slider-runnable-track,

input[type='range']::-webkit-slider-thumb {

/* ### IE */

-webkit-appearance: none;

}

input[type='range']::-ms-track {

color: transparent;

}

input[type='range']::-ms-fill-lower,

input[type='range']::-ms-fill-upper,

input[type='range']::-ms-tooltip {

/* Label *

* ====== */

/* ## Label main element */

display: none;

}

label[type='range'] {

display: block;

position: relative;

margin: 0;

padding: 0;

font-size: inherit;

line-height: 0.6em;

width: 9.9em;

height: 1em;

border-radius: 0.25em;

color: #242424;

font-family: arial;

border: 0.2em solid transparent;

text-align: center;

border-bottom-color: #242424;

background-image: linear-gradient(#242424 calc(50% - .1em), #242424 calc(50% + .1em));

background-position: bottom center;

background-repeat: no-repeat;

background-size: 0.2em 0.2em;

color: #999;

}

label[type='range']:first-letter {

font-size: 0.6em;

}

label[type='range']::before,

label[type='range']::after {

display: block;

position: absolute;

height: 1em;

line-height: 1em;

width: 1em;

}

label[type='range']::before {

content: attr(before);

left: -0.2em;

text-align: left;

}

label[type='range']::after {

content: attr(after);

top: 0;

right: -0.2em;

text-align: right;

}

label[type='range'][orient='90deg'],

label[type='range'][orient='270deg'] {

border-bottom-color: transparent;

display: inline-block;

width: 1em;

height: 10.1em;

line-height: 10.1em;

vertical-align: top;

}

label[type='range'][orient='90deg'] {

border-bottom-color: transparent;

border-left-color: #242424;

background-position: center left;

text-align: center;

}

label[type='range'][orient='90deg']::before {

top: -0.2em;

bottom: auto;

left: 0.1em;

}

label[type='range'][orient='90deg']::after {

left: 0.1em;

top: auto;

bottom: -0.2em;

right: 0;

text-align: left;

}

label[type='range'][orient='180deg'] {

border-bottom-color: transparent;

border-top-color: #242424;

background-position: top center;

line-height: 1.4em;

}

label[type='range'][orient='180deg']::before {

bottom: 0;

left: auto;

right: -0.2em;

text-align: right;

}

label[type='range'][orient='180deg']::after {

bottom: 0;

left: -0.2em;

right: auto;

text-align: left;

}

label[type='range'][orient='270deg'] {

border-bottom-color: transparent;

border-right-color: #242424;

background-position: center right;

text-align: center;

}

label[type='range'][orient='270deg']::before {

bottom: -0.2em;

top: auto;

right: 0.1em;

left: auto;

text-align: right;

}

label[type='range'][orient='270deg']::after {

right: 0.1em;

bottom: auto;

top: -0.2em;

left: auto;

text-align: right;

}

css3 fieldset,CSS3 fieldset/input 音乐均衡器/音效调节器相关推荐

  1. QQ音乐银河音效技术实践——音乐重放效果的补偿与修饰

    音效渲染是音频或音乐播放器最为重要的后处理模块之一.LiveVideoStackCon 2022 北京站邀请到腾讯音乐银河音效开发负责人--闫震海,为大家介绍银河音效在QQ音乐播放器中的创新应用,包括 ...

  2. CSS3：CSS3 文本效果

    ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow bo ...

  3. 关于COCOS2D-X 中的音乐与音效应用的备注

    UI在游戏中占有很重要的地位,但吸引玩家的除了这些看得到的界面和动画之外,游戏在后台中播放的背景音乐及游戏中打击.动作等音效的配合则会让游戏更受玩家的喜爱.在Cocos2D-X中也为我们封装了一个跨平 ...

  4. 音乐、音效素材库，好听的BGM都在这~

    推荐6个超好用的音频素材网站,免费可商用,热门BGM配乐都能找到,自媒体视频剪辑必备!建议收藏! 1.菜鸟图库 https://www.sucai999.com/audio.html?v=NTYxMj ...

  5. 【CSS3】CSS3动画——我离前端的炫酷又近了一步

    [CSS3]CSS3动画--我离前端的炫酷又近了一步 博客说明 文章所涉及的部分资料来自互联网整理,当然还有自己个人的总结和看法,分享的目的在于共建社区和巩固自己.引用的资料如有侵权,请联系本人删除! ...

  6. cocos2dX 之音乐与音效

    今天, 我们来学习cocos2dX里面的音乐和音效, 为什么学他呢, 难道你喜欢看无声电影( 旁白: 我就喜欢关着声音玩), 我们不要管旁白了, 她是个疯子 老规矩, 资源准备好: 一首<故宫神 ...

  7. pygame-KidsCanCode系列jumpy-part14-背景音乐及音效

    没有音乐和音效的游戏是没有灵魂的,这回讲解如何处理背景音乐及跳跃音效.加载music及sound的方法,之前已经写过,见:pygame 笔记-8 背景音乐&子弹音效 . 先介绍一个很棒的生成各 ...

  8. 什么是css3，css3选择器是什么

    一.初始css3 1.什么是CSS,什么是CSS3? 非常简单,CSS代表"Casading Style Sheets",就是样式表,是一种替代并为网站添加样式的标记性语言.现在所 ...

  9. 技术答疑丨如何区分游戏短音乐与音效以及配音

    在游戏的声音领域,一般游戏音乐.音效与配音,但是每个类别又有不同的细分,在我们奇亿音乐与游戏厂商的日常沟通中,发现这些问题一直困扰着大家,一起来看看吧. 1.如何区分游戏的音效与配音? 游戏音效也是泛 ...

最新文章

  1. python数据结构推荐书-「算法与数据结构」从入门到进阶吐血整理推荐书单
  2. Netty详解（四）：Netty 整体架构
  3. 解读综合布线12大热点技术趋势
  4. 【机器学习】银行贷款违约预测
  5. 站立会议（11月19日）
  6. 不行！不能这样下去！
  7. vue判断列表中包含某一项_判断字符串中是否包含某个字符串
  8. IOS设计模式第二篇之单例设计模式
  9. Rational Rose ：从用例图开始
  10. java每隔多长时间执行一次_crontab中如何实现每隔多少天执行一次脚本
  11. setTimeout(), nextTick(),setImmediate()区别 ZT~
  12. 使用C#创建一个进程杀手Windows服务
  13. 毕业论文排版，格式总结
  14. 聚合数据简易开发流程
  15. 认识蜂鸣器和声音奥秘
  16. 柠檬班性能测试day05-0526-04环境安装配置
  17. 7-2 二叉搜索树的删除操作
  18. 电容外观检测（牛角电容瑕疵缺陷视觉检测系统）
  19. docker--compose
  20. ERP系统有效提高生产计划合理性

热门文章

  1. Educational Round 26 C. Two Seals
  2. swift可选隐式可选类型
  3. VB.net中的sender和e
  4. oracle xsql 详解(一)
  5. VIVADO常见警告、错误及解决方法
  6. vim 保存文件的回车换行模式
  7. item 12: 把重写函数声明为“override”的
  8. POJ 3761 Bubble Sort（乘方取模）
  9. xlinux中实现mdev
  10. ASP.NET MVC Url中参数过长引发的问题