css实现中性化设计表单控件集合代码
代码语言：html
所属分类：表单美化
代码描述：css实现中性化设计控件集合代码，包含时钟、播放暂停、搜索、tab选项卡、导航、滑竿、开关、勾选、按钮、单选等UI组件。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,600,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
:root {
--primary-light: #8abdff;
--primary: #6d5dfc;
--primary-dark: #5b0eeb;
--white: #FFFFFF;
--greyLight-1: #E4EBF5;
--greyLight-2: #c8d0e7;
--greyLight-3: #bec8e4;
--greyDark: #9baacf;
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
overflow-y: scroll;
background: var(--greyLight-1);
}
@media screen and (min-width: 900px) {
html {
font-size: 75%;
}
}
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: "Poppins", sans-serif;
background: var(--greyLight-1);
}
.components {
width: 75rem;
height: 40rem;
border-radius: 3rem;
box-shadow: 0.8rem 0.8rem 1.4rem var(--greyLight-2), -0.2rem -0.2rem 1.8rem var(--white);
padding: 4rem;
display: grid;
grid-template-columns: 17.6rem 19rem 20.4rem;
grid-template-rows: repeat(autofit, -webkit-min-content);
grid-template-rows: repeat(autofit, min-content);
grid-column-gap: 5rem;
grid-row-gap: 2.5rem;
align-items: center;
}
/* SWITCH */
.switch {
grid-column: 1/2;
display: grid;
grid-template-columns: repeat(2, -webkit-min-content);
grid-template-columns: repeat(2, min-content);
grid-gap: 3rem;
justify-self: center;
}
.switch input {
display: none;
}
.switch__1, .switch__2 {
width: 6rem;
}
.switch__1 label, .switch__2 label {
display: flex;
align-items: center;
width: 100%;
height: 3rem;
box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
background: rgba(255, 255, 255, 0);
position: relative;
cursor: pointer;
border-radius: 1.6rem;
}
.switch__1 label::after, .switch__2 label::after {
content: "";
position: absolute;
left: 0.4rem;
width: 2.1rem;
height: 2.1rem;
border-radius: 50%;
background: var(--greyDark);
transition: all 0.4s ease;
}
.switch__1 label::before, .switch__2 label::before {
content: "";
width: 100%;
height: 100%;
border-radius: inherit;
background: linear-gradient(330deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
opacity: 0;
transition: all 0.4s ease;
}
.switch input:checked ~ label::before {
opacity: 1;
}
.switch input:checked ~ label::after {
left: 57%;
background: var(--greyLight-1);
}
/* CHECKBOX */
.checkbox {
grid-column: 1/2;
display: grid;
grid-template-columns: repeat(2, 6rem);
grid-gap: 3rem;
justify-content: center;
}
.checkbox input {
display: none;
}
.checkbox__1, .checkbox__2 {
width: 6rem;
display: flex;
justify-content: center;
}
.checkbox__1 label, .checkbox__2 label {
box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
cursor: pointer;
position: relative;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.5rem;
width: 2.8rem;
height: 2.8rem;
}
.checkbox__1 label:hover i, .checkbox__2 label:hover i {
color: var(--primary);
}
.checkbox__1 label i, .checkbox__2 label i {
font-size: 1.8rem;
font-weight: 700;
color: var(--greyDark);
transition: 0.3s ease;
}
.checkbox__1 input:checked ~ label, .checkbox__2 input:checked ~ label {
box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}
.checkbox__1 input:checked ~ label i, .checkbox__2 input:checked ~ label i {
color: var(--primary);
}
/* RADIO */
.radio {
grid-column: 1/2;
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-items: center;
}
.radio input {
display: none;
}
.radio__1 input:checked ~ label, .radio__2 input:checked ~ label {
box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}
.radio__1 input:checked ~ label::after, .radio__2 input:checked ~ label::after {
background: var(--primary);
}
.radio__1 label, .radio__2 label {
box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
position: relative;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
width: 2.8rem;
height: 2.8rem;
border-radius: 50%;
}
.radio__1 label:hover::after, .radio__2 label:hover::after {
background: var(--primary);
}
.radio__1 label::after, .radio__2 label::after {
content: "";
position: absolute;
width: 1.4rem;
height: 1.4rem;
background: var(--greyDark);
border-radius: 50%;
transition: 0.3s ease;
}
/* BUTTONS */
.btn {
width: 15rem;
height: 4rem;
border-radius: 1rem;
box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
justify-self: center;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.3s ease;
}
.btn__primary {
grid-column: 1/2;
grid-row: 4/5;
background: var(--primary);
box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-light), inset -0.2rem -0.2rem 1rem var(--primary-dark), 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
color: var(--greyLight-1);
}
.btn__primary:hover {
color: var(--white);
}
.btn__primary:active {
box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-dark), inset -0.2rem -0.2rem 1rem var(--primary-light);
}
.btn__secondary {
grid-column: 1/2;
grid-row: 5/6;
color: var(--greyDark);
}
.btn__secondary:hover {
color: var(--primary);
}
.btn__secondary:active {
box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}
.btn p {
font-size: 1.6rem;
}
/* CLOCK */
.clock {
grid-column: 2/3;
grid-row: 1/3;
width: 12rem;
height: 12rem;
justify-self: center;
box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.clock .hand {
position: absolute;
transform-origin: bottom;
bottom: 6rem;
border-radius: 0.2rem;
z-index: 200;
}
.clock .hours {
width: 0.4rem;
height: 3.2rem;
background: var(--greyLight-3);
}
.clock .minutes {
width: 0.4rem;
height: 4.6rem;
background: var(--greyDark);
}
.clock .seconds {
width: 0.2rem;
height: 5.2rem;
background: var(--primary);
}
.clock .point {
position: absolute;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
background: var(--primary);
z-index: 300;
}
.clock .marker {
width: 95%;
height: 95%;
border-radius: 50%;
position: relative;
box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}
.clock .marker::after {
content: "";
width: 60%;
height: 60%;
position: absolute;
box-shadow: inset 1px 1px 1px var(--greyLight-2), inset -1px -1px 1px var(--white);
border-radius: 50%;
top: 20%;
left: 20%;
filter: blur(1px);
}
.clock .marker__1, .clock .marker__2, .clock .marker__3, .clock .marker__4 {
position: absolute;
border-radius: 0.1rem;
box-shadow: inset 1px 1px 1px var(--greyLight-2), inset -1px -1px 1px var(--white);
}
.clock .marker__1, .clock .marker__2 {
width: 0.2rem;
height: 0.6rem;
left: 5.6rem;
}
.clock .marker__3, .clock .marker__4 {
width: 0.6rem;
height: 0.2rem;
top: 5.6rem;
}
.clock .marker__1 {
top: 2%;
}
.clock .marker__2 {
top: 98%;
transform: translateY(-0.6rem);
}
.clock .marker__3 {
left: 2%;
}
.clock .marker__4 {
left: 98%;
transform: translateX(-0.6rem);
}
/* CHIP */
.chip {
grid-column: 2/3;
grid-row: 3/4;
justify-self: center;
width: 17rem;
height: 4rem;
border-radius: 1rem;
box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
display: flex;
justify-content: space-between;
align-items: center;
}
.chip__icon {
width: 3rem;
height: 3rem;
border-radius: 1rem;
margin: 0 0 0 0.2rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.8rem;
color: var(--primary);
}
.chip p {
font-size: 0.9rem;
margin-left: -1.8rem;
color: var(--greyDark);
}
.chip__close {
width: 1.6rem;
height: 1.6rem;
margin: 0 0.5rem;
display: flex;
font-size: 1.6rem;
color: var(--greyLight-3);
cursor: pointer;
}
/* PLAY BUTTON */
.circle {
grid-column: 2/3;
grid-row: 4/6;
width: 9rem;
height: 100%;
justify-self: center;
border-radius: 1rem;
display: grid;
grid-template-rows: 1fr;
justify-items: center;
align-items: center;
}
.circle__btn {
grid-row: 1/2;
grid-column: 1/2;
width: 6rem;
height: 6rem;
display: flex;
margin: 0.6rem;
justify-content: center;
align-items: center;
border-radius: 50%;
font-size: 3.2rem;
color: var(--primary);
z-index: 300;
background: var(--greyLight-1);
box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
cursor: pointer;
position: relative;
}
.circle__btn.shadow {
box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}
.circle__btn .play {
position: absolute;
opacity: 0;
transition: all 0.2s linear;
}
.circle__btn .play.visibility {
opacity: 1;
}
.circle__btn .pause {
position: absolute;
transition: all 0.2s linear;
}
.circle__btn .pause.visibility {
opacity: 0;
}
.circle__back-1, .circle__back-2 {
grid-row: 1/2;
grid-column: 1/2;
width: 6rem;
height: 6rem;
border-radius: 50%;
filter: blur(1px);
z-index: 100;
}
.circle__back-1 {
box-shadow: 0.4rem 0.4rem 0.8rem var(--greyLight-2), -0.4rem -0.4rem 0.8rem var(--white);
background: linear-gradient(to bottom right, var(--greyLight-2) 0%, var(--white) 100%);
-webkit-animation: waves 4s linear infinite;
animation: waves 4s linear infinite;
}
.circle__back-1.paused {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.circle__back-2 {
box-shadow: 0.4rem 0.4rem 0.8rem var(--greyLight-2), -0.4rem -0.4rem 0.8rem var(--white);
-webkit-animation: waves 4s linear 2s infinite;
animation: waves 4s linear 2s infinite;
}
.circle__back-2.paused {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
/* FORM */
.form {
grid-column: 3/4;
grid-row: 3/4;
}
.form__input {
width: 20.4rem;
height: 4rem;
border: none;
border-radius: 1rem;
font-size: 1.4rem;
padding-left: 1.4rem;
box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
background: none;
font-family: inherit;
color: var(--greyDark);
}
.form__input::-moz-placeholder {
color: var(--greyLight-3);
}
.form__input:-ms-input-placeholder {
color: var(--greyLight-3);
}
.form__input::placeholder {
color: var(--greyLight-3);
}
.form__input:focus {
outline: none;
box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
}
/* SEARCH */
.search {
grid-column: 3/4;
grid-row: 2/3;
position: relative;
display: flex;
align-items: center;
}
.search__input {
width: 20.4rem;
height: 4rem;
border: none;
border-radius: 1rem;
font-size: 1.4rem;
padding-left: 3.8rem;
box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
background: none;
font-family: inherit;
color: var(--greyDark);
}
.search__input::-moz-placeholder {
color: var(--greyLight-3);
}
.search__input:-ms-input-placeholder {
color: var(--greyLight-3);
}
.search__input::placeholder {
color: var(--greyLight-3);
}
.search__input:focus {
outline: none;
box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
}
.search__input:focus + .search__icon {
color: var(--primary);
}
.search__icon {
height: 2rem;
position: absolute;
font-size: .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0