div+css布局模拟木质背景老式收音机金属材质按钮点击按下切换效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局模拟木质背景老式收音机金属材质按钮点击按下切换效果代码
代码标签: div css 布局 模拟 木质 背景 老式 收音机 金属 材质 按钮 点击 按下 切换
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { height: 100%; width: 100%; } body { background-image: url("//repo.bfw.wiki/bfwrepo/image/634361f30f92e.png"); background-size: cover; } #radio-buttons { border: 0; padding: 0; margin: 0; display: flex; } input[type=radio] { display: none; } label { font-family: sans-serif; font-weight: 600; font-size: 0.6rem; letter-spacing: 0.5px; color: rgba(0, 0, 0, 0.3); transition: color 0.2s; } label span { display: inline-block; position: relative; text-align: center; width: 100%; text-shadow: 1px 1px rgba(255, 255, 255, 0.4); } label::before { content: ""; display: block; position: relative; width: 3rem; height: 0.5rem; background-color: gray; background-image: linear-gradient(white 40%, rgba(0, 0, 0, 0.5) 40%, transparent 70%); box-shadow: #4d4d4d 0 0 1px 1px inset, white 0 0 2px 2px inset, 0 2px 3px 0 rgba(0, 0, 0, 0.5); transition: box-shadow 0.2s; } div:not(.wrapper):first-child label:before { border-radius: 5px 0 0 5px; } div:not(.wrapper):last-child label:before { border-radius: 0 5px 5px 0; } input[type=radio]:checked + label { color: rgba(0, 0, 0, 0.7); } input[type=radio]:chec.........完整代码请登录后点击上方下载按钮下载查看
网友评论0