CSS3でスピードメーター

tsmallfield

2011-03-17 23:40:55

License: GPLv3 License

Fork: 1

Fav: 6

View: 1485

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 0 lines
HTML 59 lines
CSS 349 lines

Webkit Only, as always :)

マウスの横方向の移動速度を表示。
（値はかなり怪しいですが、加速度0の場合は近い。。。はず）

こっちで値検証中↓
http://jsdo.it/tsmallfield/debug_css3_speed_meter

CSS3でスピードメーター

<div id="meter">
  <div id="measures">
    <p><p><p><p><p>
    <p><p><p><p><p>
    
    <p><p><p><p><p>
    <p><p><p><p><p>
    
    <p><p><p><p><p>
  </div>
  <h1>HORIZONTAL MOUSE VELOCITY</h1>
  <h2>px / sec</h2>
</div>

<div class="c  c0"><div class="c  c1"><div class="c  c2"><div class="c  c3"><div class="c  c4"><div class="c  c5"><div class="c  c6"><div class="c  c7"><div class="c  c8"><div class="c  c9">
<div class="c c10"><div class="c c11"><div class="c c12"><div class="c c13"><div class="c c14"><div class="c c15"><div class="c c16"><div class="c c17"><div class="c c18"><div class="c c19">
<div class="c c20"><div class="c c21"><div class="c c22"><div class="c c23"><div class="c c24"><div class="c c25"><div class="c c26"><div class="c c27"><div class="c c28"><div class="c c29">

</div></div>

</div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div>

</div></div>

</div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div>

</div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div>

CSS3でスピードメーター

/**
 *  @fileoverview  CSS3 SpeedMeter
 *  @author        Tohl SMALLFIELD
 */
html,body,div,p{
  margin: 0; padding: 0;
}
body{
  overflow: hidden;
  background-color: #000;
  font-family: myriad, helvetica, verdana, sans-serif;
}

/*------------------------------------------------
  #meter
------------------------------------------------*/
div#meter{
  position: absolute;
  top: 32px; left: 32px;
  width: 401px; height: 401px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#555), color-stop(.1, #333), color-stop(.7, #000), to(#000));
  background-image: -moz-linear-gradient(top, #555, #333, #000, #000);
  -webkit-border-radius: 999px;
  -moz-border-radius:    999px;
  border-radius:         999px;
  overflow: hidden;
  counter-reset: speed -390;
}
div#meter:before{
  position: absolute;
  top: 5px; left: 5px;
  display: block;
  content: "";
  width: 391px; height: 391px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#004), color-stop(.7, #000), to(#000));
  background-image: -moz-linear-gradient(top, #004, #000, #000);
  -webkit-border-radius: 999px;
  -moz-border-radius:    999px;
  border-radius:         999px;
}
div#meter:after{
  position: absolute;
  display: block;
  content: "";
  top: 181px; left: 181px;
  width: 40px; height: 40px;
  background-color: #000;
  -webkit-border-radius: 999px;
  -moz-border-radius:    999px;
  border-radius:         999px;
}

/*----- 数字＆目盛 -----*/
#measures{
  position: absolute;
  top: 0; left: 6px; right: 0; bottom: 0;
  -webkit-transform: rotate(-30deg);
  -moz-transform:    rotate(-30deg);
  transform:         rotate(-30deg);
}
p{
  position: absolute;
  top: 199px;
  width: 389px; height: 2px;
  counter-increment: speed 30;
}
p:nth-of-type(1) { -webkit-transform: rotate(  0deg); -moz-transform: rotate(  0deg); }
p:nth-of-type(2) { -webkit-transform: rotate( 10deg); -moz-transform: rotate( 10deg); }
p:nth-of-type(3) { -webkit-transform: rotate( 20deg); -moz-transform: rotate( 20deg); }
p:nth-of-type(4) { -webkit-transform: rotate( 30deg); -moz-transform: rotate( 30deg); }
p:nth-of-type(5) { -webkit-transform: rotate( 40deg); -moz-transform: rotate( 40deg); }
p:nth-of-type(6) { -webkit-transform: rotate( 50deg); -moz-transform: rotate( 50deg); }
p:nth-of-type(7) { -webkit-transform: rotate( 60deg); -moz-transform: rotate( 60deg); }
p:nth-of-type(8) { -webkit-transform: rotate( 70deg); -moz-transform: rotate( 70deg); }
p:nth-of-type(9) { -webkit-transform: rotate( 80deg); -moz-transform: rotate( 80deg); }
p:nth-of-type(10){ -webkit-transform: rotate( 90deg); -moz-transform: rotate( 90deg); }
p:nth-of-type(11){ -webkit-transform: rotate(100deg); -moz-transform: rotate(100deg); }
p:nth-of-type(12){ -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); }
p:nth-of-type(13){ -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); }
p:nth-of-type(14){ -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); }
p:nth-of-type(15){ -webkit-transform: rotate(140deg); -moz-transform: rotate(140deg); }
p:nth-of-type(16){ -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); }
p:nth-of-type(17){ -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); }
p:nth-of-type(18){ -webkit-transform: rotate(170deg); -moz-transform: rotate(170deg); }
p:nth-of-type(19){ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); }
p:nth-of-type(20){ -webkit-transform: rotate(190deg); -moz-transform: rotate(190deg); }
p:nth-of-type(21){ -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); }
p:nth-of-type(22){ -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); }
p:nth-of-type(23){ -webkit-transform: rotate(220deg); -moz-transform: rotate(220deg); }
p:nth-of-type(24){ -webkit-transform: rotate(230deg); -moz-transform: rotate(230deg); }
p:nth-of-type(25){ -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); }

/*----- 数字 -----*/
p:nth-of-type(2n+1):before{
  position: absolute;
  display: block;
  line-height: 1;
  top: -0.5em; left: 15px;
  width: 3em;
  content: counter(speed);
  color: #ccc;
  font-weight: bold;
  font-size: 110%;
  text-align: center;
  text-shadow: 0 0 1px #ccc;
}
p:nth-of-type( 1):before{ -webkit-transform: rotate(  30deg); -moz-transform: rotate(  30deg); }
p:nth-of-type( 2):before{ -webkit-transform: rotate(  20deg); -moz-transform: rotate(  20deg); }
p:nth-of-type( 3):before{ -webkit-transform: rotate(  10deg); -moz-transform: rotate(  10deg); }
p:nth-of-type( 4):before{ -webkit-transform: rotate(   0deg); -moz-transform: rotate(   0deg); }
p:nth-of-type( 5):before{ -webkit-transform: rotate( -10deg); -moz-transform: rotate( -10deg); }
p:nth-of-type( 6):before{ -webkit-transform: rotate( -20deg); -moz-transform: rotate( -20deg); }
p:nth-of-type( 7):before{ -webkit-transform: rotate( -30deg); -moz-transform: rotate( -30deg); }
p:nth-of-type( 8):before{ -webkit-transform: rotate( -40deg); -moz-transform: rotate( -40deg); }
p:nth-of-type( 9):before{ -webkit-transform: rotate( -50deg); -moz-transform: rotate( -50deg); }
p:nth-of-type(10):before{ -webkit-transform: rotate( -60deg); -moz-transform: rotate( -60deg); }
p:nth-of-type(11):before{ -webkit-transform: rotate( -70deg); -moz-transform: rotate( -70deg); }
p:nth-of-type(12):before{ -webkit-transform: rotate( -80deg); -moz-transform: rotate( -80deg); }
p:nth-of-type(13):before{ -webkit-transform: rotate( -90deg); -moz-transform: rotate( -90deg); }
p:nth-of-type(14):before{ -webkit-transform: rotate(-100deg); -moz-transform: rotate(-100deg); }
p:nth-of-type(15):before{ -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); }
p:nth-of-type(16):before{ -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); }
p:nth-of-type(17):before{ -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); }
p:nth-of-type(18):before{ -webkit-transform: rotate(-140deg); -moz-transform: rotate(-140deg); }
p:nth-of-type(19):before{ -webkit-transform: rotate(-150deg); -moz-transform: rotate(-150deg); }
p:nth-of-type(20):before{ -webkit-transform: rotate(-160deg); -moz-transform: rotate(-160deg); }
p:nth-of-type(21):before{ -webkit-transform: rotate(-170deg); -moz-transform: rotate(-170deg); }
p:nth-of-type(22):before{ -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); }
p:nth-of-type(23):before{ -webkit-transform: rotate(-190deg); -moz-transform: rotate(-190deg); }
p:nth-of-type(24):before{ -webkit-transform: rotate(-200deg); -moz-transform: rotate(-200deg); }
p:nth-of-type(25):before{ -webkit-transform: rotate(-210deg); -moz-transform: rotate(-210deg); }

/*----- 目盛 -----*/
p:after,
p:nth-of-type(2n):after{
  position: absolute;
  display: block;
  content: "";
  background-color: #669;
  -webkit-box-shadow: 0 0 1px #669;
  -moz-box-shadow:    0 0 1px #669;
  -box-shadow:        0 0 1px #669;
}
p:after{
  width: 10px; height: 3px;
}
p:nth-of-type(2n):after{
  width: 6px; height: 1px;
}

/*-----  -----*/
h1,h2{
  position: relative;
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: #669;
}
h1{ margin-top: 130px; font-size:  65%; }
h2{ margin-top:   5px; font-size: 100%; }
/*------------------------------------------------
  #sensor
------------------------------------------------*/
.c{
  position: absolute;
  top: 0; bottom: 0;
  width: 15px;/* WIDTH[px] */
  height: 100%;
}
.c0  .c{ margin-left:  15px; }
.c30 .c{ margin-left: -15px; }
/*------------------------------------------------
  #needle
------------------------------------------------*/
#needle,
#needle:before{
  background-color: #f00;
}
#needle{
  position: relative;
  width: 15px; height: 15px;
  -webkit-border-radius: 99px;
  -moz-border-radius:    99px;
  border-radius:         99px;
}
#needle:before{
  display: block;
  position: absolute;
  top: -160px; left: 6px;
  width: 3px; height: 160px;
  margin: 0; padding: 0;
  content: "";
  -webkit-box-shadow: 0 0 3px #f00;
  -moz-box-shadow:    0 0 3px #f00;
  box-shadow:         0 0 3px #f00;
}
#needle:after{
  display: block;
  position: absolute;
  top: 5px; left: 5px;
  width: 5px; height: 5px;
  margin: 0; padding: 0;
  background-color: #000;
  content: "";
  -webkit-border-radius: 99px;
  -moz-border-radius:    99px;
  border-radius:         99px;
}
/*------------------------------------------------
  #motor
------------------------------------------------*/
/*----- 加速度0の場合を考えると目盛 θ[deg] 分は WIDTH[px]/(tの50%)[sec] = 30[px/sec] ???? -----*/
.n{
  width: 15px; height: 15px;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 1s;/* t[sec] */
  -webkit-animation-property: all;
  -webkit-animation-iteration-count: 1;
}
.n0{
  margin-top: 225px; margin-left: 240px;
}
/*
@-webkit-keyframes "left"{
  0% {
    -webkit-transform: rotate(10deg);
  } 49.99% {
    -webkit-transform: rotate(10deg);
  } 50% {
    -webkit-transform: rotate(0deg);
  } 100% {
    -webkit-transform: rotate(0deg);
  }
}
*/
@-webkit-keyframes "left"{
  0% {
    -webkit-transform: rotate(0deg);
  } 50% {
    -webkit-transform: rotate(10deg);/* θ[deg] */
  } 100% {
    -webkit-transform: rotate(0deg);
  }
}
@-webkit-keyframes "right"{
  0% {
    -webkit-transform: rotate(0deg);
  } 50% {
    -webkit-transform: rotate(-10deg);/* θ[deg] */
  } 100% {
    -webkit-transform: rotate(0deg);
  }
}
/*--------------|----- test -----*/
 .c0:hover  .n0, .c0.hover  .n0,
 .c1:hover  .n1, .c1.hover  .n1,
 .c2:hover  .n2, .c2.hover  .n2,
 .c3:hover  .n3, .c3.hover  .n3,
 .c4:hover  .n4, .c4.hover  .n4,
 .c5:hover  .n5, .c5.hover  .n5,
 .c6:hover  .n6, .c6.hover  .n6,
 .c7:hover  .n7, .c7.hover  .n7,
 .c8:hover  .n8, .c8.hover  .n8,
 .c9:hover  .n9, .c9.hover  .n9,
 
.c10:hover .n10, .c10.hover .n10,
.c11:hover .n11, .c11.hover .n11,
.c12:hover .n12, .c12.hover .n12,
.c13:hover .n13, .c13.hover .n13,
.c14:hover .n14, .c14.hover .n14,
.c15:hover .n15, .c15.hover .n15,
.c16:hover .n16, .c16.hover .n16,
.c17:hover .n17, .c17.hover .n17,
.c18:hover .n18, .c18.hover .n18,
.c19:hover .n19, .c19.hover .n19,

.c20:hover .n20, .c20.hover .n20,
.c21:hover .n21, .c21.hover .n21,
.c22:hover .n22, .c22.hover .n22,
.c23:hover .n23, .c23.hover .n23,
.c24:hover .n24, .c24.hover .n24,
.c25:hover .n25, .c25.hover .n25,
.c26:hover .n26, .c26.hover .n26,
.c27:hover .n27, .c27.hover .n27,
.c28:hover .n28, .c28.hover .n28,
.c29:hover .n29, .c29.hover .n29,

.c30:hover .n30, .c30.hover .n30
{
  -webkit-animation-name: left;
}

.c31:hover  .n0,
.c32:hover  .n1,
.c33:hover  .n2,
.c34:hover  .n3
.c35:hover  .n4,
.c36:hover  .n5,
.c37:hover  .n6,
.c38:hover  .n7,
.c39:hover  .n8,
.c40:hover  .n9,

.c41:hover .n10,
.c42:hover .n11,
.c43:hover .n12,
.c44:hover .n13,
.c45:hover .n14,
.c46:hover .n15,
.c47:hover .n16,
.c48:hover .n17,
.c49:hover .n18,
.c50:hover .n19,

.c51:hover .n20,
.c52:hover .n21,
.c53:hover .n22,
.c54:hover .n23,
.c55:hover .n24,
.c56:hover .n25,
.c57:hover .n26,
.c58:hover .n27,
.c59:hover .n28,
.c60:hover .n29,

.c61:hover .n30
{
  -webkit-animation-name: right;
}

/*------------------------------------------------
  for DEBUG
------------------------------------------------*/
#test{
  width: 445px;
  padding: 5px 10px;
  position: absolute;
  background-color: #f00;
  color: #fff;
}
.c.hover{
  background-color: rgba(255, 0, 0, .25);
}
.test .c{
  -webkit-box-shadow: 0 0 1px #09f inset;
  -moz-box-shadow:    0 0 1px #09f inset;
  box-shadow:         0 0 1px #09f inset;
}

Webkit Only, as always :) マウスの横方向の移動速度を表示。（値はかなり怪しいですが、加速度0の場合は近い。。。はず）こっちで値検証中↓ http://jsdo.it/tsmallfield/debug_css3_speed_meter <div id="meter"> <div id="measures"> <p><p><p><p><p> <p><p><p><p><p> <p><p><p><p><p> <p><p><p><p><p> <p><p><p><p><p> </div> <h1>HORIZONTAL MOUSE VELOCITY</h1> <h2>px / sec</h2> </div>   <div class="c c0"><div class="c c1"><div class="c c2"><div class="c c3"><div class="c c4"><div class="c c5"><div class="c c6"><div class="c c7"><div class="c c8"><div class="c c9"> <div class="c c10"><div class="c c11"><div class="c c12"><div class="c c13"><div class="c c14"><div class="c c15"><div class="c c16"><div class="c c17"><div class="c c18"><div class="c c19"> <div class="c c20"><div class="c c21"><div class="c c22"><div class="c c23"><div class="c c24"><div class="c c25"><div class="c c26"><div class="c c27"><div class="c c28"><div class="c c29"> <div class="c c30"><div class="c c31"><div class="c c32"><div class="c c33"><div class="c c34"><div class="c c35"><div class="c c36"><div class="c c37"><div class="c c38"><div class="c c39"> <div class="c c40"><div class="c c41"><div class="c c42"><div class="c c43"><div class="c c44"><div class="c c45"><div class="c c46"><div class="c c47"><div class="c c48"><div class="c c49"> <div class="c c50"><div class="c c51"><div class="c c52"><div class="c c53"><div class="c c54"><div class="c c55"><div class="c c56"><div class="c c57"><div class="c c58"><div class="c c59"> <div class="c c60"><div class="c c61"> <div class="n n0"><div class="n n1"><div class="n n2"><div class="n n3"><div class="n n4"><div class="n n5"><div class="n n6"><div class="n n7"><div class="n n8"><div class="n n9"> <div class="n n10"><div class="n n11"><div class="n n12"><div class="n n13"><div class="n n14"><div class="n n15"><div class="n n16"><div class="n n17"><div class="n n18"><div class="n n19"> <div class="n n20"><div class="n n21"><div class="n n22"><div class="n n23"><div class="n n24"><div class="n n25"><div class="n n26"><div class="n n27"><div class="n n28"><div class="n n29"> <div class="n n30"><div class="n n31"><div class="n n32"><div class="n n33"><div class="n n34"><div class="n n35"><div class="n n36"><div class="n n37"><div class="n n38"><div class="n n39"> <div class="n n40"><div class="n n41"><div class="n n42"><div class="n n43"><div class="n n44"><div class="n n45"><div class="n n46"><div class="n n47"><div class="n n48"><div class="n n49"> <div class="n n50"><div class="n n51"><div class="n n52"><div class="n n53"><div class="n n54"><div class="n n55"><div class="n n56"><div class="n n57"><div class="n n58"><div class="n n59"> <div class="n n60"><div class="n n61"> <div id="needle"></div> </div></div> </div></div></div></div></div></div></div></div></div></div> </div></div></div></div></div></div></div></div></div></div> </div></div></div></div></div></div></div></div></div></div> </div></div></div></div></div></div></div></div></div></div> </div></div></div></div></div></div></div></div></div></div> </div></div></div></div></div></div></div></div></div></div> </div></div> </div></div></div></div></div></div></div></div></div></div> </div></div></div></div></div></div></div></div></div></div> </div></div></div></div></div></div></div></div></div></div> </div></div></div></div></div></div></div></div></div></div> </div></div></div></div></div></div></div></div></div></div> </div></div></div></div></div></div></div></div></div></div> /** * @fileoverview CSS3 SpeedMeter * @author Tohl SMALLFIELD */ html,body,div,p{ margin: 0; padding: 0; } body{ overflow: hidden; background-color: #000; font-family: myriad, helvetica, verdana, sans-serif; } /*------------------------------------------------ #meter ------------------------------------------------*/ div#meter{ position: absolute; top: 32px; left: 32px; width: 401px; height: 401px; background-image: -webkit-gradient(linear, left top, left bottom, from(#555), color-stop(.1, #333), color-stop(.7, #000), to(#000)); background-image: -moz-linear-gradient(top, #555, #333, #000, #000); -webkit-border-radius: 999px; -moz-border-radius: 999px; border-radius: 999px; overflow: hidden; counter-reset: speed -390; } div#meter:before{ position: absolute; top: 5px; left: 5px; display: block; content: ""; width: 391px; height: 391px; background-image: -webkit-gradient(linear, left top, left bottom, from(#004), color-stop(.7, #000), to(#000)); background-image: -moz-linear-gradient(top, #004, #000, #000); -webkit-border-radius: 999px; -moz-border-radius: 999px; border-radius: 999px; } div#meter:after{ position: absolute; display: block; content: ""; top: 181px; left: 181px; width: 40px; height: 40px; background-color: #000; -webkit-border-radius: 999px; -moz-border-radius: 999px; border-radius: 999px; } /*----- 数字＆目盛 -----*/ #measures{ position: absolute; top: 0; left: 6px; right: 0; bottom: 0; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); transform: rotate(-30deg); } p{ position: absolute; top: 199px; width: 389px; height: 2px; counter-increment: speed 30; } p:nth-of-type(1) { -webkit-transform: rotate( 0deg); -moz-transform: rotate( 0deg); } p:nth-of-type(2) { -webkit-transform: rotate( 10deg); -moz-transform: rotate( 10deg); } p:nth-of-type(3) { -webkit-transform: rotate( 20deg); -moz-transform: rotate( 20deg); } p:nth-of-type(4) { -webkit-transform: rotate( 30deg); -moz-transform: rotate( 30deg); } p:nth-of-type(5) { -webkit-transform: rotate( 40deg); -moz-transform: rotate( 40deg); } p:nth-of-type(6) { -webkit-transform: rotate( 50deg); -moz-transform: rotate( 50deg); } p:nth-of-type(7) { -webkit-transform: rotate( 60deg); -moz-transform: rotate( 60deg); } p:nth-of-type(8) { -webkit-transform: rotate( 70deg); -moz-transform: rotate( 70deg); } p:nth-of-type(9) { -webkit-transform: rotate( 80deg); -moz-transform: rotate( 80deg); } p:nth-of-type(10){ -webkit-transform: rotate( 90deg); -moz-transform: rotate( 90deg); } p:nth-of-type(11){ -webkit-transform: rotate(100deg); -moz-transform: rotate(100deg); } p:nth-of-type(12){ -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); } p:nth-of-type(13){ -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); } p:nth-of-type(14){ -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); } p:nth-of-type(15){ -webkit-transform: rotate(140deg); -moz-transform: rotate(140deg); } p:nth-of-type(16){ -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); } p:nth-of-type(17){ -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); } p:nth-of-type(18){ -webkit-transform: rotate(170deg); -moz-transform: rotate(170deg); } p:nth-of-type(19){ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); } p:nth-of-type(20){ -webkit-transform: rotate(190deg); -moz-transform: rotate(190deg); } p:nth-of-type(21){ -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); } p:nth-of-type(22){ -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); } p:nth-of-type(23){ -webkit-transform: rotate(220deg); -moz-transform: rotate(220deg); } p:nth-of-type(24){ -webkit-transform: rotate(230deg); -moz-transform: rotate(230deg); } p:nth-of-type(25){ -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); } /*----- 数字 -----*/ p:nth-of-type(2n+1):before{ position: absolute; display: block; line-height: 1; top: -0.5em; left: 15px; width: 3em; content: counter(speed); color: #ccc; font-weight: bold; font-size: 110%; text-align: center; text-shadow: 0 0 1px #ccc; } p:nth-of-type( 1):before{ -webkit-transform: rotate( 30deg); -moz-transform: rotate( 30deg); } p:nth-of-type( 2):before{ -webkit-transform: rotate( 20deg); -moz-transform: rotate( 20deg); } p:nth-of-type( 3):before{ -webkit-transform: rotate( 10deg); -moz-transform: rotate( 10deg); } p:nth-of-type( 4):before{ -webkit-transform: rotate( 0deg); -moz-transform: rotate( 0deg); } p:nth-of-type( 5):before{ -webkit-transform: rotate( -10deg); -moz-transform: rotate( -10deg); } p:nth-of-type( 6):before{ -webkit-transform: rotate( -20deg); -moz-transform: rotate( -20deg); } p:nth-of-type( 7):before{ -webkit-transform: rotate( -30deg); -moz-transform: rotate( -30deg); } p:nth-of-type( 8):before{ -webkit-transform: rotate( -40deg); -moz-transform: rotate( -40deg); } p:nth-of-type( 9):before{ -webkit-transform: rotate( -50deg); -moz-transform: rotate( -50deg); } p:nth-of-type(10):before{ -webkit-transform: rotate( -60deg); -moz-transform: rotate( -60deg); } p:nth-of-type(11):before{ -webkit-transform: rotate( -70deg); -moz-transform: rotate( -70deg); } p:nth-of-type(12):before{ -webkit-transform: rotate( -80deg); -moz-transform: rotate( -80deg); } p:nth-of-type(13):before{ -webkit-transform: rotate( -90deg); -moz-transform: rotate( -90deg); } p:nth-of-type(14):before{ -webkit-transform: rotate(-100deg); -moz-transform: rotate(-100deg); } p:nth-of-type(15):before{ -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); } p:nth-of-type(16):before{ -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); } p:nth-of-type(17):before{ -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); } p:nth-of-type(18):before{ -webkit-transform: rotate(-140deg); -moz-transform: rotate(-140deg); } p:nth-of-type(19):before{ -webkit-transform: rotate(-150deg); -moz-transform: rotate(-150deg); } p:nth-of-type(20):before{ -webkit-transform: rotate(-160deg); -moz-transform: rotate(-160deg); } p:nth-of-type(21):before{ -webkit-transform: rotate(-170deg); -moz-transform: rotate(-170deg); } p:nth-of-type(22):before{ -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); } p:nth-of-type(23):before{ -webkit-transform: rotate(-190deg); -moz-transform: rotate(-190deg); } p:nth-of-type(24):before{ -webkit-transform: rotate(-200deg); -moz-transform: rotate(-200deg); } p:nth-of-type(25):before{ -webkit-transform: rotate(-210deg); -moz-transform: rotate(-210deg); } /*----- 目盛 -----*/ p:after, p:nth-of-type(2n):after{ position: absolute; display: block; content: ""; background-color: #669; -webkit-box-shadow: 0 0 1px #669; -moz-box-shadow: 0 0 1px #669; -box-shadow: 0 0 1px #669; } p:after{ width: 10px; height: 3px; } p:nth-of-type(2n):after{ width: 6px; height: 1px; } /*----- -----*/ h1,h2{ position: relative; width: 100%; text-align: center; font-weight: bold; color: #669; } h1{ margin-top: 130px; font-size: 65%; } h2{ margin-top: 5px; font-size: 100%; } /*------------------------------------------------ #sensor ------------------------------------------------*/ .c{ position: absolute; top: 0; bottom: 0; width: 15px;/* WIDTH[px] */ height: 100%; } .c0 .c{ margin-left: 15px; } .c30 .c{ margin-left: -15px; } /*------------------------------------------------ #needle ------------------------------------------------*/ #needle, #needle:before{ background-color: #f00; } #needle{ position: relative; width: 15px; height: 15px; -webkit-border-radius: 99px; -moz-border-radius: 99px; border-radius: 99px; } #needle:before{ display: block; position: absolute; top: -160px; left: 6px; width: 3px; height: 160px; margin: 0; padding: 0; content: ""; -webkit-box-shadow: 0 0 3px #f00; -moz-box-shadow: 0 0 3px #f00; box-shadow: 0 0 3px #f00; } #needle:after{ display: block; position: absolute; top: 5px; left: 5px; width: 5px; height: 5px; margin: 0; padding: 0; background-color: #000; content: ""; -webkit-border-radius: 99px; -moz-border-radius: 99px; border-radius: 99px; } /*------------------------------------------------ #motor ------------------------------------------------*/ /*----- 加速度0の場合を考えると目盛 θ[deg] 分は WIDTH[px]/(tの50%)[sec] = 30[px/sec] ???? -----*/ .n{ width: 15px; height: 15px; -webkit-animation-timing-function: linear; -webkit-animation-duration: 1s;/* t[sec] */ -webkit-animation-property: all; -webkit-animation-iteration-count: 1; } .n0{ margin-top: 225px; margin-left: 240px; } /* @-webkit-keyframes "left"{ 0% { -webkit-transform: rotate(10deg); } 49.99% { -webkit-transform: rotate(10deg); } 50% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(0deg); } } */ @-webkit-keyframes "left"{ 0% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(10deg);/* θ[deg] */ } 100% { -webkit-transform: rotate(0deg); } } @-webkit-keyframes "right"{ 0% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(-10deg);/* θ[deg] */ } 100% { -webkit-transform: rotate(0deg); } } /*--------------|----- test -----*/ .c0:hover .n0, .c0.hover .n0, .c1:hover .n1, .c1.hover .n1, .c2:hover .n2, .c2.hover .n2, .c3:hover .n3, .c3.hover .n3, .c4:hover .n4, .c4.hover .n4, .c5:hover .n5, .c5.hover .n5, .c6:hover .n6, .c6.hover .n6, .c7:hover .n7, .c7.hover .n7, .c8:hover .n8, .c8.hover .n8, .c9:hover .n9, .c9.hover .n9, .c10:hover .n10, .c10.hover .n10, .c11:hover .n11, .c11.hover .n11, .c12:hover .n12, .c12.hover .n12, .c13:hover .n13, .c13.hover .n13, .c14:hover .n14, .c14.hover .n14, .c15:hover .n15, .c15.hover .n15, .c16:hover .n16, .c16.hover .n16, .c17:hover .n17, .c17.hover .n17, .c18:hover .n18, .c18.hover .n18, .c19:hover .n19, .c19.hover .n19, .c20:hover .n20, .c20.hover .n20, .c21:hover .n21, .c21.hover .n21, .c22:hover .n22, .c22.hover .n22, .c23:hover .n23, .c23.hover .n23, .c24:hover .n24, .c24.hover .n24, .c25:hover .n25, .c25.hover .n25, .c26:hover .n26, .c26.hover .n26, .c27:hover .n27, .c27.hover .n27, .c28:hover .n28, .c28.hover .n28, .c29:hover .n29, .c29.hover .n29, .c30:hover .n30, .c30.hover .n30 { -webkit-animation-name: left; } .c31:hover .n0, .c32:hover .n1, .c33:hover .n2, .c34:hover .n3 .c35:hover .n4, .c36:hover .n5, .c37:hover .n6, .c38:hover .n7, .c39:hover .n8, .c40:hover .n9, .c41:hover .n10, .c42:hover .n11, .c43:hover .n12, .c44:hover .n13, .c45:hover .n14, .c46:hover .n15, .c47:hover .n16, .c48:hover .n17, .c49:hover .n18, .c50:hover .n19, .c51:hover .n20, .c52:hover .n21, .c53:hover .n22, .c54:hover .n23, .c55:hover .n24, .c56:hover .n25, .c57:hover .n26, .c58:hover .n27, .c59:hover .n28, .c60:hover .n29, .c61:hover .n30 { -webkit-animation-name: right; } /*------------------------------------------------ for DEBUG ------------------------------------------------*/ #test{ width: 445px; padding: 5px 10px; position: absolute; background-color: #f00; color: #fff; } .c.hover{ background-color: rgba(255, 0, 0, .25); } .test .c{ -webkit-box-shadow: 0 0 1px #09f inset; -moz-box-shadow: 0 0 1px #09f inset; box-shadow: 0 0 1px #09f inset; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/j9XB/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/tsmallfield/css3_speed_meter" title="CSS3でスピードメーター">CSS3でスピードメーター - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code