svg+js实现可点击交互的算盘代码-html代码-BFW代码库

svg+js实现可点击交互的算盘代码

代码语言：html

所属分类：其他

代码描述：svg+js实现可点击交互的算盘代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body {
	background: #3c3c3c;
}
svg {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	max-height: 90vw;
	max-width: 90vh;
	height: 90vh;
	width: 90vw;
}
rect:hover {
	filter: brightness(120%);
}
</style>


  
  
</head>

<body >
  <svg viewBox="0 0 100 100">
	<style>
		rect {
			cursor: pointer;
			transition: x 300ms;
			transition-timing-function: cubic-bezier(0.58, 0.09, 0.87, 0.33);
			box-shadow: 2px 2px 2px #000;
		}
		.toggled {
			x: 40;
		}
		.row1{
			fill: #DBE33B;
		}
		.row2{
			fill: #F7C757;
		}
		.row3{
			fill: #EBAB73;
		}
		.row4{
			fill: #CF8F8F;
		}
		.row5{
			fill: #B373AB;
		}
		.row6{
			fill: #9757C7;
		}
		.row7{
			fill: #7B3BE3;
		}
		.row8{
			fill: #5F1FFF;
		}
		.row9{
			fill: #4000E0;
		}
	</style>
	<path d="M2.5 0v100M97.5 0v100" fill="none" stroke="tan" stroke-width="5" />
	<path d="M5 10 h90 M5 20h90 M5 30h90 M5 40h90 M5 50h90 M5 60h90 M5 70h90 M5 80h90 M5 90h90" fill="none" stroke="tan" stroke-width="2" />
	<g class="row1" fill="darkorange">
		<rect class="bead b1" transform="translate(5 0)" x="0" y="6" height="8" width="5" rx="2" dominant-baseline="middle" transform-origin="50% 50%" />
		<rect class="bead b2" transform="translate(10 0)" x="0" y="6" height="8" width="5" rx="2" dominant-baseline="middle" transform-origin="50% 50%" />
		<rect class="bead b3" transform="translate(15 0)" x="0" y="6" height="8" width="5" rx="2" dominant-baseline="middle" transform-origin="50% 50%" />
		<rect class="bead b4" transform="translate(20 0)" x="0" y="6" height="8" width="5" rx="2" dominant-baseline="middle" transform-origin="50% 50%" />
		<rect class="bead b5" transform="translate(25 0)" x="0" y="6" height="8" width="5" rx="2" dominant-baseline="middle" transform-origin="50% 50%" />
		<rect class="bead b6" transform="translate(30 0)" x="0" y="6" height="8" width="5" rx="2" dominant-baseline="middle" transform-origin="50% 50%" />
		<rect class="bead b7" transform="translate(35 0)" x="0" y="6" height="8" width="5" rx="2" dominant-baseline="middle" transform-origin="50% 50%" />
		<rect class="bead b8" transform="translate(40 0)" x="0" y="6" height="8" width="5" rx="2" dominant-baseline="middle" transform-origin="50% 50%" />
		<rect class="bead b9" transform="translate(45 0)" x="0" y="6" height="8" width="5" rx="2" dominant-baseline="middle" transform-origin="50% 50%" />
		<rect class="bead b10" transform="translate(50 0)" x="0" y="6" height="8" width="5" rx="2" dominant-baseline="middle" transform-origin="50% 50%" />
	</g>
	<g class="row2" transform="translate(0 10)" fill="firebrick">
		<rect class="bead b1" transform="translate(5 0)" x="0" y="6" height="8" width="5" rx="2" dominant-baseline="middle" transform-origin="50% 50%" />
		<rect class="bead b2" transfo.........完整代码请登录后点击上方下载按钮下载查看