* { margin:0; padding:0; } body { padding:0px; background:#f8f8f8; } @-webkit-keyframes phone { 0% { -webkit-transform:skew(0deg,0deg) translateY(0px); } 50% { -webkit-transform:skew(0deg,0deg) translateY(5px); } 100% { -webkit-transform:skew(0deg,0deg) translateY(0px); } }@-webkit-keyframes phone_yy { 0% { -webkit-transform:translate(0px,0px); background:rgba(0,0,0,0.2); filter:blur(8px); } 50% { -webkit-transform:translate(-8px,-8px); background:rgba(0,0,0,0.3); filter:blur(5px); } 100% { -webkit-transform:translate(0px,0px); background:rgba(0,0,0,0.2); filter:blur(8px); } }.phone { margin:0px auto; width:400px; height:800px; background:#68686b; border-radius:30px; box-sizing:border-box; padding:2px; position:relative; -webkit-transform:skew(0deg,0deg); -webkit-animation:phone 4s ease 0s infinite; position:relative; top:8%; } .phone:after { position:absolute; content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,0.2); top:10px; left:10px; z-index:-1; border-radius:18px; filter:blur(8px); -webkit-animation:phone_yy 4s ease 0s infinite; } .phone_bg1 { width:100%; height:100%; background:#fff; border-radius:30px; box-sizing:border-box; padding:0.5px; } .phone_bg2 { width:100%; height:100%; background:#0b0d0c; border-radius:30px; box-sizing:border-box; padding:10px; box-shadow:inset 14px 0px 10px -15px #fff,inset -14px 0px 10px -15px #fff; } .phone_bg3 { width:100%; height:100%; background:#f8f8f8; border-radius:26px; box-sizing:border-box; position:relative; } .phone_lh { width:50%; height:20px; background:#0b0d0c; margin:0 auto; border-radius:0px 0px 14px 14px; position:relative; } .phone_lh_con { display:flex; align-items:center; justify-content:center; } .phone_lh:before { position:absolute; content:""; width:5px; height:5px; background:#0b0d0c; left:-5px; top:0px; z-index:9; } .phone_lh:after { position:absolute; content:""; width:5px; height:5px; background:#0b0d0c; right:-5px; top:0px; z-index:9; } .phone_lh_con:before { position:absolute; content:""; width:10px; height:10px; background:#fff; border-radius:100%; left:-10px; top:0px; z-index:10; } .phone_lh_con:after { position:absolute; content:""; width:10px; height:10px; background:#fff; border-radius:100%; right:-10px; top:0px; z-index:10; } .lh_tiao { width:25%; height:3px; border-radius:5em; background:#2d2d2d; margin-left:8px; margin-top:4px; } .lh_yuan { width:5px; height:5px; border-radius:5em; background:#212554; margin-left:8px; margin-top:4px; } .phone_home { width:32%; height:0.5%; border-radius:5em; position:absolute; bottom:1%; left:50%; margin-left:-16%; background:#0b0d0c; } .phone_bg3 #text { font-size:18px; position:absolute; top:20%; left:0%; text-align:center; width:100%; font-weight:600; } .phone_bg3 .a_user { font-size:10px; font-weight:bold; position:absolute; bottom:10%; left:50%; text-align:center; width:64px; margin-left:-32px; background:#06F; color:#fff; border-radius:5em; line-height:1.5em; padding:3px 0px; cursor:pointer; transition:all 0.8s ease; } .phone_bg3 .date_time { width:25%; left:0px; position:absolute; top:6px; z-index:111; font-size:13px; font-weight:600; text-align:center; } .states { width:25%; right:1.5px; position:absolute; top:4px; z-index:111; display:flex; align-items:center; justify-content:center; } .states .ul_xinhao { display:flex; align-items:flex-end; list-style:none; } .states .ul_xinhao li { width:3px; height:3px; background:#0d0b0c; margin-left:1px; list-style:none; } .states .ul_xinhao li:nth-of-type(2) { height:4px; } .states .ul_xinhao li:nth-of-type(3) { height:6.5px; } .states .ul_xinhao li:nth-of-type(4) { height:8.5px; } .states .dianliang { width:18px; height:10px; border:1px solid #b6b6b6; box-sizing:border-box; border-radius:2px; margin-left:0.5px; position:relative; } .states .dianliang:after { content:""; position:absolute; width:94%; height:88%; top:6%; left:3%; box-sizing:border-box; background:#0d0b0c; border-radius:2px; } .states .dianliang:before { content:""; position:absolute; width:1px; height:4px; box-sizing:border-box; background:#b6b6b6; border-radius:2px; right:-2.5px; top:50%; margin-top:-2px; } .states .wifi1 { border-radius:5em; margin-left:0.5px; border:solid transparent; border-top-color:#0d0b0c; border-width:2.2px 2.2px; display:flex; align-items:center; justify-content:center; transform:translateY(4.5px); } .states .wifi2 { border-radius:5em; border:solid transparent; border-top-color:#fff; border-width:2.15px 2.15px; display:flex; align-items:center; justify-content:center; } .states .wifi3 { border-radius:5em; border:solid transparent; border-top-color:#0d0b0c; border-width:2.1px 2.1px; display:flex; align-items:center; justify-content:center; } .states .wifi4 { border-radius:5em; border:solid transparent; border-top-color:#fff; border-width:2.05px 2.05px; display:flex; align-items:center; justify-content:center; } .states .wifi5 { border-radius:5em; border:solid transparent; border-top-color:#0d0b0c; border-width:2px 2px; } .jingyin { width:1.5px; height:3.75%; background:#121212; position:absolute; top:13.5%; left:-1.5px; border-radius:5px 0px 0px 5px; } .jingyin:after { content:""; display:block; width:0.8px; height:90%; background:rgba(255,255,255,0.8); position:absolute; left:0px; bottom:5%; } .yl_jia { width:1.5px; height:7%; background:#121212; position:absolute; top:20.75%; left:-1.5px; border-radius:5px 0px 0px 5px; } .yl_jia:after { content:""; display:block; width:0.5px; height:90%; background:rgba(255,255,255,0.6); position:absolute; right:0px; bottom:5%; } .yl_jian { width:1.5px; height:7%; background:#121212; position:absolute; top:30%; left:-1.5px; border-radius:5px 0px 0px 5px; } .yl_jian:after { content:""; display:block; width:0.5px; height:90%; background:rgba(255,255,255,0.6); position:absolute; right:0px; bottom:5%; } .suoping { width:1.5px; height:11.5%; background:#121212; position:absolute; top:23%; right:-1.5px; border-radius:0px 5px 5px 0px; } .suoping:after { content:""; display:block; width:0.5px; height:90%; background:rgba(255,255,255,0.6); position:absolute; left:0px; bottom:5%; }
更新时间:2019-11-08 01:33:59