分享WHO.CX自定义CSS

UID:136 一级用户组
.search_box {background: url("https://img0.baidu.com/it/u=2260621792,3841037312&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=800");background-size: cover;background-position: center;position: relative;transition: transform 0.3s ease;}.search_box::after {content: '';position: absolute;bottom: 0;left: 0;width: 0%;height: 2px;background: rgba(255, 255, 255, 0.3);transition: width 0.7s cubic-bezier(0.2, 0.9, 0.4, 1.1);}.search_box:hover::after {width: 100%;}.search_box:hover {transform: translateX(4px);} #result {background: url("https://img0.baidu.com/it/u=4269801729,3144187284&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1227");background-size: cover;background-position: center;position: relative;}#result::after {content: '';position: absolute;bottom: 0;left: 0;width: 0%;height: 2px;background: rgba(255, 255, 255, 0.2);transition: width 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1);}#result:hover::after {width: 100%;} #main, #text {background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);transition: background 0.4s ease, backdrop-filter 0.4s ease;position: relative;}#main::before, #text::before {content: '';position: absolute;top: 0;left: 0;width: 0%;height: 100%;background: rgba(255, 255, 255, 0.04);transition: width 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.1);pointer-events: none;}#main:hover::before, #text:hover::before {width: 100%;}#main:hover, #text:hover {background: rgba(0, 0, 0, 0.55);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);} #text, #text a {color: #dddddd;text-decoration: none;position: relative;transition: color 0.3s ease;}#text a::after {content: '';position: absolute;bottom: -2px;left: 0;width: 0%;height: 1px;background: #dddddd;transition: width 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);}#text a:hover::after {width: 100%;}#text a:hover {color: #ffffff;} #search_button {background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);border: none;cursor: pointer;transition: all 0.35s ease;position: relative;overflow: hidden;}#search_button::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.08);transition: left 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);}#search_button:hover::before {left: 0%;}#search_button:hover {background: rgba(0, 0, 0, 0.7);transform: translateY(-1px);}#search_button:active {transform: scale(0.97);} #search_input {background: rgba(255, 255, 255, 0.7);backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);border: 1px solid rgba(255, 255, 255, 0.1);transition: all 0.4s ease;position: relative;}#search_input:focus {backgroun@media: rgba(255, 255, 255, 0.9);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);outline: none;transform: translateX(4px);}#search_input::placeholder {transition: transform @keyframes.4s ease, opacity 0.4s ease;}#search_input:focus::placeholder {transform: translateX(8px);opacity: 0.5;} @media screen and (min-width: 630px) {.background {background: url("https://img.hk/i/2024/06/02/665c511151e06.png");background-size: cover;background-position: center;animation: slideInBg 0.9s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;}@keyframes slideInBg {0% {background-position: 100% center;filter: brightness(0.7);}100% {background-posit@keyframeson: center;filter: brightness(1);}}} .search_box,#text,#result,#search_input,#main,#search_input {opacity: 0;animation: slideFromLeft 0.7s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;}.search_box { animation-delay: 0.02s; }#result { animation-delay: 0.06s; }#main { animation-delay: 0.10s; }#text { animation-delay: 0.14s; }#search_button { animation-delay: 0.18s; }#search_input { animation-delay: 0.22s; } @keyframes slideFromLeft {0% {opacity: 0;transform: translateX(-18px) scale(0.98);clip-path: inset(0 100% 0 0);}100% {opacity: 1;transform: translateX(0) scale(1);clip-path: inset(0 0% 0 0);}} .divider-line {width: 0%;height: 1px;background: rgba(255, 255, 255, 0.15);margin: 0 auto;transition: width 0.7s cubic-bezier(0.2, 0.85, 0.4, 1);}.divider-line.animate {width: 100% !important;} ::-webkit-scrollbar {width: 3px;height: 3px;}::-webkit-scrollbar-track {background: transparent;}::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, 0.2);border-radius: 10px;transition: background 0.3s ease;}::-webkit-scrollbar-thumb:hover {background: rgba(255, 255, 255, 0.4);} 

地址:WHO.CX

最新回复

请先登录后再回复 登录

uid:136 一级用户组
关注
发帖 4
评论 7
粉丝 0
关注 0
发新帖
目录
分享WHO.CX自定义CSS