jogo de cara ou coroa

Abrir no Editor Video Publique Seu Código

Recomendado

23 October 2024

Tipo de letra animada VFS Digital Design

18 September 2024

</body>

CSS

body {
 margin: 0;
 padding: 0;
 height: 100vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 background: linear-gradient(135deg, #000000 0%, #1a1a2e 50%, #16213e 100%);
 font-family: Arial, sans-serif;
}
/*container do jogo*/
.game-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content:center;
 gap: 50px;
}
/*container do cilindro com scaleY para ajustar a altura sem deformar */
.cylinder-container {
 transform-style: preserve-3d;
 transform:rotateX(0) scaleY(0.35);
}
/*animacao para o cilindro agrupado */
.cylinder-container.flipping {
 animation: flipflip 2s linear forwards;
}

@keyframes flipflip{
 0%{
  transform: translateY(0) rotateX(0) scaleY(0.35);
 }
 50%{
  transform: translateY(-300px) rotateX(1080deg) scaleY(0.35);
 }
 100%{
  transform: translateY(0) rotateX(0) scaleY(0.35);
 }
}
/*segmentos formando 360deg para fazer um cilindro com altura reduzida (moeda)*/
.cylinder-nano-segment{
 position: absolute;
 width: 2.5px;
 height: 30px;
 left: 55.5px;
 top: 0;
 transform-origin: 6px 150px;
 background: gold;
 border: 2px solid goldenrod;
}
/*tudo */  
.cylinder-nano-segment:nth-child(1) {
 transform: rotateY(0deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(2) {
 transform: rotateY(6deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(3) {
 transform: rotateY(12deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(4) {
 transform: rotateY(18deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(5) {
 transform: rotateY(24deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(6) {
 transform: rotateY(30deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(7) {
 transform: rotateY(36deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(8) {
 transform: rotateY(42deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(9) {
 transform: rotateY(48deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(10) {
 transform: rotateY(54deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(11) {
 transform: rotateY(60deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(12) {
 transform: rotateY(66deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(13) {
 transform: rotateY(72deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(14) {
 transform: rotateY(78deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(15) {
 transform: rotateY(84deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(16) {
 transform: rotateY(90deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(17) {
 transform: rotateY(96deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(18) {
 transform: rotateY(102deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(19) {
 transform: rotateY(108deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(20) {
 transform: rotateY(114deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(21) {
 transform: rotateY(120deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(22) {
 transform: rotateY(126deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(23) {
 transform: rotateY(132deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(24) {
 transform: rotateY(138deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(25) {
 transform: rotateY(144deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(26) {
 transform: rotateY(150deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(27) {
 transform: rotateY(156deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(28) {
 transform: rotateY(162deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(29) {
 transform: rotateY(168deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(30) {
 transform: rotateY(174deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(31) {
 transform: rotateY(180deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(32) {
 transform: rotateY(186deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(33) {
 transform: rotateY(192deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(34) {
 transform: rotateY(198deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(35) {
 transform: rotateY(204deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(36) {
 transform: rotateY(210deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(37) {
 transform: rotateY(216deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(38) {
 transform: rotateY(222deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(39) {
 transform: rotateY(228deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(40) {
 transform: rotateY(234deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(41) {
 transform: rotateY(240deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(42) {
 transform: rotateY(246deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(43) {
 transform: rotateY(252deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(44) {
 transform: rotateY(258deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(45) {
 transform: rotateY(264deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(46) {
 transform: rotateY(270deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(47) {
 transform: rotateY(276deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(48) {
 transform: rotateY(282deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(49) {
 transform: rotateY(288deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(50) {
 transform: rotateY(294deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(51) {
 transform: rotateY(300deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(52) {
 transform: rotateY(306deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(53) {
 transform: rotateY(312deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(54) {
 transform: rotateY(318deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(55) {
 transform: rotateY(324deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(56) {
 transform: rotateY(330deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(57) {
 transform: rotateY(336deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(58) {
 transform: rotateY(342deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(59) {
 transform: rotateY(348deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(60) {
 transform: rotateY(354deg) translateZ(60px);
}
/*tampas da moeda e emoji de cara e coroa no before delas*/
.cylinder-nano-top{
 border: 1px solid goldenrod;
 background: gold;
 position: absolute;
 width: 120px;
 height: 120px;
 border-radius: 50%;
 top: -60px;
 left: 0;
 transform: rotateX(90deg);
 display: flex;
 flex-direction:column;
 align-items: center;
 justify-content: center;
}

.cylinder-nano-bottom{
 border: 1px solid goldenrod;
 background: gold;
 position: absolute;
 width: 120px;
 height:120px;
 border-radius: 50%;
 top: -30px;
 left: 0;
 transform: rotateX(90deg);
 display: flex;
 flex-direction:column;
 align-items: center;
 justify-content: center;
}

.cylinder-nano-bottom::before {
 content: 'head';
 font-size: 60px;
 opacity: 0.6;
 filter: drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 20px #ffed4e) drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

.cylinder-nano-top::before {
 content: 'tail';
 font-size: 60px;
 opacity: 0.6;
 filter: drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 20px #ffed4e) drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}
/*botao play */
.play-button {
 background: lime;
 border: none;
 color: white;
 padding: 10px 30px;
 left: 62px;
 font-size: 15px;
 font-weight: bold;
 border-radius: 50px;
 cursor: pointer;
 box-shadow: 0 8px 15px rgba(0,0,0,0.2);
 transition: all 0.3s ease;
 text-transform: uppercase;
 letter-spacing: 1px;
 position: relative;
 overflow: hidden;
}

.play-button:active {
 transform: translateY(0);
 box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.play-button.disabled {
 background: darkgreen;
 cursor: not-allowed;
 transform: none;
 box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/*texto aparecendo */
.result {
 position:relative;
 left: 62px;
 top:20px;
 font-size: 20px;
 font-weight: bold;
 color: white;
 opacity: 0;
 animation-fill-mode: forwards;
}

.result.show {
 animation: fadeInResult 0.8s ease-in-out 2.2s forwards;
}
/*animacao texto aparecendo */
@keyframes fadeInResult {
 from {
  opacity: 0;

}
 to {
  opacity: 1;
 }
}

jogo de cara ou coroa

Recomendado

Tipo de letra animada VFS Digital Design

Login de hacker

Um código de Mete

HTML

CSS

JS

Recomendado

Tipo de letra animada VFS Digital Design

Login de hacker

Um código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS