纯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