jquery inpitassembly单选复选美化效果代码-html代码-BFW代码库

代码语言：html
代码描述：jquery inpitassembly单选复选美化效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        .hljs{display:block;overflow-x:auto;padding:0.5em;background:#F0F0F0}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888888}.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:bold}.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#880000}.hljs-title,.hljs-section{color:#880000;font-weight:bold}.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#BC6060}.hljs-literal{color:#78A960}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
            body,
        html {
        	margin: 0;
        	height: 100%
        }
        
        h1,
        h2,
        h3,
        h4,
        h5,
        p {
        	margin: 10px 0;
        	color: inherit
        }
        
        pre {
        	position: relative;
        	padding: 0 !important;
        	margin: 0
        }
        
        code {
        	padding: 0 30px !important
        }
        
        pre h2 {
        	position: absolute;
        	top: 30px;
        	padding: 3px 20px;
        	right: 0;
        	color: #ffffff;
        	background-color: #9c56f1
        }
        
        hr {
        	background-color: #d2d2d2;
        	margin: 10px 0;
        	border: 0;
        	height: 1px
        }
        
        table,
        td,
        th,
        tr {
        	border: 0.5px solid #c392ff;
        	margin: 30px 0;
        	background-color: #e6d2ff;
        	color: #602aa0;
        }
        th {
            white-space: pre;
        }
        
        td,
        th {
        	padding: 10px
        }
        
        a,
        a:hover,
        a:visited {
        	color: #222
        }
        
        *[disabled] {
        	opacity: 0.3;
        	cursor: no-drop !important
        }
        *[formname] {
        	margin: 0 0 50px 0;
        }
        .logo {
            position: absolute;
            right: -80px;
            top: -10px;
            transform: rotate(45deg);
            background-color: rgb(156, 86, 241);
            text-align: center;
            padding: 20px 0 0 0;
            width: 200px;
            height: 55px;
        }
        .logo > a {
        	transform: rotate(-45deg);
            display: block;
        }
        
        .inpit .li>div[name][value]:hover {
        	border: 2px dashed #9c56f1;
        	background-color: rgba(156, 86, 241, 0.1)
        }
        
        .inpit {
        	background-color: #9c56f1;
        	position: relative;
        	height: 100%
        }
        
        .inpit .li {
        	margin: 0 auto;
        	min-width: 200px;
        	padding: 20px 0;
        	display: flow-root
        }
        
        .inpit .li>div[name][value],
        .inpit .li>div.add {
        	cursor: pointer;
        	transition: transform 0.2s ease-in, box-shadow 0.2s ease-out;
        	width: calc(25% - 64px);
        	box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
        	float: left;
        	background-color: #fff;
        	padding: 10px 20px;
        	border: 2px dashed #dcdcdc;
        	border-radius: 4px;
        	margin: 0 10px 20px
        }
        
        .inpit .li>div.ack[name][value],
        .inpit .li>div.active[name][value]{
        	box-shadow: 0 3px 20px rgba(156, 86, 241, 0.43);
        	transform: scale(1.05);
        	border: 2px solid #9c56f1;
        	background-color: #9c56f1;
        	color: #fff;
        	animation: scales 0.3s
        }
        
        @keyframes scales {
        	0% {
        		transform: scale(1)
        	}
        	50% {
        		transform: scale(1.25)
        	}
        	100% {
        		transform: scale(1)
        	}
        }
        
        .inpit>div {
        	position: relative;
        	overflow: hidden;
        	width: 800px;
        	display: flow-root;
        	background-color: #fff;
        	padding: 10px 30px 50px 30px;
        	margin: 0 auto
        }
        
        .inpit button,
        .inpit .insideonelist {
        	background-color: rgb(156, 86, 241);
        	border-radius: 50px;
        	font-size: 20px;
        	color: #fff;
        	width: 100%;
        	max-width: 400px;
        	margin: 10px auto;
        	border: #000000;
        	padding: 10px 0;
        	text-align: center;
        	display: block;
        	cursor: pointer
        }
        
        .inpit .flex>div {
        	float: left;
        	width: 40%;
        	margin: 0 5% 40px
        }
        
        .inpit .flex .li>div {
        	width: calc(50% - 64px) !important
        }
        
        .inpit .style_a {
        	position: relative;
        	overflow: hidden
        }
        
        .inpit .style_a:before {
        	content: "VIP";
        	position: absolute;
        	top: 0;
        	right: 0;
        	background-color: #f00;
        	color: #fff;
        	padding: 3px 10px;
        	font-size: 12px
        }
        
        .inpit .style_b.ack {
        	background: -moz-linear-gradient(top, #9C27B0, rgba(0, 0, 255, 0.5));
        	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9C27B0), to(rgba(0, 0, 255, 0.5)));
        	background: -o-linear-gradient(top, #9C27B0, rgba(0, 0, 255, 0.5))
        }
        
        .inpit .style_c {
        	background-image: url("../1.4/img/dy.gif");
        	color: #fff;
        	border: 2px solid #2c5286 !important
        }
        
        .inpit .style_d {
        	filter: blur(3px);
        }
        
        .inpit .style_d.ack {
        	filter: none
        }
        
        .inpit .t {
        	margin: 20px 0;
        	color: #ffffff;
        	background-color: #9c56f1;
        	border-left: 4px solid #533379;
        	padding: 5px 10px;
        	font-size: 30px
        }
        
        .inpit .t > span {
            background-color: rgba(0, 0, 0, 0.23);
            padding: 0 10px;
            margin: 0 10px 0 0;
        }
        
        .inpit .ho h2 {
        	background-image: url("../2.3/img/font-bk.jpg");
        	-moz-background-clip: text;
        	-o-background-clip: text;
        	-webkit-background-clip: text;
        	background-clip: text;
        	background-position: 144px center;
        	color: transparent;
        	text-align: left;
        	text-shadow: 0 0 rgba(255, 255, 255, 0.06);
        	animation: wave-animation 1s infinite linear, loading-animation 10s infinite linear alternate;
        	font-size: 6rem;
        	font-weight: bold;
        	opacity: 1
        }
        .inside {
         	background-color: rgba(0, 0, 0, 0.06);
            padding: 20px;
            display: inline-block;
            width: calc(100% - 90px);
            margin: 0 0 20px 50px
         }
        .hljs-attr {
        	color: #ff4d40
        }
        
        .hljs-name,
        .hljs-tag {
        	color: #03A9F4;
        	font-weight: 100
        }
        
        .hljs-string {
        	color: #009688
        }
    </style>
</head>



<body class="inpit">
    <div id="inpitassembly" formname="demonstration">
        <!--- 初始 --->
        <h2 class="t">初始</h2>
        <p>
            现在inpit/assembly并不需要一定声明"type="inpit/assembly"(标签中)作为inpitassembly的容器，而是通过inpitassembly方法来启动。
        </p>
        <p>
            当然为承载1.0版本的声明方式你依旧可以这样写,例子2：
        </p>
        <pre>
		<h2>CDN</h2>
		<code class="html">
&lt;!-- jquery 2.1 --&gt;				
&lt;script type=&quot;text/javascript&quot; src=&quot;//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js&quot;&gt;&lt;/script&gt;

&lt;!-- inpit/assembly 2.0 +  --&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;//repo.bfw.wiki/bfwrepo/js/inpitassembly.2.3.js&quot;&gt;&lt;/script&gt;
		</code>
	</pre>

        <p>为更新缓存的inpitassembly，可以在地址后加入时间戳(?time=20171111020000)</p>
        <p>当然你也可以随时更改inpitassembly版本:</p>

        <pre>
		<h2>CDN</h2>
		<code class="html">
&lt;!-- inpit/assembly 1.4 --&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;//repo.bfw.wiki/bfwrepo/js/inpitassembly.1.4.js&quot;&gt;&lt;/script&gt;

&lt;!-- inpit/assembly 2.1 ~ 2.3 --&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;//repo.bfw.wiki/bfwrepo/js/inpitassembly.2.3.js&quot;&gt;&lt;/script&gt;
		</code>
	</pre>


        <pre>
		<h2>js</h2>
		<code class=".........完整代码请登录后点击上方下载按钮下载查看