css跳转滑动,纯CSS滑动切换

css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

:root {

--primary-color: #185ee0;

--secondary-color: #e6eef9;

}

*,

*:after,

*:before {

box-sizing: border-box;

}

body {

font-family: "Inter", sans-serif;

background-color:#1F1F1F;

}

.container {

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

display: flex;

align-items: center;

justify-content: center;

}

.tabs {

display: flex;

position: relative;

background-color: #fff;

box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);

padding: 0.75rem;

border-radius: 99px;

}

.tabs * {

z-index: 2;

}

input[type=radio] {

display: none;

}

.tab {

display: flex;

align-items: center;

justify-content: center;

height: 54px;

width: 200px;

font-size: 1.25rem;

font-weight: 500;

border-radius: 99px;

cursor: pointer;

transition: color 0.15s ease-in;

}

.notification {

display: flex;

align-items: center;

justify-content: center;

width: 2rem;

height: 2rem;

margin-left: 0.75rem;

border-radius: 50%;

background-color: var(--secondary-color);

transition: 0.15s ease-in;

}

input[type=radio]:checked + label {

color: var(--primary-color);

}

input[type=radio]:checked + label > .notification {

background-color: var(--primary-color);

color: #fff;

}

input[id=radio-1]:checked ~ .glider {

transform: translateX(0);

}

input[id=radio-2]:checked ~ .glider {

transform: translateX(100%);

}

input[id=radio-3]:checked ~ .glider {

transform: translateX(200%);

}

.glider {

position: absolute;

display: flex;

height: 54px;

width: 200px;

background-color: var(--secondary-color);

z-index: 1;

border-radius: 99px;

transition: 0.25s ease-out;

}

@media (max-width: 700px) {

.tabs {

transform: scale(0.6);

}

}