Skip to content
Snippets Groups Projects
Commit 40d5b600 authored by Amel Abdic's avatar Amel Abdic :8ball:
Browse files

CSS Animationen für die Chips und CSS design weiter verbessert

parent aafe3b23
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
app.js
+ 1
− 0
View file @ 40d5b600
......@@ -197,3 +197,4 @@ function simulateClick(divElement) {
}
index.html
+ 2
− 2
View file @ 40d5b600
......@@ -8,11 +8,11 @@
<script type="module" src="app.js" charset="utf-8" defer></script>
</head>
<body>
<div id="main-menu">
<!--<div id="main-menu">
<h1>Connect Four</h1>
<button id="start-game">Spiel starten</button>
<button id="settings">Einstellungen</button>
</div>
</div>-->
<h1>Der derzeitige Spieler ist: Spieler <span id="current-player">1</span></h1>
<h3 id="result"></h3>
<img id ="img" alt="4 Gewinnt" src="four.jpg" width="500" height="600"> <div class="grid">
......
style.css
+ 32
− 9
View file @ 40d5b600
.grid {
border: 1px solid;
border: 5px solid;
height: 480px;
width: 560px;
display: flex;
flex-wrap: wrap;
background-color: blue;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 1);
}
.grid div {
height: 80px;
width: 80px;
height: 70px;
width: 70px;
margin: 5px;
background-color: white;
border-radius: 50%;
transition: background-color 0.3s ease;
transform: translateY(0);
}
.player-one {
background-color: red;
border-radius: 40px;
background-color: red !important;
border-radius: 35px;
}
.player-two {
background-color: yellow;
border-radius: 40px;
background-color: yellow !important;
border-radius: 35px;
}
#img{
position: absolute;
......@@ -33,8 +39,6 @@
img {
pointer-events: none;
/* doing this makes sure .elementFromPoint
do not acquires the image cursor object */
position: absolute;
}
* {
......@@ -66,6 +70,25 @@ button:hover {
background-color: #0056b3;
}
.grid div:nth-last-child(-n+7) {
visibility: hidden;
}
.player-one, .player-two {
animation: dropChip 0.5s ease-in-out forwards;
}
@keyframes dropChip {
0% {
transform: translateY(-500px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment