纯css+div实现步进选择器增减器加减器效果代码
代码语言:html
所属分类:表单美化
代码描述:纯css+div实现步进选择器增减器加减器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" class="theme_switchable"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap'> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.15.3.css"> <style> :root { --user-button-circle: rgba(0,0,0,0.025); --user-button-cardborder: rgba(255,255,255,0.25); --user-button-text:#323133; --user-button-shadow:rgba(0,0,0,0.1); } body #user-button { z-index: 1000; bottom: 1rem !important; right: 1rem !important; color: var(--user-button-text); transition: 1s 0s ease-out; -webkit-animation: slide 3s ease-out forwards; animation: slide 3s ease-out forwards; } @-webkit-keyframes slide { 0%, 50% { opacity: 0; display: block !important; } 100% { opacity: 1; display: block !important; } } @keyframes slide { 0%, 50% { opacity: 0; display: block !important; } 100% { opacity: 1; display: block !important; } } body #user-button .u-card { border-radius: 100%; box-shadow: 0 0 1rem -0.25rem var(--user-button-shadow), inset 0 0 1rem -0.75rem var(--user-button-shadow); } body #user-button .u-main { cursor: pointer; --user-button-background:var(--user-button-main, #EC87C0); } body #user-button .u-main img { height: 100%; width: 100%; } body #user-button .u-main iframe { position: absolute; top: 0; left: 0; width: 4rem; height: 4rem; opacity: 1; transition: 0s 4s; } body #user-button .u-icons { position: relative; z-index: 950; transform: translate(-50%, -50%); background: var(--user-button-circle); box-shadow: 0 0 0 0.125rem var(--user-button-cardborder); border-radius: 100%; transition: 0.25s; opacity: 1 !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); /*&:before { z-index:-1; position:absolute; top:0; right:0; bottom:0; left:0; content:''; backdrop-filter: blur(10px); }*/ } @-webkit-keyframes diespin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes diespin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } body #user-button .u-icons a.u-random:not(:hover) div { -webkit-animation-play-state: paused; animation-play-state: paused; } body #user-button .u-icons > * { position: absolute; width: 30px; height: 30px; background: var(--singlecolour); border-radius: 100%; cursor: pointer; transform: translate(-50%, -50%); transition: 0.25s -0.05s; } body #user-button .u-icons > *:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } body #us.........完整代码请登录后点击上方下载按钮下载查看
网友评论0