css3 手机信号,CSS3 很漂亮的信号频率调节滑块

最新推荐文章于 2022-09-19 16:27:40 发布
最新推荐文章于 2022-09-19 16:27:40 发布
阅读量324 收藏
点赞数
文章标签： css3 手机信号

CSS

语言：

CSSSCSS

确定

html,

body {

min-height: 26em;

height: 100%;

}

html {

overflow: hidden;

}

body {

display: flex;

flex-direction: column;

justify-content: center;

margin: 0;

transform: rotate(-90deg);

background: #e9dbdb;

}

input[type='range'] {

align-self: center;

margin: -0.75em 0;

border: solid 1.5em transparent;

padding: 0;

width: 13em;

height: 2.25em;

background: repeating-linear-gradient(90deg, #c5b9b9, #c5b9b9 0.0625em, transparent 0.0625em, transparent 2em) no-repeat 50% 0.4375em border-box, repeating-linear-gradient(90deg, #c5b9b9, #c5b9b9 0.0625em, transparent 0.0625em, transparent 2em) no-repeat 50% 4.1875em border-box, linear-gradient(90deg, rgba(195, 183, 183, 0), #c3b7b7, rgba(195, 183, 183, 0)) no-repeat 50% 50% border-box;

background-size: 12.0625em 0.625em, 12.0625em 0.625em, 100% 2.25em;

font-size: 1em;

cursor: pointer;

}

input[type='range'],

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

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

-webkit-appearance: none;

}

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

position: relative;

width: 13em;

height: 0.5em;

border-radius: .1875em;

background: rgba(201, 191, 191, 0.825);

}

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

width: 13em;

height: 0.5em;

border-radius: .1875em;

background: rgba(201, 191, 191, 0.825);

}

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

border: none;

width: 13em;

height: 0.5em;

border-radius: .1875em;

background: rgba(201, 191, 191, 0.825);

color: transparent;

}

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

display: none;

}

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

margin-top: -0.75em;

border: none;

width: 4em;

height: 2em;

border-radius: .5em;

box-shadow: -.125em 0 .25em #928886, inset -1px 0 1px #fff;

background: radial-gradient(#ebe1e0 10%, rgba(235, 225, 224, 0.2) 10%, rgba(235, 225, 224, 0) 72%) no-repeat 50% 50%, radial-gradient(at 100% 50%, #e9dfde, #eae1de 71%, rgba(0, 0, 0, 0) 71%) no-repeat 2.5em 50%, linear-gradient(90deg, #e9dfde, #d0c8c6) no-repeat 100% 50%, radial-gradient(at 0 50%, #d0c6c5, #c6baba 71%, rgba(0, 0, 0, 0) 71%) no-repeat 0.75em 50%, linear-gradient(90deg, #e3d9d8, #d0c6c5) no-repeat 0 50%, linear-gradient(#cdc0c0, #fcf5ef, #fcf5ef, #cdc0c0);

background-size: 0.825em 100%;

}

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

border: none;

width: 4em;

height: 2em;

border-radius: .5em;

box-shadow: -.125em 0 .25em #928886, inset -1px 0 1px #fff;

background: radial-gradient(#ebe1e0 10%, rgba(235, 225, 224, 0.2) 10%, rgba(235, 225, 224, 0) 72%) no-repeat 50% 50%, radial-gradient(at 100% 50%, #e9dfde, #eae1de 71%, rgba(0, 0, 0, 0) 71%) no-repeat 2.5em 50%, linear-gradient(90deg, #e9dfde, #d0c8c6) no-repeat 100% 50%, radial-gradient(at 0 50%, #d0c6c5, #c6baba 71%, rgba(0, 0, 0, 0) 71%) no-repeat 0.75em 50%, linear-gradient(90deg, #e3d9d8, #d0c6c5) no-repeat 0 50%, linear-gradient(#cdc0c0, #fcf5ef, #fcf5ef, #cdc0c0);

background-size: 0.825em 100%;

}

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

border: none;

width: 4em;

height: 2em;

border-radius: .5em;

box-shadow: -.125em 0 .25em #928886, inset -1px 0 1px #fff;

background: radial-gradient(#ebe1e0 10%, rgba(235, 225, 224, 0.2) 10%, rgba(235, 225, 224, 0) 72%) no-repeat 50% 50%, radial-gradient(at 100% 50%, #e9dfde, #eae1de 71%, rgba(0, 0, 0, 0) 71%) no-repeat 2.5em 50%, linear-gradient(90deg, #e9dfde, #d0c8c6) no-repeat 100% 50%, radial-gradient(at 0 50%, #d0c6c5, #c6baba 71%, rgba(0, 0, 0, 0) 71%) no-repeat 0.75em 50%, linear-gradient(90deg, #e3d9d8, #d0c6c5) no-repeat 0 50%, linear-gradient(#cdc0c0, #fcf5ef, #fcf5ef, #cdc0c0);

background-size: 0.825em 100%;

}

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

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

input[type='range'] /deep/ #track:before,

input[type='range'] /deep/ #track:after {

position: absolute;

font: 0.75em/8em trebuchet ms, arial, sans-serif;

}

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

input[type='range'] /deep/ #track:before {

top: 50%;

right: 100%;

transform: translate(50%, -50%) rotate(90deg) translate(0, 32%);

}

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

input[type='range'] /deep/ #track:after {

left: 50%;

width: 3em;

word-spacing: 1em;

}

input[type='range']:nth-of-type(1)::-webkit-slider-runnable-track:before,

input[type='range']:nth-of-type(1) /deep/ #track:before {

content: "320Hz";

}

input[type='range']:nth-of-type(1)::-webkit-slider-runnable-track:after,

input[type='range']:nth-of-type(1) /deep/ #track:after {

bottom: 100%;

transform: translate(-50%, 50%) rotate(90deg) translate(-4.375em);

text-align: right;

}

input[type='range']:nth-of-type(2)::-webkit-slider-runnable-track:before,

input[type='range']:nth-of-type(2) /deep/ #track:before {

content: "600Hz";

}

input[type='range']:nth-of-type(3)::-webkit-slider-runnable-track:before,

input[type='range']:nth-of-type(3) /deep/ #track:before {

content: "1KHz";

}

input[type='range']:nth-of-type(4)::-webkit-slider-runnable-track:before,

input[type='range']:nth-of-type(4) /deep/ #track:before {

content: "3KHz";

}

input[type='range']:nth-of-type(5)::-webkit-slider-runnable-track:before,

input[type='range']:nth-of-type(5) /deep/ #track:before {

content: "6KHz";

}

input[type='range']:nth-of-type(6)::-webkit-slider-runnable-track:before,

input[type='range']:nth-of-type(6) /deep/ #track:before {

content: "12KHz";

}

input[type='range']:nth-of-type(6)::-webkit-slider-runnable-track:after,

input[type='range']:nth-of-type(6) /deep/ #track:after {

top: 100%;

transform: translate(-50%, -50%) rotate(90deg) translate(4.375em);

}

input[type='range']:nth-of-type(1)::-webkit-slider-runnable-track:after,

input[type='range']:nth-of-type(1) /deep/ #track:after,

input[type='range']:nth-of-type(6)::-webkit-slider-runnable-track:after,

input[type='range']:nth-of-type(6) /deep/ #track:after {

content: '+18 0 -18';

}

input[type='range']:focus {

outline: none;

}

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

background: #898586;

}

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

background: #898586;

}

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

background: #898586;

}

weixin_39762856
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 3.0实现模拟手机信号加载动画
越陌度阡
10-26 772
给大家分享一个用CSS 3.0实现的模拟手机信各异的加载动画，效果如下： 以下是代码实现，欢迎大家复制、粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
纯 CSS 实现十个还不错的 Loading 效果
weixin_46837985的博客
04-14 355
作者：Jimmyhttps://juejin.cn/post/7080542771387301896loading_banner.png在推特上面看到T. Afif[1]介绍的十个Loading效果。如上图。Yeah，很赞哦，挺实用的，遂记录下来。为保证运行正常，咱先规定下：*{ box-sizing:border-box; } 复制代码1. 平滑加载1....
html实现模拟手机信号强度.zip
08-28
html 手机信号强度 网页实现模拟手机信号强度，收起来备用
CSS实现手机信号条
最新发布
Haines
09-19 1115
CSS实现手机信号条
css3 手机信号,css3实现wifi信号逐渐增强效果
weixin_29058331的博客
08-04 391
效果图image.png下面是实现代码：wifi信号*{margin: 0;padding: 0;}.box {width: 240px;height: 240px;box-sizing: border-box;position: relative;margin: 100px auto;}.wifi-symbol {width: 200px;height: 200px;margin-left: 1...
纯css实现手机通讯录
weixin_33901641的博客
10-17 1088
我们经常在手机上看到通讯录列表，这类布局一般有两个显著的效果 首字母吸顶 快速定位 下面我们来实现一下 页面结构 这里页面结构很简单，就是两个列表 <div class="con"> <!--联系人列表--> <div class="contacts" id="contacts">...
css3实现wifi信号逐渐增强效果实例
09-24
本篇文章主要介绍了css3实现wifi信号逐渐增强效果实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
纯CSS实现手机信号样式的进度条
dizuncainiao的博客
09-26 3250
接下来这一篇是纯CSS实现的类似手机信号样式的进度条，较之前更加高大上、炫酷，更小（几行css代码不到1k）.
css3 手机信号,CSS3 无线路由器连接信号动画
weixin_39958025的博客
08-04 239
CSS语言：CSSSCSS确定#page-preloader {background: #ffa805;position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 100500;font-family: sans-serif;-webkit-touch-callout: none;-webkit-user-select: none;-kht...
原生JS+DIV实现手机信号强度
03-28
原生JS+DIV实现手机信号强度
原生JS+DIV模拟手机信号强度
03-28
原生JS+DIV模拟手机信号强度
Vue2 css signal chart
01-19
npm install/yarn npm run serve
小程序笔记(八)之wxss实现手机信号图标
我是黄同学博客
05-06 650
一.前言 楼主在实际开发过程中，遇到要显示设备信号强度的需求，本来想着用数字来表示，但是对于用户来说，图标相对数字更加直观，一开始打算用图片，做一个简单粗暴的替换，效果是实现了，但是不怎么合理，还是需要样式来实现合理点 二.实现过程 1.信号强度多数是4-5个垂直条来表示，这里面可以有认为4个view，每个view之间的间距为0，每个view宽度一致，高度递增，但是要怎么限制4个view之间的排列方式，可以在外边再套上一个view，设置他的显示方式为row 2.具体代码 <view class="si
Lightsns主题html,手机信号好不好，到底看什么？
weixin_42515181的博客
05-31 121
江西南昌小学老师汪莹说，手机有些孩子可能会养成拖拖拉拉的习惯，本来20分钟可以完成的作业，孩子会觉得反正可以待到6点，就越写越慢。与此同时，信号配合起来的转向手感也是轻柔路线。[·4·全文总结：好不好实而不华的车型最好卖]整场的试驾会下来，宋PLUSEV是一款与时下电气化宣传大趋势格格不入的一款车型。[·2·外观设计绝对原创/比亚迪已经学会了内敛的美感]相比于早年间的模仿借鉴国外大牌的作品，到底现...
css信号图标,css3实现wifi信号形状
weixin_29147589的博客
08-03 1031
这次给大家带来css3实现wifi信号形状，css3实现wifi信号形状的注意事项有哪些，下面就是实战案例，一起来看一下。整理文档，搜刮出一个css3实现wifi信号逐渐增强效果实例的代码，稍微整理精简一下做下分享。效果图下面是实现代码：wifi信号*{margin: 0;padding: 0;}.box {width: 240px;height: 240px;box-sizing: border...
97.炫酷加载特效(模拟手机信号)
粉丝们务必加入微信粉丝群
10-14 786
效果 (源码网盘地址在最后) 大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。 演示视频 【前端特效 97】炫酷加载特效(模拟手机信号) 视频地址一：https://www.bilibili.com/video/BV1fy4y167rn/ 视频地址二：https://www.ixigua.com/6882247186009031181/ 源码 index.html &
css信号强度显示,纯css实现wifi信号图标及强弱/链接/加密状态
weixin_42144707的博客
08-03 1372
分享一段自己写的纯css实现的wifi连接的各种状态代码，希望能帮助到一些学习的朋友。默认图标大小为20px，已经通过transform放大，具体的可以见详细代码及预览。运行代码纯css实现wifi信号图标及强弱/链接/加密状态 来源：tonjay.com 前端资源网.strength-ready{ color: #26a69a;}/*已链接或曾连接过的颜色及信号强弱*/.strength-no{...
直播短视频系统,展示水波纹效果 css水波效果
云豹网络科技
01-28 665
直播短视频系统,展示水波纹效果 css水波效果相关的代码 代码 HTML index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compa
HTML5与CSS3视觉呈现：Picture CSS3解析
"Picture CSS3 (Visualizing the Web)" 是一本关于使用CSS3进行网页视觉设计的书籍，强调了HTML5中的标签用于组织内容，并通过CSS3来控制页面的呈现样式。 在HTML5中，标签被用来放置和组织内容，确保内容的描述性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值