css实现逼真拟物态指针旋转radio美化单选框效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现逼真拟物态指针旋转radio美化单选框效果代码
代码标签: css 逼真 拟物 指针 旋转 radio 美化 单选框码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <style> @import url(https://fonts.googleapis.com/css?family=Jura:600);* { box-sizing: border-box } body { background: #f1ece6 } .wrapper { width: 250px; height: 320px; margin: 0 auto; position: relative } .main { width: 250px; height: 250px; transform: rotate(43deg) scale(0.8); margin-bottom: 60px; border-radius: 50% 50% 0 50%; background: #faf9f1; background: linear-gradient(270deg,#f6f4eb,#dcd6d2); border: 1px solid rgba(0,0,0,0.1); position: relative; padding: 5px; transition: all .5s ease-out; box-shadow: 0 0 5px rgba(150,100,100,0.3),3px 3px 8px rgba(150,100,100,0.3) } .inner { width: 100%; height: 100%; background: #faf9f1; background: linear-gradient(270deg,#fafaf2,#ece7e1); border-radius: inherit } .inner:after { content: ""; position: absolute; width: 170px; height: 170px; left: 30px; top: 30px; border-radius: 50%; box-shadow: inset -20px -20px 50px rgba(150,100,100,0.075),10px 10px 10px 5px rgba(150,100,100,0.075); background: inherit } .inner:before { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; right: 20px; bottom: 20px; background: inherit; box-shadow: inset 5px 5px 15px rgba(150,100,100,0.075),-1px -1px 3px rgba(150,100,100,0.075) } input[type=radio] { clip: rect(0 0 0 0); p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0