使用Redux.js实现的计数器应用

Redux Counter App 可用于比赛电子记分牌

CSS3, JavaScript

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1769
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.foo {
    text-shadow: 0.66913px 0.74314px 0 #16a085, 1.33826px 1.48629px 0 #16a185, 2.00739px 2.22943px 0 #16a186, 2.67652px 2.97258px 0 #16a186, 3.34565px 3.71572px 0 #16a186, 4.01478px 4.45887px 0 #16a286, 4.68391px 5.20201px 0 #16a287, 5.35304px 5.94516px 0 #16a287, 6.02218px 6.6883px 0 #16a387, 6.69131px 7.43145px 0 #16a387, 7.36044px 8.17459px 0 #16a388, 8.02957px 8.91774px 0 #16a388, 8.6987px 9.66088px 0 #17a488, 9.36783px 10.40403px 0 #17a488, 10.03696px 11.14717px 0 #17a488, 10.70609px 11.89032px 0 #17a489, 11.37522px 12.63346px 0 #17a589, 12.04435px 13.37661px 0 #17a589, 12.71348px 14.11975px 0 #17a589, 13.38261px 14.8629px 0 #17a68a, 14.05174px 15.60604px 0 #17a68a, 14.72087px 16.34919px 0 #17a68a, 15.39px 17.09233px 0 #17a68a, 16.05913px 17.83548px 0 #17a78b, 16.72827px 18.57862px 0 #17a78b, 17.3974px 19.32177px 0 #17a78b, 18.06653px 20.06491px 0 #17a88b, 18.73566px 20.80806px 0 #17a88b, 19.40479px 21.5512px 0 #17a88c, 20.07392px 22.29434px 0 #17a88c, 20.74305px 23.03749px 0 #17a98c, 21.41218px 23.78063px 0 #17a98c, 22.08131px 24.52378px 0 #17a98d, 22.75044px 25.26692px 0 #17aa8d, 23.41957px 26.01007px 0 #17aa8d, 24.0887px 26.75321px 0 #17aa8d, 24.75783px 27.49636px 0 #17aa8e, 25.42696px 28.2395px 0 #18ab8e, 26.09609px 28.98265px 0 #18ab8e, 26.76522px 29.72579px 0 #18ab8e, 27.43435px 30.46894px 0 #18ab8e, 28.10349px 31.21208px 0 #18ac8f, 28.77262px 31.95523px 0 #18ac8f, 29.44175px 32.69837px 0 #18ac8f, 30.11088px 33.44152px 0 #18ad8f, 30.78001px 34.18466px 0 #18ad90, 31.44914px 34.92781px 0 #18ad90, 32.11827px 35.67095px 0 #18ad90, 32.7874px 36.4141px 0 #18ae90, 33.45653px 37.15724px 0 #18ae91, 34.12566px 37.90039px 0 #18ae91, 34.79479px 38.64353px 0 #18af91, 35.46392px 39.38668px 0 #18af91, 36.13305px 40.12982px 0 #18af91, 36.80218px 40.87297px 0 #18af92, 37.47131px 41.61611px 0 #18b092, 38.14044px 42.35926px 0 #18b092, 38.80958px 43.1024px 0 #18b092, 39.47871px 43.84554px 0 #18b193, 40.14784px 44.58869px 0 #18b193, 40.81697px 45.33183px 0 #18b193, 41.4861px 46.07498px 0 #18b193, 42.15523px 46.81812px 0 #19b293, 42.82436px 47.56127px 0 #19b294, 43.49349px 48.30441px 0 #19b294, 44.16262px 49.04756px 0 #19b294, 44.83175px 49.7907px 0 #19b394, 45.50088px 50.53385px 0 #19b395, 46.17001px 51.27699px 0 #19b395, 46.83914px 52.02014px 0 #19b495, 47.50827px 52.76328px 0 #19b495, 48.1774px 53.50643px 0 #19b496, 48.84653px 54.24957px 0 #19b496, 49.51566px 54.99272px 0 #19b596, 50.1848px 55.73586px 0 #19b596, 50.85393px 56.47901px 0 #19b596, 51.52306px 57.22215px 0 #19b697, 52.19219px 57.9653px 0 #19b697, 52.86132px 58.70844px 0 #19b697, 53.53045px 59.45159px 0 #19b697, 54.19958px 60.19473px 0 #19b798, 54.86871px 60.93788px 0 #19b798, 55.53784px 61.68102px 0 #19b798, 56.20697px 62.42417px 0 #19b898, 56.8761px 63.16731px 0 #19b899, 57.54523px 63.91045px 0 #19b899, 58.21436px 64.6536px 0 #19b899, 58.88349px 65.39674px 0 #1ab999, 59.55262px 66.13989px 0 #1ab999, 60.22175px 66.88303px 0 #1ab99a, 60.89089px 67.62618px 0 #1ab99a, 61.56002px 68.36932px 0 #1aba9a, 62.22915px 69.11247px 0 #1aba9a, 62.89828px 69.85561px 0 #1aba9b, 63.56741px 70.59876px 0 #1abb9b, 64.23654px 71.3419px 0 #1abb9b, 64.90567px 72.08505px 0 #1abb9b, 65.5748px 72.82819px 0 #1abb9c, 66.24393px 73.57134px 0 #1abc9c, 66.91306px 74.31448px 0 #1abc9c;
}
.bar {
    box-shadow: -0.15em 0em 0 #2b80b7, -0.3em 0em 0 #2d80b6, -0.45em 0em 0 #2f80b4, -0.6em 0em 0 #3180b3, -0.75em 0em 0 #3280b1, -0.9em 0em 0 #3480b0, -1.05em 0em 0 #3680ae, -1.2em 0em 0 #3880ad, -1.35em 0em 0 #3a80ab, -1.5em 0em 0 #3c80aa, -1.65em 0em 0 #3e80a8, -1.8em 0em 0 #4080a7, -1.95em 0em 0 #4280a5, -2.1em 0em 0 #4380a4, -2.25em 0em 0 #4580a2, -2.4em 0em 0 #4780a1, -2.55em 0em 0 #49809f, -2.7em 0em 0 #4b809e, -2.85em 0em 0 #4d809c, -3em 0em 0 #4f809b, -3.15em 0em 0 #518099, -3.3em 0em 0 #538098, -3.45em 0em 0 #548096, -3.6em 0em 0 #568095, -3.75em 0em 0 #588093, -3.9em 0em 0 #5a7f92, -4.05em 0em 0 #5c7f90, -4.2em 0em 0 #5e7f8f, -4.35em 0em 0 #607f8d, -4.5em 0em 0 #627f8c, -4.65em 0em 0 #647f8a, -4.8em 0em 0 #657f89, -4.95em 0em 0 #677f87, -5.1em 0em 0 #697f86, -5.25em 0em 0 #6b7f84, -5.4em 0em 0 #6d7f83, -5.55em 0em 0 #6f7f81, -5.7em 0em 0 #717f80, -5.85em 0em 0 #737f7e, -6em 0em 0 #757f7d, -6.15em 0em 0 #767f7b, -6.3em 0em 0 #787f7a, -6.45em 0em 0 #7a7f78, -6.6em 0em 0 #7c7f77, -6.75em 0em 0 #7e7f75, -6.9em 0em 0 #807f74, -7.05em 0em 0 #827f72, -7.2em 0em 0 #847f71, -7.35em 0em 0 #867f6f, -7.5em 0em 0 #887f6e, -7.65em 0em 0 #897f6c, -7.8em 0em 0 #8b7f6a, -7.95em 0em 0 #8d7f69, -8.1em 0em 0 #8f7f67, -8.25em 0em 0 #917f66, -8.4em 0em 0 #937f64, -8.55em 0em 0 #957f63, -8.7em 0em 0 #977f61, -8.85em 0em 0 #997f60, -9em 0em 0 #9a7f5e, -9.15em 0em 0 #9c7f5d, -9.3em 0em 0 #9e7f5b, -9.45em 0em 0 #a07f5a, -9.6em 0em 0 #a27f58, -9.75em 0em 0 #a47f57, -9.9em 0em 0 #a67f55, -10.05em 0em 0 #a87f54, -10.2em 0em 0 #aa7f52, -10.35em 0em 0 #ab7f51, -10.5em 0em 0 #ad7f4f, -10.65em 0em 0 #af7f4e, -10.8em 0em 0 #b17f4c, -10.95em 0em 0 #b37f4b, -11.1em 0em 0 #b57f49, -11.25em 0em 0 #b77f48, -11.4em 0em 0 #b97e46, -11.55em 0em 0 #bb7e45, -11.7em 0em 0 #bc7e43, -11.85em 0em 0 #be7e42, -12em 0em 0 #c07e40, -12.15em 0em 0 #c27e3f, -12.3em 0em 0 #c47e3d, -12.45em 0em 0 #c67e3c, -12.6em 0em 0 #c87e3a, -12.75em 0em 0 #ca7e39, -12.9em 0em 0 #cc7e37, -13.05em 0em 0 #cd7e36, -13.2em 0em 0 #cf7e34, -13.35em 0em 0 #d17e33, -13.5em 0em 0 #d37e31, -13.65em 0em 0 #d57e30, -13.8em 0em 0 #d77e2e, -13.95em 0em 0 #d97e2d, -14.1em 0em 0 #db7e2b, -14.25em 0em 0 #dd7e2a, -14.4em 0em 0 #de7e28, -14.55em 0em 0 #e07e27, -14.7em 0em 0 #e27e25, -14.85em 0em 0 #e47e24, -15em 0em 0 #e67e22;
}
.baz {
    box-shadow: -9.82982px -6.88292px 0 rgba(142, 68, 173, 0.9), -19.65965px -13.76583px 0 rgba(142, 68, 173, 0.8), -29.48947px -20.64875px 0 rgba(142, 68, 173, 0.7), -39.3193px -27.53167px 0 rgba(142, 68, 173, 0.6), -49.14912px -34.41459px 0 rgba(142, 68, 173, 0.5), -58.97895px -41.2975px 0 rgba(142, 68, 173, 0.4), -68.80877px -48.18042px 0 rgba(142, 68, 173, 0.3), -78.6386px -55.06334px 0 rgba(142, 68, 173, 0.2), -88.46842px -61.94626px 0 rgba(142, 68, 173, 0.1), -98.29825px -68.82917px 0 rgba(142, 68, 173, 0);
}
.foo {
    font-family: 'Raleway', sans-serif;
    color: white;
    line-height: 100vh;
    font-size: 10em;
    margin: auto;
    text-align: center;
}
.bar,
.baz {
    height: 10em;
    margin: auto;
}
.bar {
    width: 10em;
    border-radius: 50%;
    background: #3498db;
}
.baz {
    width: 20em;
    background: #f39c12;
    border-radius: .25em;
}
section {
    height: 100vh;
    background: #1abc9c;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
section + section {
    background: #e67e22;
}
section + section + section {
    background: #9b59b6;
}
body {
    height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: Roboto Slab;
    background: -webkit-linear-gradient(240deg, #24c7f9, #07b0e3);
    background: linear-gradient(-150deg, #24c7f9, #07b0e3);
}
h1 {
    padding: 0;
    margin: 0;
    font-size: 180px;
    line-height: 1;
}
.wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 200%;
    border-radius: 3px;
    background: #fefefe;
    width: 300px;
    height: 300px;
    text-align: center;
    box-shadow: 1.06066px 1.06066px 0 rgba(6, 157, 203, 0.496), 2.12132px 2.12132px 0 rgba(6, 157, 203, 0.492), 3.18198px 3.18198px 0 rgba(6, 157, 204, 0.488), 4.24264px 4.24264px 0 rgba(6, 158, 204, 0.484), 5.3033px 5.3033px 0 rgba(6, 158, 204, 0.48), 6.36396px 6.36396px 0 rgba(6, 158, 204, 0.476), 7.42462px 7.42462px 0 rgba(6, 158, 204, 0.472), 8.48528px 8.48528px 0 rgba(6, 158, 205, 0.468), 9.54594px 9.54594px 0 rgba(6, 158, 205, 0.464), 10.6066px 10.6066px 0 rgba(6, 159, 205, 0.46), 11.66726px 11.66726px 0 rgba(6, 159, 205, 0.456), 12.72792px 12.72792px 0 rgba(6, 159, 205, 0.452), 13.78858px 13.78858px 0 rgba(6, 159, 206, 0.448), 14.84924px 14.84924px 0 rgba(6, 159, 206, 0.444), 15.9099px 15.9099px 0 rgba(6, 160, 206, 0.44), 16.97056px 16.97056px 0 rgba(6, 160, 206, 0.436), 18.03122px 18.03122px 0 rgba(6, 160, 207, 0.432), 19.09188px 19.09188px 0 rgba(7, 160, 207, 0.428), 20.15254px 20.15254px 0 rgba(7, 160, 207, 0.424), 21.2132px 21.2132px 0 rgba(7, 160, 207, 0.42), 22.27386px 22.27386px 0 rgba(7, 161, 208, 0.416), 23.33452px 23.33452px 0 rgba(7, 161, 208, 0.412), 24.39518px 24.39518px 0 rgba(7, 161, 208, 0.408), 25.45584px 25.45584px 0 rgba(7, 161, 208, 0.404), 26.5165px 26.5165px 0 rgba(7, 162, 209, 0.4), 27.57716px 27.57716px 0 rgba(7, 162, 209, 0.396), 28.63782px 28.63782px 0 rgba(7, 162, 209, 0.392), 29.69848px 29.69848px 0 rgba(7, 162, 209, 0.388), 30.75914px 30.75914px 0 rgba(7, 162, 210, 0.384), 31.81981px 31.81981px 0 rgba(7, 163, 210, 0.38), 32.88047px 32.88047px 0 rgba(7, 163, 210, 0.376), 33.94113px 33.94113px 0 rgba(7, 163, 211, 0.372), 35.00179px 35.00179px 0 rgba(7, 163, 211, 0.368), 36.06245px 36.06245px 0 rgba(7, 164, 211, 0.364), 37.12311px 37.12311px 0 rgba(7, 164, 211, 0.36), 38.18377px 38.18377px 0 rgba(7, 164, 212, 0.356), 39.24443px 39.24443px 0 rgba(7, 164, 212, 0.352), 40.30509px 40.30509px 0 rgba(7, 164, 212, 0.348), 41.36575px 41.36575px 0 rgba(7, 165, 213, 0.344), 42.42641px 42.42641px 0 rgba(7, 165, 213, 0.34), 43.48707px 43.48707px 0 rgba(7, 165, 213, 0.336), 44.54773px 44.54773px 0 rgba(7, 166, 214, 0.332), 45.60839px 45.60839px 0 rgba(7, 166, 214, 0.328), 46.66905px 46.66905px 0 rgba(8, 166, 214, 0.324), 47.72971px 47.72971px 0 rgba(8, 166, 215, 0.32), 48.79037px 48.79037px 0 rgba(8, 167, 215, 0.316), 49.85103px 49.85103px 0 rgba(8, 167, 215, 0.312), 50.91169px 50.91169px 0 rgba(8, 167, 216, 0.308), 51.97235px 51.97235px 0 rgba(8, 168, 216, 0.304), 53.03301px 53.03301px 0 rgba(8, 168, 217, 0.3), 54.09367px 54.09367px 0 rgba(8, 168, 217, 0.296), 55.15433px 55.15433px 0 rgba(8, 168, 217, 0.292), 56.21499px 56.21499px 0 rgba(8, 169, 218, 0.288), 57.27565px 57.27565px 0 rgba(8, 169, 218, 0.284), 58.33631px 58.33631px 0 rgba(8, 169, 218, 0.28), 59.39697px 59.39697px 0 rgba(8, 170, 219, 0.276), 60.45763px 60.45763px 0 rgba(8, 170, 219, 0.272), 61.51829px 61.51829px 0 rgba(8, 170, 220, 0.268), 62.57895px 62.57895px 0 rgba(8, 171, 220, 0.264), 63.63961px 63.63961px 0 rgba(8, 171, 221, 0.26), 64.70027px 64.70027px 0 rgba(8, 171, 221, 0.256), 65.76093px 65.76093px 0 rgba(8, 172, 222, 0.252), 66.82159px 66.82159px 0 rgba(9, 172, 222, 0.248), 67.88225px 67.88225px 0 rgba(9, 173, 222, 0.244), 68.94291px 68.94291px 0 rgba(9, 173, 223, 0.24), 70.00357px 70.00357px 0 rgba(9, 173, 223, 0.236), 71.06423px 71.06423px 0 rgba(9, 174, 224, 0.232), 72.12489px 72.12489px 0 rgba(9, 174, 224, 0.228), 73.18555px 73.18555px 0 rgba(9, 175, 225, 0.224), 74.24621px 74.24621px 0 rgba(9, 175, 226, 0.22), 75.30687px 75.30687px 0 rgba(9, 175, 226, 0.216), 76.36753px 76.36753px 0 rgba(9, 176, 227, 0.212), 77.42819px 77.42819px 0 rgba(9, 176, 227, 0.208), 78.48885px 78.48885px 0 rgba(9, 177, 228, 0.204), 79.54951px 79.54951px 0 rgba(9, 177, 228, 0.2), 80.61017px 80.61017px 0 rgba(9, 178, 229, 0.196), 81.67083px 81.67083px 0 rgba(10, 178, 230, 0.192), 82.73149px 82.73149px 0 rgba(10, 179, 230, 0.188), 83.79215px 83.79215px 0 rgba(10, 179, 231, 0.184), 84.85281px 84.85281px 0 rgba(10, 180, 231, 0.18), 85.91347px 85.91347px 0 rgba(10, 180, 232, 0.176), 86.97413px 86.97413px 0 rgba(10, 181, 233, 0.172), 88.03479px 88.03479px 0 rgba(10, 181, 233, 0.168), 89.09545px 89.09545px 0 rgba(10, 182, 234, 0.164), 90.15611px 90.15611px 0 rgba(10, 183, 235, 0.16), 91.21677px 91.21677px 0 rgba(10, 183, 236, 0.156), 92.27743px 92.27743px 0 rgba(10, 184, 236, 0.152), 93.3381px 93.3381px 0 rgba(11, 184, 237, 0.148), 94.39876px 94.39876px 0 rgba(11, 185, 238, 0.144), 95.45942px 95.45942px 0 rgba(11, 186, 239, 0.14), 96.52008px 96.52008px 0 rgba(11, 186, 240, 0.136), 97.58074px 97.58074px 0 rgba(11, 187, 240, 0.132), 98.6414px 98.6414px 0 rgba(11, 188, 241, 0.128), 99.70206px 99.70206px 0 rgba(11, 188, 242, 0.124), 100.76272px 100.76272px 0 rgba(11, 189, 243, 0.12), 101.82338px 101.82338px 0 rgba(11, 190, 244, 0.116), 102.88404px 102.88404px 0 rgba(12, 191, 245, 0.112), 103.9447px 103.9447px 0 rgba(12, 191, 246, 0.108), 105.00536px 105.00536px 0 rgba(12, 192, 247, 0.104), 106.06602px 106.06602px 0 rgba(12, 193, 248, 0.1);
}
button {
    padding: 0.20em 0.4em;
    line-height: 1;
    vertical-align: middle;
    border-radius: 3px;
    color: #fefefe;
    border: 3px solid;
    background: #fefefe;
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-transition: -webkit-transform 60ms ease-out;
    transition: -webkit-transform 60ms ease-out;
    transition: transform 60ms ease-out;
    transition: transform 60ms ease-out, -webkit-transform 60ms ease-out;
}
button:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    -webkit-transition: -webkit-transform 100ms ease-out;
    transition: -webkit-transform 100ms ease-out;
    transition: transform 100ms ease-out;
    transition: transform 100ms ease-out, -webkit-transform 100ms ease-out;
}
button:hover,
button:focus {
    outline: none;
}
#increment,
#decrement {
    width: 50px;
}
#increment {
    color: #5cb85c;
    border-color: #75c375;
}
#decrement {
    color: #E67373;
    border-color: #eb9191;
}
#reset {
    color: #ff9d5d;
    border-color: #ffb381;
}

HTML

Redux Counter App 可用于比赛电子记分牌

CSS3, JavaScript

编辑器支持Emmet

快捷键

Redux Counter App 可用于比赛电子记分牌

CSS3, JavaScript

使用CSS-Doodle.js实现的时光隧道动画

使用css-doodle.js实现的12个渐变（linear-gradient）图案背景

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：