Animated List using HTML and CSS
lets make a cool animated list using HTML and CSS only, No JS or JQery is needed.
Source Code
1. HTML
<div class="base">
<div class="lists" title="1">
<h3>item one</h3>
</div>
<div class="lists" title="2">
<h3>item two</h3>
</div>
<div class="lists" title="3">
<h3>item three</h3>
</div>
<div class="lists" title="4">
<h3>item four</h3>
</div>
<div class="lists" title="5">
<h3>item five</h3>
</div>
</div>
This code creates a list of 5 items. Each item has a title and a heading. The items are all contained within a div element with the class name base. The div element with the class name lists is used to style the items.
The title attribute of the div element with the class name lists is used to set the title of each item. The h3 element is used to create a heading for each item.
The code above can be used to create a simple list of items on a web page. The div element with the class name base can be styled using CSS to change the appearance of the list.
2. CSS
STEP-1
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
color: white;
}
margin: 0px; sets the margin of all elements to 0 pixels. This means that there will be no space around the edges of any elements.
padding: 0px; sets the padding of all elements to 0 pixels. This means that there will be no space between the content of an element and its border.
box-sizing: border-box; sets the box-sizing property of all elements to border-box. This means that the width and height of an element will include the border.
color: white; sets the color of all elements to white.
This code is often used as a starting point for CSS layouts, as it ensures that all elements have a consistent look and feel. It can also be used to fix problems with layouts that are not rendering as expected.
STEP-2
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
}
The height: 100vh property sets the height of the body element to 100% of the viewport height.
The display: flex property makes the body element a flex container. This means that the children of the body element will be laid out in a flexible way.
The align-items: center property aligns the children of the body element vertically in the center.
The justify-content: center property aligns the children of the body element horizontally in the center.
The background-color: lightblue property sets the background color of the body element to light blue.
In short, this code will make the body element fill the entire viewport, center its children vertically and horizontally, and set its background color to light blue.
STEP-3
.lists{
height: 50px;
width: 250px;
background-color: rgb(255, 166, 0);
margin: 1em;
display: flex;
align-items: center;
box-shadow:
0em 0.4em 0.5em rgba(0, 0, 0, 0.5);
position: relative;
}
The code creates a CSS class called .lists.
The height property sets the height of the element to 50 pixels.
The width property sets the width of the element to 250 pixels.
The background-color property sets the background color of the element to orange.
The margin property sets the margin around the element to 1em.
The display property sets the display style of the element to flex.
The align-items property aligns the items in the flex container to the center.
The box-shadow property adds a shadow to the element.
The position property sets the position of the element to relative.
In short, the code creates a orange rectangle with a shadow that is 50 pixels high and 250 pixels wide. The rectangle is positioned relative to its parent element.
STEP-4
.lists::before{
content: "";
display: block;
height: 50px;
width: 30px;
background-color: brown ;
position: absolute;
}
This code will create a small, brown rectangle that is 50 pixels tall and 30 pixels wide. The rectangle will be positioned absolutely, meaning it will be positioned relative to its parent element. The rectangle will be empty, meaning it will not have any text or other content.
This code could be used to create a small, decorative element before a list of items. For example, you could use it to create a small brown dot before each item in a list.
STEP-5
h3{
width: 100%;
text-align: center;
color: brown;
}
The browser would then style the h3 element according to the CSS selector, so that it would be 100% of the width of its container, the text would be aligned to the center, and the text would be brown.
STEP-6
.lists::after{
content: attr(title);
position: absolute;
font-size: 1.2em;
padding: 0.5em;
font-weight: bold;
}
This code will add a small piece of text after each list item, with the text being the title attribute of the list item. The text will be 1.2em in size, have 0.5em of padding, and be bold.
STEP-7
.lists:nth-child(2n)::before{
right: 0px;
}
.lists:nth-child(2n)::after{
right: 0px;
}
.lists:nth-child(2n+1){
animation: slideright 1s linear;
}
.lists:nth-child(2n){
animation: slideleft 1s linear;
}
This code will apply different CSS animations to the list items in a list. The first two lines of code will add a before and after pseudo-element to all list items. The before pseudo-element will be positioned 0 pixels to the right of the list item, and the after pseudo-element will also be positioned 0 pixels to the right.
The next two lines of code will apply different animations to the list items, depending on whether the list item is an even or odd child. Even list items will be animated to slide to the left, and odd list items will be animated to slide to the right. The animation will take 1 second to complete, and it will use a linear timing function.
STEP-8
@keyframes slideright {
from{
opacity: 1;
transform: translateX(-20px);
}
}
The code you provided is a CSS @keyframes rule. It defines a keyframe animation called "slideright". The animation starts with the element being opaque and translated 20px to the left. The animation then progresses to the element being fully visible and translated to the right.
Here is a breakdown of the code:
@keyframes slideright - This is the @keyframes rule, which defines the animation.
from - This is the first keyframe in the animation.
opacity: 1 - This property sets the opacity of the element to 1, which means it will be fully visible.
transform: translateX(-20px) - This property translates the element 20px to the left.
The animation will then progress to the element being fully visible and translated to the right. The exact timing of the animation will depend on the CSS properties that are used in the from and to keyframes.
STEP-9
@keyframes slideleft {
from{
opacity: 1;
transform: translateX(20px);
}
}
The keyframe rule is called slideleft, and it contains a single keyframe, called from. The from keyframe specifies the initial state of the animation, which is that the element will be opaque and will be translated 20px to the left.
The opacity property controls the transparency of the element, and the transform property controls the position of the element. In this case, the transform property is set to translateX(20px), which means that the element will be moved 20px to the left.
When the animation is played, the element will start in its initial state, and then it will slide left until it reaches its final position. The duration of the animation will depend on the browser and the device that is being used.
---END---
Comments
Post a Comment