css实现radio点击选择美化动画效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现radio点击选择美化动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing:border-box; } body { display:flex; height:100vh; margin:0; padding:0; background-color:white; } .phone { width:320px; height:260px; margin:auto; display:flex; align-items:flex-end; position:relative; justify-content:center; } .phone::before { content:''; position:absolute; width:84%; height:0px; bottom:-10px; box-shadow:0 0 25px 9px rgba(255,0,0,0.33),50px 10px 25px 8px rgba(18,255,0,0.33),-40px 8px 25px 9px rgba(242,255,0,0.33); left:0; right:0; margin:auto; } .phone::after { content:''; } .phone_content { filter:contrast(20); width:100%; background-color:white; overflow:hidden; position:absolute; } .phone_bottom { width:100%; height:66px; background:black; display:flex; justify-content:center; filter:blur(10px); } input { display:none; } label { cursor:pointer; display:flex; width:33%; height:66px; position:relative; z-index:2; align-items:center; justify-content:center; } label >img { width:25px; top:0; bottom:0; margin:auto; position:absolute; z-index:3; transition:200ms 100ms cubic-bezier(0.14,-0.08,0.74,1.4); } label::before { content:''; position:absolute; } .circle { width:60px; height:60px; background:black; position:absolute; top:152px; z-index:1; border-radius:50%; left:0; right:0; margin:auto; transition:200ms cubic-bezier(0.14,-0.08,0.74,1.4); } .indicator { width:70px; height:70px; background-image:linear-gradient(0deg,#f7b0b0,rgba(183,255,154,0)),linear-gradient(0deg,rgba(158,255,151,0.75),rgba(183,255,154,0)),linear-gradient(0deg,#b4fffb,rgba(183,255,154,0)); backg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0