js+css实现三维翻转的表单效果代码
代码语言:html
所属分类:表单美化
代码描述:js+css实现三维翻转的表单效果代码,结合nouislider实现了滑块拖动和checkbox选中效果。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.3.6.0.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/nouislider.11.0.0.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/nouislider.11.0.0.js"></script>
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Lato");
html {
display: flex;
overflow: hidden;
}
body {
margin: auto;
}
.pen-description {
margin-bottom: 30px;
text-align: center;
}
.pen-description .summary {
margin-bottom: 10px;
}
.pen-description .note {
color: #555;
font-size: 0.85rem;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.clearfix {
overflow: auto;
}
.noUi-horizontal.noUi-extended .noUi-handle {
outline: 0 none;
}
.option {
overflow-x: hidden;
}
.center {
display: table;
margin: 0 auto;
text-align: center;
}
.link {
border: 0 none;
color: #1E76D7;
cursor: pointer;
font-size: 15px;
font-weight: 400;
padding: 0;
text-transform: none;
}
.link:hover, .link:active {
background-color: transparent;
color: #185daa;
}
html, body {
min-height: 100%;
}
body * {
font-family: "Lato";
}
body {
background: #e9ecf3;
-webkit-text-size-adjust: 100%;
font-family: "Lato", sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
input {
-webkit-appearance: none;
}
/*** form element partial ***/
.example-container {
background-color: #fff;
border: 1px solid #e6e6e6;
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
padding: 15px;
width: 400px;
}
.example-backup {
display: none;
height: 320px;
width: 360px;
}
.example-backup .title {
margin-bottom: 30px;
padding-top: 50px;
}
.step-number {
color: #1E76D7;
font-size: 13px;
font-weight: 600;
padding-right: 7px;
}
.step-number:after {
content: "";
border-right: 1px solid #cdcdcd;
padding-right: 10px;
}
.step-name {
color: #888888;
font-size: 12px;
}
.icon {
text-indent: -9999px;
position: relative;
display: inline-block;
}
[data-icon=close] {
cursor: pointer;
margin-right: -15px;
margin-top: -15px;
width: 35px;
padding: 10px;
}
[data-icon=close]:hover:before {
opacity: 0.7;
}
[data-icon=close]:before {
background: url(//repo.bfw.wiki/bfwrepo/icon/5e03fe85c9e85.png);
background-repeat: no-repeat;
bottom: 0;
background-position: center;
content: "";
margin: auto;
position: absolute;
opacity: 0.4;
right: 0;
text-indent: 0;
width: 35px;
top: 0;
}
.example-header {
margin-bottom: 35px;
}
.form-checkbox {
float: left;
font-size: 13px;
font-weight: bold;
margin-bottom: 20px;
width: 50%;
}
.form-checkbox input[type=checkbox] {
position: absolute;
left: -9999px;
}
.form-checkbox input[type=checkbox] + label {
cursor: pointer;
display: inline-block;
line-height: 27px;
padding-left: 40px;
position: relative;
}
.form-checkbox input[type=checkbox] + label:hover {
color: #404040;
}
.form-checkbox input[type=checkbox] + label:hover:before {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
.form-checkbox input[type=checkbox] + label:before {
background-color: #fff;
border: 1px solid #e6e6e6;
border-radius: 2px;
content: "";
cursor: pointer;
display: block;
position: absolute;
left: 0;
width: 25px;
height: 25px;
transition: all 0.2s ease-in-out;
}
#ex_1 {
margin: 0 auto;
width: 400px;
}
#ex_1 label {
color: #999;
}
#ex_1 label + span {
opacity: 0.5;
}
#ex_1 label + span input {
cursor: not-allow.........完整代码请登录后点击上方下载按钮下载查看
网友评论0