中性表单选择框选择效果
代码语言:html
所属分类:表单美化
代码描述:中性表单选择框选择效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/all.min.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400&display=swap'); body { background: #f2f2ff; font-family: raleway; color: #999; margin: 0; } .wrapper { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; width: 100wh; box-sizing: border-box; margin-top: -20px; } .wrapper > h4 { position: relative; z-index: 5; } .container { position: relative; display: flex; justify-content: flex-end; height: 80px; width: 400px; border-radius: 15px; background: #f2f2ff; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.07), -10px -10px 20px rgba(255, 255, 255, 0.8); z-index: 1; } .container::after { position: absolute; top: 0; left: 0; content: ''; display: block; height: 50px; width: 170px; border-radius: 5px; background: #f2f2ff; box-shadow: inset 2px 2px 11px #e5e5e5, inset -5px -5px 11px #ffffff; z-index: 1; top: calc(50% - 25px); left: calc(50% - 170px); transition: all 0.4s cubic-bezier(1, 0.04, 0.66, 1.23); } .cash-selected { animation: pressed-left 0.4s cubic-bezier(1, 0.04, 0.66, 1.23); } .card-selected { animation: pressed-right 0.4s cubic-bezier(1, 0.04, 0.66, 1.23); } .cash-selected::after { left: calc(50% - 170px); } .card-selected::after { left: calc(50% - 0px); } label { display: flex; position: relative; align-items: center; justify-content: center; text-align: center; /* border: 1px solid red; */ width: 50%; cursor: pointer; height: 100%; z-index: 2; } /* label::after { position: absolute; top: 0; left: 0; content: ''; display: none; height: 50px; width: 170px; border-radiu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0