css滑动式选项卡tab效果代码-html代码-BFW代码库

css滑动式选项卡tab效果代码

代码语言：html

所属分类：选项卡

代码描述：css滑动式选项卡tab效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @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: rgba(230,238,249,0.5)
    }
    
    .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: .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 .15s ease-in
    }
    
    .notification {
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	width: 2rem;
    	height: 2rem;
    	margin-left: .75rem;
    	border-radius: 50%;
    	background-color: var(--secondary-color);
    	transition: .15s ease-in
    }
    
    input[type=radio]:checked+label {
  .........完整代码请登录后点击上方下载按钮下载查看