My goal is to have my elements gracefully fade in with 2 lines extending out of a circle, one to the left and one to the right.
However, I am struggling to achieve this. Every time I attempt to display the lines, it ends up shrinking the entire design. My objective is to keep the circle centered and have the lines (container) gradually expand.
I have already tried setting it to absolute positioning, but that didn't solve the issue :\
To see the current state of the code, visit: Codepen.io
If you want to create a smooth CSS3 animation without adding different classes for each element, you can utilize pseudo selectors :before and :after.
.container{
width:200px;
height:auto;
text-align:center;
position:relative;
top:10px;
}
.container > span{
display:block;
position:relative;
}
.container:before{
content:'';
position:absolute;
width:10px;
height:10px;
background:blue;
z-index:9;
top:-10px;
border-radius:50%;
animation:opt 2s ease forwards;
opacity:0;
}
.container:after{
content:'';
position:absolute;
width:10px;
height:10px;
background:blue;
z-index:9;
bottom:-12px;
border-radius:50%;
animation:opt 2s ease forwards;
opacity:0;
}
@keyframes opt{
from{
opacity:0;
}
to{
opacity:1;
}
}
.container > span:before{
content:'';
position:absolute;
width:0px;
height:2px;
background:#111;
z-index:7;
bottom:-10px;
right:50%;
transform:translate(0,-50%);
transition:1s ease;
animation:wdth 2s ease forwards 1s;
}
.container > span:after{
content:'';
position:absolute;
width:0px;
height:2px;
background:#111;
z-index:7;
top:-5px;
left:50%;
transition:1s ease;
animation:wdth 2s ease forwards 1s;
}
@keyframes wdth{
from{
width:0px;
}
to{
width:50px;
}
}<div class="container">
<span>Ghaleon Games</span>
</div>Just getting started with Angular and still learning the concepts. Trying to figure out how to show an icon only when it's hovered over. Can anyone assist me? Sorry, can't share the code because of company rules. The icons are for sorting and ...
I am in the process of creating a Vue application to generate my CV in PDF format. I have incorporated the Google font Montserrat into the project, but when I attempt to print the page to file (CTRL + P in Firefox), the text appears as if it were an image ...
In my 3d art gallery project, I am utilizing plain JavaScript. The task at hand involves populating certain columns with images by pulling from an array of image sources. On click, I need to retrieve the index of the clicked image so that I can extract add ...
Just as the title suggests, I have an external style sheet connected to my HTML document, and it appears that the footer element may be incorporating the changes, but none of the other content is. Being new to this, I'm trying to pinpoint where I went ...
I am currently working on creating an action floating button using the Ionic framework. While I have successfully created a basic button, I am now looking to add some stylish effects and make additional buttons appear upon interaction. I understand that th ...
Is there a way to make the link that is clicked on active? I have attempted various scripts but have had no luck in getting the desired effect. Can anyone identify what might be causing the issue? $("a").click(function () { if ($(this).hasClass("acti ...
I'm trying to achieve button links with an image overlay, but so far I've only been able to do it using CSS: section a:link, section a:visited { width: 150px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: ...
I've been attempting to create an alert component, but I'm facing an issue with adjusting the color of the alert message. Upon enabling dark mode in the navbar (located at the bottom of the navbar component code), an alert message confirming the ...
After creating a website some time ago, I decided to make it responsive by adding a menu. However, I encountered an issue where the menu bar opens but immediately closes after showing the entire list. Here is the HTML code for the menu: <!-- start men ...
I've been attempting to separate posts for a long time without success. No matter what variations I try, the result is always either a single post or duplicating all of them. In other words, multiple posts are not displaying as intended. If anyone ha ...
When I added a span element as the circular border to my image, which is placed inside a span tag, I observed that the span tag was being pushed down. By giving the span a display:inline-block property, the issue was resolved. But why does this happen? ...
I've been struggling to keep this box fixed at the top of the browser, but I'm facing an issue with the positioning on the right side. I can't seem to figure out how to solve it, so I'm reaching out for some help. #StickyBar #RightSide ...
I am facing some issues with my navigation bar. I am unable to adjust its size or position it at the center of the page. Additionally, despite setting the body width and height to 100vw and 100vh respectively, I am able to scroll both vertically and horizo ...
I have been searching for a clear answer to my query, but haven't found one yet. In my HTML script, I have nested divs structured like this: <ul id="navbar"> <li><a href='#' class='dropdown'>Rules</a> ...
Are flexible layouts more challenging to create and maintain than fixed width layouts, and do they take longer to design? Does a flexible layout only involve setting the width, height, and font size in em or %? What are the main advantages of using a fle ...
Creating two sign-up forms using HTML and CSS Bootstrap. Want them to be parallel, tried using the position tag but there is unwanted space created between the forms. View the output How can I prevent this circle of space from being generated? <main cl ...
I recently embarked on a personal project to create my own portfolio website using HTML, CSS, and JavaScript. As I was working on styling the header section with bright colors for visualization purposes, I encountered an issue where the green box was overf ...
I am facing an issue with a div element. Here is the code snippet: <div fxLayout="column" fxLayoutGap="20px"> <h1 class="mat-display-1">Welcome to $TITLE$</h1> <img *ngIf="logoData" [src]="logoData" class="logo" alt="logo"/> &l ...
In its natural state, the submit button appears in the default color, lacking any specific style when viewed in Chrome. Once the CSS rule input[type="submit"]{border-radius: 2px;} is applied, the button transforms, suddenly changing color and showing a sh ...
No matter how much I've tried, I can't seem to find a solution on how to make my image responsive along with the caption. Below is my HTML code: <section id="banner"> <div class="banner-bg"> <div class="banner-bg-item ...