tnblog
首页
视频
资源
登录
原

手机好看的页面

6172人阅读 2020/7/8 12:07 总访问：3467494 评论：3 收藏：0 手机
分类: 前端

效果图

代码

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <link rel="stylesheet" href="//at.alicdn.com/t/font_1891092_aqxy3pmoz8.css">
  7.         <link rel="stylesheet" type="text/css" href="css/index.css"/>
  8.     </head>
  9.     <body>
  10.         <div class="container">
  11.         <div class="page">
  12.             <div class="top">
  13.                 <div class="title">
  14.                     <div class="left">
  15.                         <div class="text">DENS Device</div>
  16.                         <div class="sub">
  17.                             <div class="flag">
  18.                                 <div class="ellipse ellipse1"></div>
  19.                                 <div class="ellipse ellipse2"></div>
  20.                                 <div class="ellipse ellipse3"></div>
  21.                                 <div class="ellipse ellipse4"></div>
  22.                             </div>
  23.                             <div class="subtext">Connected</div>
  24.                         </div>
  25.                     </div>
  26.                     <i class="iconfont icondiandiandianshu"></i>
  27.                 </div>
  28.                 <div class="treat-time-container">
  29.                     <div class="treat-time">
  30.                         <div class="circle1"></div>
  31.                         <div class="circle2"></div>
  32.                         <div class="circle3"></div>
  33.                         <div class="circle4"></div>
  34.                         <div class="circle5"></div>
  35.                         <div class="circle6"></div>
  36.                         <div class="circle7"></div>
  37.                         <div class="inner-circle">
  38.                             <div class="treat-title">Treat Time</div>
  39.                             <div class="time">36:00</div>
  40.                         </div>
  41.                     </div>
  42.                 </div>
  43.                 <div class="comfort">COMFORT</div>
  44.                 <div class="slider-container">
  45.                     <div class="strength">Strength</div>
  46.                     <div class="slider-outer">
  47.                         <div class="bg">
  48.                             <div class="left"></div>
  49.                         </div>
  50.                         <div class="thumb">
  51.                             <div class="thumb-inner"></div>
  52.                         </div>
  53.                     </div>
  54.                     <div class="number">
  55.                         <div class="number-text">1</div>
  56.                         <div class="number-text">2</div>
  57.                         <div class="number-text">3</div>
  58.                         <div class="number-text">4</div>
  59.                     </div>
  60.                 </div>
  61.                 <div class="button-container">
  62.                     <div class="button pause">
  63.                         <i class="iconfont iconpause"></i>
  64.                     </div>
  65.                     <div class="button">
  66.                         <i class="iconfont iconstop"></i>
  67.                     </div>
  68.                 </div>
  69.             </div>
  70.         </div>
  71.     </div>
  72.     </body>
  73. </html>
index.css 
  1. html body {
  2.   margin: 0;
  3.   padding: 0;
  4.   background-color: #93c7d0;
  5.   font-family: Helvetica, sans-serif;
  6. }
  7. .container {
  8.   min-width: 100vw;
  9.   width: 100%;
  10.   height: 100%;
  11.   min-height: 100vh;
  12.   display: flex;
  13.   justify-content: center;
  14.   align-items: center;
  15. }
  16. .container .page {
  17.   display: flex;
  18.   justify-content: center;
  19.   align-items: flex-start;
  20.   overflow: hidden;
  21.   width: 375px;
  22.   height: 812px;
  23.   box-shadow: 60px 60px 800px 0 rgba(0, 0, 0, 0.5);
  24.   border-radius: 36px;
  25.   background: #e3e6ec;
  26.   background-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  27. }
  28. .container .page .top {
  29.   width: 375px;
  30.   height: 568px;
  31.   background-image: linear-gradient(0deg, rgba(67, 216, 205, 0.01) 2%, rgba(47, 185, 202, 0.3) 100%);
  32. }
  33. .container .page .top .title {
  34.   padding: 40px 36px 0 36px;
  35.   display: flex;
  36.   justify-content: space-between;
  37.   align-items: center;
  38. }
  39. .container .page .top .title .left {
  40.   display: flex;
  41.   flex-direction: column;
  42. }
  43. .container .page .top .title .left .text {
  44.   color: rgba(0, 0, 0, 0.87);
  45.   font-weight: bold;
  46.   font-size: 18px;
  47.   letter-spacing: 0.54px;
  48.   line-height: 18px;
  49. }
  50. .container .page .top .title .left .sub {
  51.   display: flex;
  52.   margin-top: 5px;
  53. }
  54. .container .page .top .title .left .sub .flag {
  55.   position: relative;
  56. }
  57. .container .page .top .title .left .sub .flag .ellipse {
  58.   position: absolute;
  59. }
  60. .container .page .top .title .left .sub .flag .ellipse1 {
  61.   width: 14px;
  62.   height: 14px;
  63.   border-radius: 7px;
  64.   background: #2fb9ca;
  65.   opacity: 0.2;
  66. }
  67. .container .page .top .title .left .sub .flag .ellipse2 {
  68.   width: 14px;
  69.   height: 14px;
  70.   box-sizing: border-box;
  71.   border-radius: 7px;
  72.   border: 1px solid #2fb9ca;
  73. }
  74. .container .page .top .title .left .sub .flag .ellipse3 {
  75.   width: 6px;
  76.   top: 4px;
  77.   left: 4px;
  78.   height: 6px;
  79.   opacity: 0.6;
  80.   box-sizing: border-box;
  81.   border-radius: 3px;
  82.   background: #2fb9ca;
  83. }
  84. .container .page .top .title .left .sub .flag .ellipse4 {
  85.   width: 6px;
  86.   top: 4px;
  87.   left: 4px;
  88.   height: 6px;
  89.   box-sizing: border-box;
  90.   border-radius: 3px;
  91.   background: #2fb9ca;
  92. }
  93. .container .page .top .title .left .sub .subtext {
  94.   margin-left: 20px;
  95.   color: #959eb0;
  96.   font-size: 12px;
  97.   letter-spacing: 0.6px;
  98.   line-height: 12px;
  99. }
  100. .container .page .top .title .iconfont {
  101.   font-size: 36px;
  102. }
  103. .container .page .top .treat-time-container {
  104.   margin-top: 80px;
  105. }
  106. .container .page .top .treat-time-container .treat-time {
  107.   display: flex;
  108.   justify-content: center;
  109.   align-items: center;
  110.   position: relative;
  111. }
  112. .container .page .top .treat-time-container .treat-time .inner-circle {
  113.   display: flex;
  114.   justify-content: center;
  115.   align-items: center;
  116.   flex-direction: column;
  117.   position: absolute;
  118.   width: 180px;
  119.   height: 180px;
  120.   border-radius: 90px;
  121.   background: #e3e6ec;
  122.   background-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  123.   box-shadow: -10px -10px 30px 0 #ffffff, 10px 10px 30px 0 rgba(48, 161, 178, 0.4), inset 1px 1px 0 0 #ffffff;
  124. }
  125. .container .page .top .treat-time-container .treat-time .inner-circle .treat-title {
  126.   font-size: 12px;
  127.   color: #000000;
  128.   letter-spacing: 0.6px;
  129.   text-align: center;
  130.   line-height: 12px;
  131.   margin-bottom: 6px;
  132. }
  133. .container .page .top .treat-time-container .treat-time .inner-circle .time {
  134.   font-size: 36px;
  135.   color: #000000;
  136.   letter-spacing: 1.2px;
  137.   text-align: center;
  138.   line-height: 36px;
  139. }
  140. .container .page .top .treat-time-container .treat-time .circle1 {
  141.   transform: rotateZ(60deg);
  142.   width: 250px;
  143.   height: 250px;
  144.   background: conic-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30%, #2eb7c9 -240deg, #43d8cd 70%, #43d8cd 100%);
  145.   border-radius: 125px;
  146. }
  147. .container .page .top .treat-time-container .treat-time .circle2 {
  148.   width: 250px;
  149.   height: 250px;
  150.   position: absolute;
  151.   border-radius: 125px;
  152.   background: rgba(46, 183, 201, 0.7);
  153.   opacity: 0.1;
  154. }
  155. .container .page .top .treat-time-container .treat-time .circle3 {
  156.   position: absolute;
  157.   width: 270px;
  158.   height: 270px;
  159.   border-radius: 135px;
  160.   border: 1px solid rgba(46, 183, 201, 0.6);
  161. }
  162. .container .page .top .treat-time-container .treat-time .circle4 {
  163.   position: absolute;
  164.   width: 270px;
  165.   height: 270px;
  166.   border-radius: 135px;
  167.   border: 1px solid rgba(46, 183, 201, 0.5);
  168. }
  169. .container .page .top .treat-time-container .treat-time .circle5 {
  170.   position: absolute;
  171.   width: 290px;
  172.   height: 290px;
  173.   border-radius: 145px;
  174.   border: 1px solid rgba(46, 183, 201, 0.4);
  175. }
  176. .container .page .top .treat-time-container .treat-time .circle6 {
  177.   position: absolute;
  178.   width: 310px;
  179.   height: 310px;
  180.   border-radius: 155px;
  181.   border: 1px solid rgba(46, 183, 201, 0.3);
  182. }
  183. .container .page .top .treat-time-container .treat-time .circle7 {
  184.   position: absolute;
  185.   width: 330px;
  186.   height: 330px;
  187.   border-radius: 165px;
  188.   border: 1px solid rgba(46, 183, 201, 0.2);
  189. }
  190. .container .page .top .comfort {
  191.   font-size: 15px;
  192.   color: rgba(0, 0, 0, 0.87);
  193.   letter-spacing: 3.75px;
  194.   text-align: center;
  195.   line-height: 18px;
  196.   margin-top: 80px;
  197. }
  198. .container .page .top .slider-container {
  199.   display: flex;
  200.   flex-direction: column;
  201.   justify-content: center;
  202.   align-items: center;
  203.   margin-top: 45px;
  204. }
  205. .container .page .top .slider-container .strength {
  206.   font-size: 12px;
  207.   color: #959eb0;
  208.   letter-spacing: 0.6px;
  209.   text-align: center;
  210.   line-height: 12px;
  211. }
  212. .container .page .top .slider-container .slider-outer {
  213.   position: relative;
  214.   display: flex;
  215.   flex-direction: column;
  216.   justify-content: center;
  217.   align-items: center;
  218.   margin-top: 15px;
  219.   width: 303px;
  220.   height: 40px;
  221.   background: rgba(240, 243, 249, 0.6);
  222.   box-shadow: inset -10px -10px 20px 0 rgba(255, 255, 255, 0.8), inset 10px 10px 20px 0 rgba(0, 0, 0, 0.2);
  223.   border-radius: 24px;
  224. }
  225. .container .page .top .slider-container .slider-outer .bg {
  226.   width: 264px;
  227.   height: 4px;
  228.   background: #b3bdcf;
  229.   border-radius: 3px;
  230.   position: relative;
  231. }
  232. .container .page .top .slider-container .slider-outer .bg .left {
  233.   position: absolute;
  234.   /*更改滚动条*/
  235.   width: 87px;
  236.   height: 4px;
  237.   border-radius: 3px;
  238.   background: #e3e6ec;
  239.   background-image: linear-gradient(270deg, rgba(47, 185, 202, 0.97) 0%, rgba(67, 216, 205, 0.6) 100%);
  240. }
  241. .container .page .top .slider-container .slider-outer .thumb {
  242.   position: absolute;
  243.   display: flex;
  244.   justify-content: center;
  245.   align-items: center;
  246.   /*更改滚动轮*/
  247.   width: 28px;
  248.   height: 28px;
  249.   left: 80px;
  250.   top: 6px;
  251.   border-radius: 14px;
  252.   background: #ffffff;
  253.   background-image: linear-gradient(179deg, rgba(255, 255, 255, 0) 0%, #e9e8f7 100%);
  254.   box-shadow: 0 10px 30px 0 rgba(163, 176, 202, 0.2);
  255. }
  256. .container .page .top .slider-container .slider-outer .thumb .thumb-inner {
  257.   width: 6px;
  258.   height: 6px;
  259.   background: #e3e6ec;
  260.   border-radius: 3px;
  261.   background-image: linear-gradient(180deg, rgba(47, 185, 202, 0.97) 0%, rgba(67, 216, 205, 0.6) 100%);
  262. }
  263. .container .page .top .slider-container .number {
  264.   width: 256px;
  265.   display: flex;
  266.   justify-content: space-between;
  267.   align-items: center;
  268.   margin-top: 15px;
  269. }
  270. .container .page .top .slider-container .number .number-text {
  271.   font-size: 12px;
  272.   color: #959eb0;
  273.   letter-spacing: 0;
  274.   text-align: center;
  275.   line-height: 12px;
  276. }
  277. .container .page .top .button-container {
  278.   display: flex;
  279.   justify-content: center;
  280.   align-items: center;
  281.   margin-top: 37px;
  282. }
  283. .container .page .top .button-container .pause {
  284.   margin-right: 50px;
  285. }
  286. .container .page .top .button-container .button {
  287.   display: flex;
  288.   justify-content: center;
  289.   align-items: center;
  290.   width: 100px;
  291.   height: 100px;
  292.   border-radius: 50px;
  293.   background: #e3e6ec;
  294.   box-shadow: -10px -10px 30px 0 #ffffff, 10px 10px 30px 0 rgba(166, 174, 189, 0.6);
  295. }
  296. .container .page .top .button-container .button .iconfont {
  297.   font-size: 24px;
  298.   color: #000;
  299. }

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

评价

是伍尚金哇_v

2020/7/8 16:28:43

秀儿

回复
剑轩:@是伍尚金哇_v这个拿来整个啥音乐播放还可以

2020/7/8 19:39:59 回复

瑾语

2020/7/10 11:06:41

好看哎

回复
这一世以无限游戏为使命！
博主信息
排名
2
文章
634
粉丝
44
评论
93
文章类别
最新文章
最新评价
docker中Sware集群与service
尘叶心繁 : 想学呀！我教你呀
一个bug让程序员走上法庭 索赔金额达400亿日元
叼着奶瓶逛酒吧 : 所以说做程序员也要懂点法律知识
.net core 塑形资源
剑轩 : 收藏收藏
映射AutoMapper
剑轩 : 好是好，这个对效率影响大不大哇,效率高不高
ASP.NET Core 服务注册生命周期
剑轩 : http://www.tnblog.net/aojiancc2/article/details/167
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术