html,body { padding:0; margin:0; color:#292929; background-color:#eaeaea; } .container { text-align:center; color:#2c3e50; width:100%; height:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; } form { transition:all 0.5s; position:absolute; top:50%; transform:translateY(-50%); } .finder { border:1px solid #fff; background-color:#f6f5f0; border-radius:15px; padding:8px; box-shadow:9px 9px 16px rgba(189,189,189,0.6),-9px -9px 16px rgba(255,255,255,0.5); } .finder__outer { display:flex; width:600px; padding:1.5rem 2rem; border-radius:10px; box-shadow:inset 10px 10px 15px -10px #c3c3c3,inset -10px -10px 15px -10px #ffffff; } .finder__inner { display:flex; align-items:center; position:relative; flex:1; } .finder__form { flex:1; height:calc(100% + 3rem); } .finder__input { height:calc(100% + 3rem); border:none; background-color:transparent; outline:none; font-size:1.5rem; letter-spacing:0.75px; } .finder__icon { width:40px; height:40px; margin-right:1rem; transition:all 0.2s; box-shadow:inset 0 0 0 20px #292929; border-radius:50%; position:relative; } .finder__icon:after,.finder__icon:before { display:block; content:""; position:absolute; transition:all 0.5s cubic-bezier(0.68,-0.55,0.265,1.55); } .finder__icon:after { width:10px; height:10px; background-color:#292929; border:3px solid #f6f5f0; top:50%; position:absolute; transform:translateY(-50%); left:0px; right:0; margin:auto; border-radius:50%; } .active .finder__icon:after { border-width:10px; background-color:#f6f5f0; } .finder__icon:before { width:4px; height:13px; background-color:#f6f5f0; top:50%; left:20px; transform:rotateZ(45deg) translate(-50%,0); transform-origin:0 0; border-radius:4px; } .processing .finder__icon { transform-origin:50%; animation:spinner 0.3s linear infinite; animation-delay:0.5s; } .active .finder__icon { transform:translateY(-5px); } @keyframes spinner { 0% { transform:rotateZ(45deg); } 100% { transform:rotateZ(405deg); } }
更新时间:2022-10-07 19:14:44