css实现自定义radio勾选框选择效果代码-html代码-BFW代码库

css实现自定义radio勾选框选择效果代码

代码语言：html

代码描述：css实现自定义radio勾选框选择效果代码

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

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

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        @charset "UTF-8";
	@import url("https://fonts.googleapis.com/css?family=Inter:400'");
	html {
	background-color:#1a1a1a;
	overflow:hidden
}
.middle {
	width:100%;
	text-align:center
}
.middle h1 {
	font-family:"Inter",sans-serif;
	color:#fff
}
.middle input[type=radio] {
	display:none
}
.middle input[type=radio]:checked+.box {
	background-color:#007e90
}
.middle input[type=radio]:checked+.box span {
	color:white;
	transform:translateY(70px)
}
.middle input[type=radio]:checked+.box span:before {
	transform:translateY(0px);
	opacity:1
}
.middle .box {
	width:200px;
	height:200px;
	background-color:#fff;
	transition:all 250ms ease;
	will-change:transition;
	display:inline-block;
	text-align:center;
	cursor:pointer;
	position:relative;
	font-family:"Inter",sans-serif;
	font-weight:900
}
.middle .box:active {
	transform:translateY(10px)
}
.middle .box span {
	position:absolute;
	transform:translate(0,60px);
	left:0;
	right:0;
.........完整代码请登录后点击上方下载按钮下载查看