纯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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0