纯css实现radio样式点击动画效果-html代码-BFW代码库

纯css实现radio样式点击动画效果

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> Radio buttons</title>
<style>
      .rdo-grp {
  position: absolute;
  top: calc(50% - 10px);
}
.rdo-grp label {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 6px 8px;
  border-radius: 20px;
  float: left;
  transition: all 0.2s ease;
}
.rdo-grp label:hover {
  background: rgba(125,100,247,0.06);
}
.rdo-grp label:not(:last-child) {
  margin-right: 16px;
}
.rdo-grp label span {
  vertical-align: middle;
}
.rdo-grp label span:first-child {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: #e8eaed;
  border-radius: 50%;
  transition: all 0.2s ease;
  margin-right: 8px;
}
.rdo-grp label span:first-child:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  margin: 2px;
  background: #fff;
  border-radius: 50%;
  transition: all 0.2s ease;
}
.rdo-grp label:hover span:first-child {
  background: #7d64f7;
}
.rdo-grp input {
  display: none;
}
.rdo-grp input:c.........完整代码请登录后点击上方下载按钮下载查看