More Related Content More from Fernanda Bernardo (18) Jogos 3.046. #i1 { animation-duration: 6s;
animation-iteration-count: 2;}
#i2 { animation-duration: 5s;
animation-iteration-count: 2;}
#i3 { animation-duration: 7s;
animation-iteration-count: 2;}
#i4 { animation-duration: 12s;
animation-iteration-count: 1;}
#i5 { animation-duration: 10s;
animation-iteration-count: 1;}
48. E se tiver mais inimigos?
#i6, #i7, #i8, #i9, #i10 {
animation-delay: 10s;
background-color: red;
}
59. .oops {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
z-index: 10;
}
.inimigo:hover ~ .oops {
display: block;
}
60. .oops {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
z-index: 10;
}
.inimigo:hover ~ .oops {
display: block;
}
.oops:hover {
display: block;
}
61. vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
62. vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
68. .coin {
width: 20px;
height: 20px;
background-color: yellow;
border-radius: 50%;
position: absolute;
left: 9%;
-webkit-appearance: none;
animation-name: moving;
animation-duration: 6s;
}
.coin:checked {
visibility: hidden;
}
70. <main class=“game”>
<div class="inimigo" id="i1"></div>
<div class="inimigo" id="i2"></div>
<div class="inimigo" id="i3"></div>
<input class="coin" type="checkbox" id=“c1">
</input>
<div class="inimigo" id="i4"></div>
<input class=“coin" type="checkbox" id=“c2">
</input>
<div class="inimigo" id="i5"></div>
</main>
79. vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
80. vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
83. .venceu {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: green;
top: 0;
left: 0;
}
#c1:checked ~ #c2:checked
~ .venceu {
display: block;
}
89. vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
tabindex
90. vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
tabindex
93. <main class=“game”>
<input type="checkbox" id="pause-button"></input>
<label for="pause-button"></label>
[...]
</main>
#pause-button + label {
background-image: url('images/pause.png');
}
#pause-button:checked + label {
background-image: url('images/play.png');
}
94. #pause-button ~ .inimigo,
#pause-button ~ .coin {
animation-play-state: running;
}
<main class=“game”>
<input type="checkbox" id="pause-button"></input>
<label for="pause-button"></label>
[...]
</main>
#pause-button:checked ~ .inimigo,
#pause-button:checked ~ .coin {
animation-play-state: paused;
}
100. <div class="container">
<input id="intro" type="checkbox">
<section class="intro">
<h2>Space Game</h2>
<p>Jogo só com CSS, sem Javascript ;D</p>
<label for=“intro">Play!</label>
</section>
[… .game]
</div>
101. div .container
input #intro
section .intro
h2
p
label for=intro
.intro {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 15;
}
label[for=“intro"] {
padding: 1em;
font-size: 1.2em;
background-color: purple;
border-radius: 5px;
margin: 1em 25%;
display: inline-block;
border: 1px solid purple;
}
#intro:checked ~ .intro {
display: none;
}
107. vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
tabindex