首页
视频
资源
登录
原
手机好看的页面
4616
人阅读
2020/7/8 12:07
总访问:
2592202
评论:
3
收藏:
0
手机
分类:
前端
#### 效果图 ![](https://img.tnblog.net/arcimg/hb/56417b8a527842288690112a10d930f9.png) #### 代码 ><font style="color:#e67e22;font-weight:bold;">index.html</font> ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="//at.alicdn.com/t/font_1891092_aqxy3pmoz8.css"> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <div class="container"> <div class="page"> <div class="top"> <div class="title"> <div class="left"> <div class="text">DENS Device</div> <div class="sub"> <div class="flag"> <div class="ellipse ellipse1"></div> <div class="ellipse ellipse2"></div> <div class="ellipse ellipse3"></div> <div class="ellipse ellipse4"></div> </div> <div class="subtext">Connected</div> </div> </div> <i class="iconfont icondiandiandianshu"></i> </div> <div class="treat-time-container"> <div class="treat-time"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> <div class="circle5"></div> <div class="circle6"></div> <div class="circle7"></div> <div class="inner-circle"> <div class="treat-title">Treat Time</div> <div class="time">36:00</div> </div> </div> </div> <div class="comfort">COMFORT</div> <div class="slider-container"> <div class="strength">Strength</div> <div class="slider-outer"> <div class="bg"> <div class="left"></div> </div> <div class="thumb"> <div class="thumb-inner"></div> </div> </div> <div class="number"> <div class="number-text">1</div> <div class="number-text">2</div> <div class="number-text">3</div> <div class="number-text">4</div> </div> </div> <div class="button-container"> <div class="button pause"> <i class="iconfont iconpause"></i> </div> <div class="button"> <i class="iconfont iconstop"></i> </div> </div> </div> </div> </div> </body> </html> ``` ><font style="color:#3498db;font-weight:bold;">index.css</font> ```css html body { margin: 0; padding: 0; background-color: #93c7d0; font-family: Helvetica, sans-serif; } .container { min-width: 100vw; width: 100%; height: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .container .page { display: flex; justify-content: center; align-items: flex-start; overflow: hidden; width: 375px; height: 812px; box-shadow: 60px 60px 800px 0 rgba(0, 0, 0, 0.5); border-radius: 36px; background: #e3e6ec; background-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%); } .container .page .top { width: 375px; height: 568px; background-image: linear-gradient(0deg, rgba(67, 216, 205, 0.01) 2%, rgba(47, 185, 202, 0.3) 100%); } .container .page .top .title { padding: 40px 36px 0 36px; display: flex; justify-content: space-between; align-items: center; } .container .page .top .title .left { display: flex; flex-direction: column; } .container .page .top .title .left .text { color: rgba(0, 0, 0, 0.87); font-weight: bold; font-size: 18px; letter-spacing: 0.54px; line-height: 18px; } .container .page .top .title .left .sub { display: flex; margin-top: 5px; } .container .page .top .title .left .sub .flag { position: relative; } .container .page .top .title .left .sub .flag .ellipse { position: absolute; } .container .page .top .title .left .sub .flag .ellipse1 { width: 14px; height: 14px; border-radius: 7px; background: #2fb9ca; opacity: 0.2; } .container .page .top .title .left .sub .flag .ellipse2 { width: 14px; height: 14px; box-sizing: border-box; border-radius: 7px; border: 1px solid #2fb9ca; } .container .page .top .title .left .sub .flag .ellipse3 { width: 6px; top: 4px; left: 4px; height: 6px; opacity: 0.6; box-sizing: border-box; border-radius: 3px; background: #2fb9ca; } .container .page .top .title .left .sub .flag .ellipse4 { width: 6px; top: 4px; left: 4px; height: 6px; box-sizing: border-box; border-radius: 3px; background: #2fb9ca; } .container .page .top .title .left .sub .subtext { margin-left: 20px; color: #959eb0; font-size: 12px; letter-spacing: 0.6px; line-height: 12px; } .container .page .top .title .iconfont { font-size: 36px; } .container .page .top .treat-time-container { margin-top: 80px; } .container .page .top .treat-time-container .treat-time { display: flex; justify-content: center; align-items: center; position: relative; } .container .page .top .treat-time-container .treat-time .inner-circle { display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; width: 180px; height: 180px; border-radius: 90px; background: #e3e6ec; background-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%); box-shadow: -10px -10px 30px 0 #ffffff, 10px 10px 30px 0 rgba(48, 161, 178, 0.4), inset 1px 1px 0 0 #ffffff; } .container .page .top .treat-time-container .treat-time .inner-circle .treat-title { font-size: 12px; color: #000000; letter-spacing: 0.6px; text-align: center; line-height: 12px; margin-bottom: 6px; } .container .page .top .treat-time-container .treat-time .inner-circle .time { font-size: 36px; color: #000000; letter-spacing: 1.2px; text-align: center; line-height: 36px; } .container .page .top .treat-time-container .treat-time .circle1 { transform: rotateZ(60deg); width: 250px; height: 250px; background: conic-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30%, #2eb7c9 -240deg, #43d8cd 70%, #43d8cd 100%); border-radius: 125px; } .container .page .top .treat-time-container .treat-time .circle2 { width: 250px; height: 250px; position: absolute; border-radius: 125px; background: rgba(46, 183, 201, 0.7); opacity: 0.1; } .container .page .top .treat-time-container .treat-time .circle3 { position: absolute; width: 270px; height: 270px; border-radius: 135px; border: 1px solid rgba(46, 183, 201, 0.6); } .container .page .top .treat-time-container .treat-time .circle4 { position: absolute; width: 270px; height: 270px; border-radius: 135px; border: 1px solid rgba(46, 183, 201, 0.5); } .container .page .top .treat-time-container .treat-time .circle5 { position: absolute; width: 290px; height: 290px; border-radius: 145px; border: 1px solid rgba(46, 183, 201, 0.4); } .container .page .top .treat-time-container .treat-time .circle6 { position: absolute; width: 310px; height: 310px; border-radius: 155px; border: 1px solid rgba(46, 183, 201, 0.3); } .container .page .top .treat-time-container .treat-time .circle7 { position: absolute; width: 330px; height: 330px; border-radius: 165px; border: 1px solid rgba(46, 183, 201, 0.2); } .container .page .top .comfort { font-size: 15px; color: rgba(0, 0, 0, 0.87); letter-spacing: 3.75px; text-align: center; line-height: 18px; margin-top: 80px; } .container .page .top .slider-container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 45px; } .container .page .top .slider-container .strength { font-size: 12px; color: #959eb0; letter-spacing: 0.6px; text-align: center; line-height: 12px; } .container .page .top .slider-container .slider-outer { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 15px; width: 303px; height: 40px; background: rgba(240, 243, 249, 0.6); box-shadow: inset -10px -10px 20px 0 rgba(255, 255, 255, 0.8), inset 10px 10px 20px 0 rgba(0, 0, 0, 0.2); border-radius: 24px; } .container .page .top .slider-container .slider-outer .bg { width: 264px; height: 4px; background: #b3bdcf; border-radius: 3px; position: relative; } .container .page .top .slider-container .slider-outer .bg .left { position: absolute; /*更改滚动条*/ width: 87px; height: 4px; border-radius: 3px; background: #e3e6ec; background-image: linear-gradient(270deg, rgba(47, 185, 202, 0.97) 0%, rgba(67, 216, 205, 0.6) 100%); } .container .page .top .slider-container .slider-outer .thumb { position: absolute; display: flex; justify-content: center; align-items: center; /*更改滚动轮*/ width: 28px; height: 28px; left: 80px; top: 6px; border-radius: 14px; background: #ffffff; background-image: linear-gradient(179deg, rgba(255, 255, 255, 0) 0%, #e9e8f7 100%); box-shadow: 0 10px 30px 0 rgba(163, 176, 202, 0.2); } .container .page .top .slider-container .slider-outer .thumb .thumb-inner { width: 6px; height: 6px; background: #e3e6ec; border-radius: 3px; background-image: linear-gradient(180deg, rgba(47, 185, 202, 0.97) 0%, rgba(67, 216, 205, 0.6) 100%); } .container .page .top .slider-container .number { width: 256px; display: flex; justify-content: space-between; align-items: center; margin-top: 15px; } .container .page .top .slider-container .number .number-text { font-size: 12px; color: #959eb0; letter-spacing: 0; text-align: center; line-height: 12px; } .container .page .top .button-container { display: flex; justify-content: center; align-items: center; margin-top: 37px; } .container .page .top .button-container .pause { margin-right: 50px; } .container .page .top .button-container .button { display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; border-radius: 50px; background: #e3e6ec; box-shadow: -10px -10px 30px 0 #ffffff, 10px 10px 30px 0 rgba(166, 174, 189, 0.6); } .container .page .top .button-container .button .iconfont { font-size: 24px; color: #000; } ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
尘叶心繁
这一世以无限游戏为使命!
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net后台框架
168篇
linux
17篇
linux中cve
1篇
windows中cve
0篇
资源分享
10篇
Win32
3篇
前端
28篇
传说中的c
4篇
Xamarin
9篇
docker
15篇
容器编排
101篇
grpc
4篇
Go
15篇
yaml模板
1篇
理论
2篇
更多
Sqlserver
4篇
云产品
39篇
git
3篇
Unity
1篇
考证
2篇
RabbitMq
23篇
Harbor
1篇
Ansible
8篇
Jenkins
17篇
Vue
1篇
Ids4
18篇
istio
1篇
架构
2篇
网络
7篇
windbg
4篇
AI
18篇
threejs
2篇
人物
1篇
嵌入式
2篇
python
13篇
HuggingFace
8篇
pytorch
9篇
opencv
6篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术