CSS3でスピードメーター tsmallfield Follow 2011-03-17 23:40:55 License: GPLv3 License Fork1 Fav6 View1485 Webkit Only, as always :) マウスの横方向の移動速度を表示。 (値はかなり怪しいですが、加速度0の場合は近い。。。はず) こっちで値検証中↓ http://jsdo.it/tsmallfield/debug_css3_speed_meter 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でスピードメーター <!-- 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> <!-- /meter --> <!-- sensor --> <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> <!-- /sensor --> 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 <!-- 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> <!-- /meter --> <!-- sensor --> <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> <!-- /sensor --> /** * @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; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? Webkit Only, as always :) マウスの横方向の移動速度を表示。 (値はかなり怪しいですが、加速度0の場合は近い。。。はず) こっちで値検証中↓ http://jsdo.it/tsmallfield/debug_css3_speed_meter Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet 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> CSS3 Tweet twitter Tags CSS3 これはきもい Favorite by xor yupasM gryng02 tenkao sonji07: CSS3 kyo_ago: これはきもい Forked sort new page view favorite forked forked from: CSS3でスピードメーター yoshida.syun.. 00 131views 2/59/349 CSS3