Learning CSS from Copilot and W3Schools

by | Oct 21, 2024 | AI Code, Coding, CSS | 0 comments

Example code module from Copilot using HTML and CSS. The prompt was “Generate CSS and HTML for a rotating wheel with no head tag in the HTML.”

<body>
<div class=”wheel”></div>
</body>
</html>

<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}

.wheel {
width: 300px;
height: 300px;
border: 10px solid #3498db;
border-top: 10px solid #e74c3c;
border-radius: 50%;
animation: spin 3s linear infinite;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

</style>

CSS Display Statement:

Display statements specify how an element is shown on the page. The main options are block (elements starting on their own lines, taking up the whole width) or inline (elements don’t start on new lines automatically and take up as much width as is needed). The code from Copilot originally had a statement originally written as:

display: flex;

and wouldn’t work in WordPress so I just deleted it because it doesn’t need it.

CSS Animation Statements:

This wheel uses the animation statement to achieve this effect, it is written as:

animation: spin 3s linear infinite;

This combines 4 different statements into one using the “animation” property. It could have also been written using four statements like this:

animation-name: spin;
animation-duration: 3s;
animation-timing: linear;
animation-iteration-count: infinite;

animation-name establishes the name of the animation that refer to the animation like classes.
animation-duration sets the length of time that the animation takes to run
animation-timing determines the speed curve of the animation
animation-iteration-count determines how many times it should run 

In addition to the animation statements, it needs key frames to cause the movement between frames. The It is written like this and references the animation name of spin:

@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}

 

Modified Animation:

<body>
<div class=”wheel”></div>
</body>
</html>

<style>
body {
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}

.wheel {
width: 300px;
height: 300px;
border: 10px solid violet;
border-top: 30px dashed purple;
border-radius: 50%;
animation: swing 3s ease infinite;
}

@keyframes swing {
0% {transform: rotate(0deg);}
50%{transform: rotate(180deg);}
100%{transform: rotate(360deg);}

}
}

</style>

Submit a Comment

Your email address will not be published. Required fields are marked *