`

CSS3 Piano

 
阅读更多
//转自：http://cssdeck.com/item/341/pure-css3-piano 
<html> 
<head> 
<title>piano</title> 
<style type="text/css"> 
* { 
  margin:0px; 
  padding:0px; 
  list-style:none; 
} 

:focus { 
  outline:none !important; 
} 

body { 
  background:#666; 
  background:-webkit-radial-gradient(bottom left,cover,#999,#666); 
  background:-moz-radial-gradient(bottom left,cover,#999,#666); 
  background:-ms-radial-gradient(bottom left,cover,#999,#666); 
  background:-o-radial-gradient(bottom left,cover,#999,#666); 
  background:radial-gradient(bottom left,cover,#999,#666); 
  height:500px; 
} 

a { 
  color:indigo; 
  text-decoration:none; 
} 

a:hover { 
  text-decoration:underline; 
} 

/* Piano Wrapper */ 
#p-wrapper { 
  background:#000; 
  background:-webkit-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); 
  background:-moz-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); 
  background:-ms-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); 
  background:-o-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); 
  background:linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); 
  width:1300px; 
  position:relative; 
  left:-20px; 
  -webkit-box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000; 
  -moz-box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000; 
  box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000; 
  border:2px solid #333; 
  -webkit-border-radius:0 0 5px 5px; 
  -moz-border-radius:0 0 5px 5px; 
  border-radius:0 0 5px 5px; 
  -webkit-animation:taufik 2s; 
  -moz-animation:taufik 2s; 
  animation:taufik 2s; 
} 

/* Tuts */ 
ul#piano { 
  display:block; 
  width:100%; 
  height:240px; 
  border-top:2px solid #222; 
} 

ul#piano li { 
  list-style:none; 
  float:left; 
  display:inline; 
  background:#aaa; 
  width:40px; 
  position:relative; 
} 

ul#piano li a,ul#piano li div.anchor { 
  display:block; 
  height:220px; 
  background:#fff; 
  background:-webkit-linear-gradient(-30deg,#f5f5f5,#fff); 
  background:-moz-linear-gradient(-30deg,#f5f5f5,#fff); 
  background:-ms-linear-gradient(-30deg,#f5f5f5,#fff); 
  background:-o-linear-gradient(-30deg,#f5f5f5,#fff); 
  background:linear-gradient(-30deg,#f5f5f5,#fff); 
  border:1px solid #ccc; 
  -webkit-box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); 
  -moz-box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); 
  box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); 
  -webkit-border-radius:0 0 3px 3px; 
  -moz-border-radius:0 0 3px 3px; 
  border-radius:0 0 3px 3px; 
} 

ul#piano li a:active,ul#piano li div.anchor:active { 
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4); 
  -moz-box-shadow:0 2px 2px rgba(0,0,0,0.4); 
  box-shadow:0 2px 2px rgba(0,0,0,0.4); 
  position:relative; 
  top:2px; 
  height:216px; 
} 

ul#piano li a:active:before,ul#piano li div.anchor:active:before { 
  content:""; 
  width:0px; 
  height:0px; 
  border-width:216px 5px 0px; 
  border-style:solid; 
  border-color:transparent transparent transparent rgba(0,0,0,0.1); 
  position:absolute; 
  left:0px; 
  top:0px; 
} 

ul#piano li a:active:after,ul#piano li div.anchor:active:after { 
  content:""; 
  width:0px; 
  height:0px; 
  border-width:216px 5px 0px; 
  border-style:solid; 
  border-color:transparent rgba(0,0,0,0.1) transparent transparent; 
  position:absolute; 
  right:0px; 
  top:0px; 
} 

/* Black Tuts */ 
ul#piano li span { 
  position:absolute; 
  top:0px; 
  left:-12px; 
  width:20px; 
  height:120px; 
  background:#333; 
  background:-webkit-linear-gradient(-20deg,#333,#000,#333); 
  background:-moz-linear-gradient(-20deg,#333,#000,#333); 
  background:-ms-linear-gradient(-20deg,#333,#000,#333); 
  background:-o-linear-gradient(-20deg,#333,#000,#333); 
  background:linear-gradient(-20deg,#333,#000,#333); 
  z-index:10; 
  border-width:1px 2px 7px; 
  border-style:solid; 
  border-color:#666 #222 #111 #555; 
  -webkit-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); 
  -moz-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); 
  box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); 
  -webkit-border-radius:0 0 2px 2px; 
  -moz-border-radius:0 0 2px 2px; 
  border-radius:0 0 2px 2px; 
} 

ul#piano li span:active { 
  border-bottom-width:2px; 
  height:123px; 
  -webkit-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000; 
  -moz-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000; 
  box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000; 
} 

/* Tooltips */ 
ul#piano li b { 
  position:absolute; 
  top:0px; 
  margin-top:-10px; 
  background:#111; 
  color:#fff; 
  font:bold 14px 'Trebuchet MS',Arial,Sans-Serif; 
  border:2px solid #e6e6e6; 
  -webkit-border-radius:7px; 
  -moz-border-radius:7px; 
  border-radius:7px; 
  width:100px; 
  height:30px; 
  padding:10px; 
  left:-40px; 
  z-index:100; 
  visibility:hidden; 
  opacity:0; 
  -webkit-box-shadow:0 2px 10px rgba(0,0,0,0.5); 
  -moz-box-shadow:0 2px 10px rgba(0,0,0,0.5); 
  box-shadow:0 2px 10px rgba(0,0,0,0.5); 
  -webkit-transition:all 0.2s ease-out; 
  -moz-transition:all 0.2s ease-out; 
  -ms-transition:all 0.2s ease-out; 
  -o-transition:all 0.2s ease-out; 
  -transition:all 0.2s ease-out; 
} 

/* Tooltip Arrow */ 
ul#piano li b:before { 
  content:""; 
  display:block; 
  position:absolute; 
  top:100%; 
  left:50px; 
  border-width:8px; 
  border-style:solid; 
  border-color:#e6e6e6 transparent transparent transparent; 
} 

ul#piano li b:after { 
  content:""; 
  display:block; 
  position:absolute; 
  top:100%; 
  left:53px; 
  border-width:5px; 
  border-style:solid; 
  border-color:#111 transparent transparent transparent; 
} 

ul#piano li:hover b { 
  visibility:visible; 
  opacity:1; 
  margin-top:10px; 
} 

/* Drop Down Menus */ 
ul#piano li ul,#search,#contact { 
  position:absolute; 
  border:2px solid #e6e6e6; 
  margin-top:-100px; 
  top:100%; 
  left:0px; 
  z-index:1000; 
  visibility:hidden; 
  opacity:0; 
  -webkit-box-shadow:0 2px 7px #000; 
  -moz-box-shadow:0 2px 7px #000; 
  box-shadow:0 2px 7px #000; 
  -webkit-transition:all 0.2s ease-out 0.2s; 
  -moz-transition:all 0.2s ease-out 0.2s; 
  -ms-transition:all 0.2s ease-out 0.2s; 
  -o-transition:all 0.2s ease-out 0.2s; 
  transition:all 0.2s ease-out 0.2s; 
} 

#search,#contact { 
  background:#333; 
  padding:40px 10px 8px; 
  -webkit-border-radius:0 0 18px 0; 
  -moz-border-radius:0 0 18px 0; 
  border-radius:0 0 18px 0; 
} 

#search input[type="text"],#contact input[type="text"] { 
  border:1px solid #aaa; 
  font:normal 12px Cambria,Georgia,Serif; 
  padding:2px 5px 2px; 
  width:120px; 
  margin-bottom:2px; 
  margin-right:2px; 
  position:relative; 
  color:#aaa; 
  -webkit-box-shadow:inset 0 0 5px #ccc; 
  -moz-box-shadow:inset 0 0 5px #ccc; 
  box-shadow:inset 0 0 5px #ccc; 
  -webkit-border-radius:0 0 10px 0; 
  -moz-border-radius:0 0 10px 0; 
  border-radius:0 0 10px 0; 
} 

#contact textarea { 
  border:1px solid #aaa; 
  font:normal 12px Cambria,Georgia,Serif; 
  padding:2px 5px; 
  width:270px; 
  height:100px; 
  margin-top:4px; 
  position:relative; 
  color:#aaa; 
  -webkit-box-shadow:inset 0 0 5px #ccc; 
  -moz-box-shadow:inset 0 0 5px #ccc; 
  box-shadow:inset 0 0 5px #ccc; 
  -webkit-border-radius:0 0 10px 0; 
  -moz-border-radius:0 0 10px 0; 
  border-radius:0 0 10px 0; 
} 

#contact input[type="submit"] { 
  background:-webkit-linear-gradient(top,#666,#000,#333); 
  background:-moz-linear-gradient(top,#666,#000,#333); 
  background:-ms-linear-gradient(top,#666,#000,#333); 
  background:-o-linear-gradient(top,#666,#000,#333); 
  background:linear-gradient(top,#666,#000,#333); 
  border:none; 
  -webkit-border-radius:3px; 
  -moz-border-radius:3px; 
  border-radius:3px; 
  -webkit-box-shadow:0 1px 1px #000; 
  -moz-box-shadow:0 1px 1px #000; 
  box-shadow:0 1px 1px #000; 
  padding:3px 10px 4px; 
  margin:4px 2px; 
  font:normal 10px Verdana,Arial,Sans-Serif; 
  color:#ccc; 
  float:right; 
} 

#search input:focus,#contct input:focus,#contact textarea:focus { 
  color:#000; 
} 

/* Loupe */ 
#search:after { 
  content:""; 
  width:5px; 
  height:5px; 
  border:1px solid #666; 
  -webkit-border-radius:10px; 
  -moz-border-radius:10px; 
  border-radius:10px; 
  position:absolute; 
  left:100%; 
  margin-left:-25px; 
  top:46px; 
  z-index:100; 
} 

#search:before { 
  content:""; 
  width:2px; 
  height:0px; 
  border:1px solid #666; 
  position:absolute; 
  z-index:3; 
  left:100%; 
  margin-left:-28px; 
  top:53px; 
  -webkit-transform:rotate(-42deg); 
  -moz-transform:rotate(-42deg); 
  -ms-transform:rotate(-42deg); 
  -o-transform:rotate(-42deg); 
  transform:rotate(-42deg); 
} 

ul#piano li li { 
  width:150px; 
  height:auto; 
  display:block; 
  float:none; 
  background:transparent; 
} 

ul#piano li li a,ul#piano li li a:active { 
  height:auto; 
  display:block; 
  padding:10px 15px; 
  background:#333; 
  font:normal 12px Arial,Sans-Serif; 
  color:#fff; 
  text-decoration:none; 
  -webkit-box-shadow:none; 
  -moz-box-shadow:none; 
  box-shadow:none; 
  border-radius:0px; 
  -webkit-border-radius:0px; 
  -moz-border-radius:0px; 
  border-width:1px 0; 
  border-style:solid; 
  border-color:#444 transparent #222 transparent; 
  top:0px; 
  margin-top:0px; 
} 

ul#piano li li a:active:before,ul#piano li li a:active:after { 
  border:none !important; 
} 

ul#piano li:hover ul,ul#piano li:hover #search,ul#piano li:hover #contact { 
  visibility:visible; 
  opacity:1; 
  margin-top:15px; 
} 

ul#piano li li a:hover { 
  background:#111; 
  border-top-color:#222; 
  border-bottom-color:#000; 
} 

/* Paper */ 
.credit { 
  margin:50px; 
  width:390px; 
  height:50px; 
  padding:30px; 
  position:relative; 
  background:#fff; 
  font:italic 1em Cambria,Georgia,Serif; 
  color:#666; 
  background:-webkit-gradient(linear,0% 20%,0% 92%,from(#fff),to(#f9f9f9),color-stop(.1,#fff)); 
  background:-moz-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); 
  background:-ms-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); 
  background:-o-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); 
  background:linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); 
  border:1px solid #ccc; 
  -webkit-box-shadow:1px 1px 4px rgba(0,0,0,0.1); 
  -moz-box-shadow:1px 1px 4px rgba(0,0,0,0.1); 
  box-shadow:1px 1px 4px rgba(0,0,0,0.1); 
  -webkit-border-bottom-right-radius:60px 5px; 
  -moz-border-radius-bottomright:60px 5px; 
  
border-bottom-right-radius:60px 5px; 
  -webkit-animation:taufik 1s; 
  -moz-animation:taufik 1s; 
  animation:taufik 1s; 
} 

.credit:before { 
  content:""; 
  width:98%; 
  z-index:-1; 
  height:100%; 
  padding:0 0 1px 0; 
  position:absolute; 
  bottom:0; 
  right:0; 
  background:#fff; 
  background:-webkit-gradient(linear,0% 20%,0% 92%,from(#fff),to(#f9f9f9),color-stop(.1,#fff)); 
  background:-moz-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); 
  background:-ms-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); 
  background:-o-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); 
  background:linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); 
  border:1px solid #ccc; 
  -webkit-box-shadow:1px 1px 8px rgba(0,0,0,0.1); 
  -moz-box-shadow:1px 1px 8px rgba(0,0,0,0.1); 
  box-shadow:1px 1px 8px rgba(0,0,0,0.1); 
  -webkit-border-bottom-right-radius:60px 5px; 
  -moz-border-radius-bottomright:60px 5px; 
  
border-bottom-right-radius:60px 5px; 
  -webkit-transform:skew(2deg,2deg) translate(-4px,8px); 
  -moz-transform:skew(2deg,2deg) translate(-4px,8px); 
  -ms-transform:skew(2deg,2deg) translate(-4px,8px); 
  -o-transform:skew(2deg,2deg) translate(-4px,8px); 
  transform:skew(2deg,2deg) translate(-4px,8px); 
} 

.credit:after { 
  content:""; 
  width:98%; 
  z-index:-1; 
  height:98%; 
  padding:0 0 1px 0; 
  position:absolute; 
  bottom:0; 
  right:0; 
  background:#f3f3f3; 
  background:-webkit-gradient(linear,0% 20%,0% 92%,from(#fff),to(#f9f9f9),color-stop(.1,#fff)); 
  background:-moz-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); 
  background:-ms-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); 
  background:-o-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); 
  background:linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); 
  border:1px solid #ccc; 
  -webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.1); 
  -moz-box-shadow:0px 0px 8px rgba(0,0,0,0.1); 
  box-shadow:0px 0px 8px rgba(0,0,0,0.1); 
  -webkit-transform:rotate(-4deg) translate(-14px,-2px); 
  -moz-transform:rotate(-4deg) translate(-14px,-2px); 
  -ms-transform:rotate(-4deg) translate(-14px,-2px); 
  -o-transform:rotate(-4deg) translate(-14px,-2px); 
  transform:rotate(-4deg) translate(-14px,-2px); 
} 

.credit_ribbon { 
  position:absolute; 
  top:0; 
  left:0; 
  width:115px; 
  height:35px; 
  background:rgba(0,0,0,0.1); 
  background:-webkit-gradient(linear,555% 20%,0% 92%,from(rgba(0,0,0,0.1)),to(rgba(0,0,0,0.0)),color-stop(.1,rgba(0,0,0,0.2))); 
  background:-moz-linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0)); 
  background:-ms-linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0)); 
  background:-o-linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0)); 
  background:linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0)); 
  border-left:1px dashed rgba(0,0,0,0.1); 
  border-right:1px dashed rgba(0,0,0,0.1); 
  -webkit-box-shadow:0px 1px 7px rgba(0,0,0,0.2); 
  -moz-box-shadow:0px 1px 7px rgba(0,0,0,0.2); 
  box-shadow:0px 1px 7px rgba(0,0,0,0.2); 
  -webkit-transform:rotate(-30deg) skew(0,0) translate(-30px,-20px); 
  -moz-transform:rotate(-30deg) skew(0,0) translate(-30px,-20px); 
  -o-transform:rotate(-30deg) skew(0,0) translate(-30px,-20px); 
  transform:rotate(-30deg) skew(0,0) translate(-30px,-20px); 
} 

.clear { 
  clear:both; 
} 


/* Animation */ 
@-webkit-keyframes taufik{ 
from{opacity:0;} 
to{opacity:1;} 
} 
@-moz-keyframes taufik{ 
from{opacity:0;} 
to{opacity:1;} 
} 
@keyframes taufik{ 
from{opacity:0;} 
to{opacity:1;} 
} 
</style> 
</head> 
<body> 
<div id="p-wrapper"> 
<ul id="piano"> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div></li> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div></li> 
<li><a href="#"></a><span></span><b>Home</b></li> 
<li><a href="#"></a><span></span><b>About</b></li> 
<li><a href="#"></a><span></span><b>Archives</b> 
<ul> 
<li><a href="#">2007</a></li> 
<li><a href="#">2006</a></li> 
<li><a href="#">2005</a></li> 
<li><a href="#">2004</a></li> 
</ul> 
</li> 

<li><a href="#"></a><b>Search</b> 
<div id="search"> 
<form> 
<input type="text" placeholder="Search..." /> 
</form> 
</div> 
</li> 

<li><a href="#"></a><span></span><b>Contact Me</b> 
<div id="contact"> 
<form> 
<input type="text" class="required" placeholder="Name" /> 
<input type="text" class="required" placeholder="Email" /> 
<textarea class="required" placeholder="Your messages..."></textarea> 
<input type="submit" value="Send" /> 
<div class="clear"></div> 
</form> 
</div> 
</li> 

<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div></li> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div></li> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div></li> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div></li> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div></li> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div><span></span></li> 
<li><div class="anchor"></div></li> 
</ul> 
</div> 

<div class="credit"> 
<strong>Pure CSS3 Piano by Taufik Nurrohman</strong><br /> 
No Images, No JavaScripts! Usable for navigation too <strong style="color:#CE877B;">:)</strong><br /> 
<div class="credit_ribbon"></div> 
</div> 
</body> 
</html>
分享到：
| HTTP Apache错误代码都有哪些？
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS3钢琴键上球体跳动动画特效.rar

    【CSS3钢琴键上球体跳动动画特效】是一个基于CSS3技术和jQuery库实现的网页交互特效。这个特效展示了一组在钢琴键上的小球体，随着音乐节奏或用户交互，这些球体会产生动态的跳动效果，为网页增添生动有趣的视觉体验...

    纯css图标.rar

    100个常用纯CSS图标（icono-home,icono-mail,icono-rss,icono-hamburger,icono-plus,icono-cross,icono-check,icono-power,icono-heart,icono-flag,icono-share,icono-pin,icono-locationArrow,icono-asterisk,icono...

    MyPiano小钢琴

    3. **图形用户界面**：为了提供友好的交互体验，MyPiano可能使用了GUI库，如Tkinter（Python）、Qt（C++/Python）、JavaFX（Java）或HTML/CSS/JavaScript（Web应用）。开发者需要掌握布局管理、事件处理和控件设计等...

    beautiful-piano:普通HTML和CSS中带有按键效果的精美钢琴键可视化效果

    美丽的钢琴 ... 它带有一个CSS文件，非常好用。 演示版 参见有关的演示 ... piano(document.querySelector('body'), {octaves: 3}); 钢琴（父母，可选） 参数： parent - DOM元素，其中注入了钢琴 options

    piano springboot +mysql

    3. `src/main/java`：Java源代码目录，可能有`com.example.piano`等包结构，包含主应用类（`Application.java`）和其他业务逻辑类。 4. `src/main/resources`：资源文件夹，可能有数据库连接配置文件、静态资源（如...

    JavaFX的piano应用

    - 它支持CSS样式，使得应用程序界面可以高度定制和美化。 - JavaFX使用FXML（FXML是FXML Language的缩写）进行界面布局，这是一种基于XML的语言，便于分离界面设计和业务逻辑。 2. **事件处理**： - 在piano应用...

    simple-working-piano:带有HTML，CSS和Javascript的钢琴

    在这个简易钢琴项目中，CSS被用来设计钢琴的外观，包括琴键的颜色、大小、位置以及整个界面的样式。例如，CSS可以设置琴键在页面上的排列方式，当用户点击琴键时改变其背景色，或者添加动画效果增加互动性。 ...

    react-piano:用于React的交互式钢琴键盘

    import 'react-piano/dist/styles.css' ; 导入CSS需要CSS加载程序（如果您使用的是create-react-app，则已经为您设置好了）。 如果没有CSS加载器，则可以从将CSS文件复制到项目。 然后使用组件： function App ( ...

    pianoKeyboard:HTML和CSS钢琴键盘

    对于钢琴显示，您设置了piano.js和piano_style.css文件以及jQuery。 如果要以乐谱形式显示演奏的音符，还需要参考 。 像这样嵌入： &lt; link rel =" stylesheet " href =" piano_style.css " &gt; &lt; script ...

    Desktop_springmvc_管理_piano1od_

    - src/main/webapp：Web应用的根目录，包括WEB-INF下的web.xml（Servlet配置）、静态资源（如CSS、JavaScript）和视图（JSP文件）。 总结起来，这个项目是一个基于Spring MVC的后台管理系统，具备数据处理能力，...

    piano

    在"piano"项目中，CSS可能会定义每个琴键的颜色、大小、阴影效果，以及整个钢琴的布局和对齐方式。使用CSS选择器，如类选择器 `.key` 或 ID 选择器 `#white-key`，可以精准地为特定元素应用样式。同时，CSS还提供了...

    Piano_022_Bhanu

    如果"Piano_022_Bhanu-main"包含子文件，它们可能包括样式表（如style.css）和脚本文件（如script.js）。 在深入分析之前，我们需要实际访问或解压这个文件以获取更多信息。不过，从现有的信息来看，我们可以推测这...

    Piano Tiles Game Using JavaScript.zip

    本项目“Piano Tiles Game Using JavaScript”旨在利用JavaScript来实现一款流行的音乐游戏——钢琴瓷砖。这个游戏的目标是点击屏幕上下落的黑色瓷砖，随着音乐节奏准确地敲击每一个音符，从而提升玩家的手速和反应...

    Super Don Piano 64-crx插件

    【Super Don Piano 64-crx插件】是一款专为英文用户设计的浏览器扩展程序，旨在为用户提供一种独特的网络浏览体验，将普通的网页互动转化为充满乐趣的“Don Piano”风格。这款插件的核心功能是将网页元素与音乐元素...

    virtual-piano:虚拟钢琴

    为了让钢琴看起来更真实，CSS3提供了许多高级特性，如渐变、阴影和过渡效果。例如，琴键可能使用阴影效果来模拟立体感，而渐变则可以用来表现琴键的光泽。此外，CSS的布局技术，如Flexbox或Grid，可以帮助精确地排列...

    feel_piano_v3:feel_piano_v3互动在线钢琴

    它使用一些javascript生成CSS来调整大小和修改布局，具体取决于屏幕尺寸和缩放模式。 这里有很多百分比的高度。 jQuery获取选择菜单的window.height和div高度。 然后用像素值修改键盘。 我还没有把所有的和弦和音阶...

    piano.github.io：钢琴演奏者

    3. **JavaScript 功能**：为了实现交互性，项目可能包含JavaScript代码，例如用于播放和控制钢琴音符，或者实现一些动态效果，比如动画或用户交互。 4. **音乐资源**：网站可能包含钢琴曲的音频文件，用于播放和...

    Simple Piano Tiles Game in JavaScript Free Source Code.zip

    - **CSS样式**：通过CSS，我们可以设定钢琴瓷砖的外观，如颜色、大小、动画效果等，使其更符合游戏的视觉需求。 - **音频处理**：游戏的核心是音乐，JavaScript的`Audio`对象允许我们加载、播放和控制音频资源。每...

    Virtual-Piano:钢琴

    "Virtual-Piano: 钢琴"项目便是这种创新的一个典型代表，它利用先进的网页技术，尤其是CSS（Cascading Style Sheets）来实现一个在线钢琴模拟器，让人们在网页上即可弹奏美妙的旋律。下面我们将深入探讨这个项目中所...

Magicbox
Global site tag (gtag.js) - Google Analytics