css实现带tag标签的搜索框栏效果代码-html代码-BFW代码库

css实现带tag标签的搜索框栏效果代码

代码语言：html

所属分类：搜索

代码描述：css实现带tag标签的搜索框栏效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Lato");
	*,::before,::after {
	box-sizing:border-box;
}
body {
	margin:0;
	display:flex;
	height:100vh;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	font:600 62.5% "Lato",sans-serif;
	background-color:#17141d;
}
a {
	text-decoration:none;
	white-space:nowrap;
	font-size:1rem;
	color:#a1a1af;
}
a.tag {
	display:block;
	padding:0.3em 0.85em;
	margin:0.5em;
	text-transform:uppercase;
	border:3px solid #28242f;
	border-radius:2em;
	transition:transform 0.2s;
	transition-timing-function:cubic-bezier(0.45,-0.85,0.55,-0.45);
}
a.tag:hover {
	transform:scale(1.2);
	background:linear-gradient(to right,#ff8a00,#da1b60);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}
.container {
	margin:2em 6em;
	padding:3em;
	padding-left:1em;
	display:flex;
	width:100%;
	justify-content:space-between;
	align-items:center;
	font-size:1rem;
	color:#a1a1af;
	border:1px solid #28242f;
	border-radius:0.35em;
	background-color:#201c29;

	box-shadow:0 10px 60px #070509;
}
.container .tags {
	margin:0;
	display:flex;
	justify-content:center;
	align-items:center;
}
.container .tags span {
	margin-right:1em;
	padding:1em;
	text-transform:uppercase;
	transform:rotate(180deg);
	writing-mode:vertical-rl;
	border-left:3px solid #28242f;
	background:linear-gradient(to right,#ff8a00,#da1b60);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}
.container .tags a:last-child {
	margin-left:0.5em;
}
.container .tags a:last-child:hover {
	color:white;
}
.container label {
	position:relative;
	white-space:nowrap;
	display:flex;
	width:48px;
	height:48px;
	align-items:center;
	justify-content:flex-end;
	border:3px solid transparent;
	border-radius:2em;
	background-color:#17141d;
	background-image:radial-gradient(circle at 50%,#ff8a00,#da1b60);
	transition:all 250ms ease-in-out;
}
.container label::before {
	position:absolute;
	right:0;
	bottom:-20px;
	z-index:0;
	transform:rotate(-35deg);
	width:4px;.........完整代码请登录后点击上方下载按钮下载查看