CSS3 Piano

最新推荐文章于 2022-10-08 18:16:34 发布
最新推荐文章于 2022-10-08 18:16:34 发布
阅读量102 收藏
点赞数
分类专栏： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kaka_2014/article/details/84208061
版权
//转自：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>
Time，，
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
simple-working-piano:带有HTML，CSS和Javascript的钢琴
05-12
简易钢琴 用Html，Css和Javascript构建的钢琴。 通过单击以下链接查看钢琴： : 使用git clone 克隆reoository
html版piano
06-05
使用web audio api开发, html版本的21键低中高音钢琴demo
css3实现摇动效果的下拉菜单(1+X Web前端开发初级 例题)
黛琳ghz的博客，期待你的关注。
04-20 1354
css3实现摇动效果的下拉菜单(1+X Web前端开发初级 例题)
box-shadow用法总结
热门推荐
chenlingA的专栏
03-20 3万+
box-shadow用法总结 box-shadow：||  ?? || ：阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影边框；阴影模糊值；阴影颜色  CSS3盒阴影效果不仅支持盒外阴影，还支持内阴影，使用时增加一个inset属性即可。例如：box-shadow: inset 0 0 1px #fff;所表示的含义是没有偏移，1像素模糊的白色内阴影。
CSS3 box-shadow阴影属性使用
qq_31362557的博客
01-24 559
语法： box-shadow: [投影方式] 水平偏移量 垂直偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 定义： 给元素添加周边的阴影效果 参数 默认值 定义 阴影类型 outset（可选值：inset） 选择投影方式为 外投影还是内投影 水平偏移量 ...
css3 动画 线两边延长,CSS3 线条交叉移位动画
weixin_33418394的博客
08-04 303
CSS语言：CSSSCSS确定body {background-color: #82b4b4;}.piano {position: absolute;top: 50%;left: 50%;width: 0;height: 0;}.piano--key {position: absolute;top: 50%;left: 50%;width: 512px;height: 0;-webkit-tran...
HTML+CSS+JavaScript实现-自适应钢琴piano界面效果
m0_61486963的博客
10-08 1179
🦖我是Sam9029，一个前端已经晚上11点半了，此刻本人依旧无法入睡，与其躺平在床，不如举头望明月，啊，搞错了不如下床思故乡，啊，不不，不如下床燥起来，所以此刻为了入眠，本人想要听一听钢琴曲所以既然如此，不如写一个出来。
HTML5与CSS3学习笔记【第六章 链接】
luminous-烁的博客
07-07 270
链接是万维网的命脉。没有它们，每个页面都只能独立存在，同其他所有页面完全地分开。链接有两个主要的部分：目标和标签。使用目标（destination）可以指定访问者点击链接时会发生什么。可以创建链接进入另一个页面，在页面内跳转，显示图像，下载文件，呼叫电话，等等。不过，最常见的是连接到其他网页的链接，其次是连接到其他网页特定位置（称为锚，anchor）的链接。...
HTML5与CSS3【第十七章 视频、音频及其他多媒体(三)】
luminous-烁的博客
07-25 691
为了获得所有兼容 HTML5 的浏览器的支持，至少需要为音频提供两种格式。实现这一目标的方法同 video 元素也是一样的，即使用source元素。备用方法跟audio元素也一样。你可能猜到了，浏览器会忽略它不支持的音频格式，而显示它支持的音频格式。不支持 audio 元素的浏览器显示备用内容。...
virtual-piano
03-19
总的来说，"virtual-piano"项目结合了CSS和JavaScript的技术，创造了一个富有创意且互动性强的在线钢琴应用。用户不仅可以在此练习钢琴技巧，还可以享受自定义和创作的乐趣。这个项目对于学习网页开发、音乐技术和...
CSS3钢琴键上球体跳动动画特效.rar
10-01
【CSS3钢琴键上球体跳动动画特效】是一个基于CSS3技术和jQuery库实现的网页交互特效。这个特效展示了一组在钢琴键上的小球体，随着音乐节奏或用户交互，这些球体会产生动态的跳动效果，为网页增添生动有趣的视觉体验...
HTML5与CSS3学习笔记【第十七章 视频、音频及其他多媒体(二)】
luminous-烁的博客
07-24 217
如果认为用户观看视频的可能性较低（如该视频并不是页面的主要内容），那么 可以告诉浏览器不要预先加载该视频。这样能节省带宽，尤其对于移动设备用户来说好处多多。对于设置了 preload="none" 的视频，在初始化视频之前，浏览器显示视频的方式并不一样。...
1111111111111111111111
08-13
1111111111111111
javascript笔试题参考整理(答案)(可编辑修改word版).docx
08-13
javascript笔试题参考整理(答案)(可编辑修改word版)
财务收支表-公式计算查询.xlsx
08-13
工资表，财务报表，对账表，付款申请，财务报告，费用支出表，财务收支 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
集团信息化顶层规划 .pptx
最新发布
08-13
集团信息化顶层规划 .pptx
stp 焊接机械_包括零件图_机械3D图可修改打包下载.rar
08-13
stp 焊接机械_包括零件图_机械3D图可修改打包下载.rar
CSS3未来网页设计指南
"The Book of CSS3" 本书《The Book of CSS3》是Peter Gasston所著的一本关于CSS3的指南，旨在帮助开发者了解CSS3的最新技术和应用。下面是本书的一些重要知识点： 一、 CSS3简介 CSS3是层叠样式表语言的最新版本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值