<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复选框和单选按钮动画效果</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<section>
<form class="ac-custom ac-checkbox ac-cross" autocomplete="off">
<h2>How do you collaboratively administrate empowered markets via plug-and-play networks?</h2>
<ul>
<li><input id="cb1" name="cb1" type="checkbox"><label for="cb1">Efficiently unleash information</label></li>
<li><input id="cb2" name="cb2" type="checkbox"><label for="cb2">Quickly maximize timely deliverables</label></li>
<li><input id="cb3" name="cb3" type="checkbox"><label for="cb3">Dramatically maintain solutions</label></li>
<li><input id="cb4" name="cb4" type="checkbox"><label for="cb4">Completely synergize relationships</label></li>
<li><input id="cb5" name="cb5" type="checkbox"><label for="cb5">Professionally cultivate customer service</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-radio ac-fill" autocomplete="off">
<h2>Where do you proactively envision multimedia based expertise and cross-media growth strategies?</h2>
<ul>
<li><input id="r1" name="r1" type="radio"><label for="r1">Seamlessly visualize quality intellectual capital</label></li>
<li><input id="r2" name="r1" type="radio"><label for="r2">Collaboratively administrate turnkey channels</label></li>
<li><input id="r3" name="r1" type="radio"><label for="r3">Objectively seize scalable metrics</label></li>
<li><input id="r4" name="r1" type="radio"><label for="r4">Energistically scale future-proof core competencies</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-checkbox ac-checkmark" autocomplete="off">
<h2>Why do you interactively procrastinate high-payoff content without backward-compatible data?</h2>
<ul>
<li><input id="cb6" name="cb6" type="checkbox"><label for="cb6">Credibly reintermediate backend ideas</label></li>
<li><input id="cb7" name="cb7" type="checkbox"><label for="cb7">Continually reintermediate integrated processes</label></li>
<li><input id="cb8" name="cb8" type="checkbox"><label for="cb8">Distinctively exploit optimal alignments</label></li>
<li><input id="cb9" name="cb9" type="checkbox"><label for="cb9">Quickly coordinate e-business applications</label></li>
<ul>
</form>
</section>
<section>
<form class="ac-custom ac-radio ac-circle" autocomplete="off">
<h2>How would you dynamically target high-payoff intellectual capital for customized technologies?</h2>
<ul>
<li><input id="r5" name="r2" type="radio"><label for="r5">Objectively integrate emerging core competencies</label></li>
<li><input id="r6" name="r2" type="radio"><label for="r6">Progressively maintain extensive infomediaries</label></li>
<li><input id="r7" name="r2" type="radio"><label for="r7">Proactively fabricate one-to-one materials</label></li>
<li><input id="r8" name="r2" type="radio"><label for="r8">Quickly aggregate B2B users</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-checkbox ac-boxfill" autocomplete="off">
<h2>How can you appropriately empower dynamic leadership skills after business portals?</h2>
<ul>
<li><input id="cb10" name="cb10" type="checkbox"><label for="cb10">Professionally fashion wireless leadership</label></li>
<li><input id="cb11" name="cb11" type="checkbox"><label for="cb11">Dynamically reinvent market-driven opportunities</label></li>
<li><input id="cb12" name="cb12" type="checkbox"><label for="cb12">Compellingly embrace empowered e-business</label></li>
<li><input id="cb13" name="cb13" type="checkbox"><label for="cb13">Synergistically deliver performance based methods</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-radio ac-swirl" autocomplete="off">
<h2>How do you interactively productize premium technologies whereas interdependent quality vectors?</h2>
<ul>
<li><input id="r9" name="r3" type="radio"><label for="r9">Uniquely matrix economically sound value</label></li>
<li><input id="r10" name="r3" type="radio"><label for="r10">Competently parallel task fully researched data</label></li>
<li><input id="r11" name="r3" type="radio"><label for="r11">Collaboratively expedite quality manufactured products</label></li>
<li><input id="r12" name="r3" type="radio"><label for="r12">Quickly communicate enabled technology and leadership skills</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-checkbox ac-diagonal" autocomplete="off">
<h2>Do you rapaciously seize adaptive infomediaries and user-centric intellectual capital and how?</h2>
<ul>
<li><input id="cb14" name="cb14" type="checkbox"><label for="cb14">Collaboratively unleash market-driven "outside the box" thinking</label></li>
<li><input id="cb15" name="cb15" type="checkbox"><label for="cb15">Enthusiastically engage process improvements</label></li>
<li><input id="cb16" name="cb16" type="checkbox"><label for="cb16">Efficiently myocardinate market-driven innovation</label></li>
<li><input id="cb17" name="cb17" type="checkbox"><label for="cb17">Phosfluorescently expedite impactful supply chains</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-list" autocomplete="off">
<h2>Your to do list to uniquely deploy cross-unit benefits with wireless testing procedures:</h2>
<ol>
<li><input id="cb18" name="cb18" type="checkbox"><label for="cb18"><span>Quickly incentivize impactful actions</span></label></li>
<li><input id="cb19" name="cb19" type="checkbox"><label for="cb19"><span>Monotonically engage market-driven capital</span></label></li>
<li><input id="cb20" name="cb20" type="checkbox"><label for="cb20"><span>Globally harness multimedia collaboration</span></label></li>
<li><input id="cb21" name="cb21" type="checkbox"><label for="cb21"><span>Professionally cultivate customer service</span></label></li>
<ol>
</form>
</section>
</div><!-- /container -->
<script src="js/svgcheckbx.js"></script>
<div style="text-align:center;clear:both">
</div>
</body>
</html>
基于CSS3实现的复选框和单选按钮美化的动态特效.zip
版权申诉
106 浏览量
2022-11-09
22:28:31
上传
评论
收藏 20KB ZIP 举报
基于CSS3实现的复选框和单选按钮美化的动态特效.zip （10个子文件） 
132686877125413799 css 
demo.css 2KB normalize.css 2KB component.css 3KB fonts codropsicons codropsicons.woff 2KB
codropsicons.svg 4KB codropsicons.ttf 2KB codropsicons.eot 2KB
index.html 7KB js modernizr.custom.js 8KB svgcheckbx.js 10KB资源评论
