纯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-backgro.........完整代码请登录后点击上方下载按钮下载查看
网友评论0