Star in Sky | CSS Animation in Background | #untoldcoding

Live Demo : Click Here

Title: Drawing Your Website: Using CSS Animation for a Starry Sky Background The wonderful landscapes of vast expanses of digital landscapes are like stars in the night sky, guiding users on immersive journeys through websites the advent of CSS visualization for them designers are able to breathe life into a static background, turning it into a vibrant canvas that leaves visitors Sky dazzled and amazed " Let's explore the beautiful realm of backgrounds, using CSS graphics to create heavens graphics that elevate the user experience to new heights." Beautiful backdrop of starry sky The exhilarating starry sky is universal, evoking wonder and awe beyond borders. Adding a starry sky to your website creates this natural appeal, taking visitors to places of contemplation and discovery. Whether creating a stunning portfolio, a quiet meditation app, or an educational platform, starry skies make for fascinating storytelling and immersive experiences CSS animation magic untoldcoding CSS animation is the brushstrokes artists use to create their digital masterpieces. With rich inheritance and keyframes, CSS empowers artists to breathe life into static backgrounds, infusing them with movement, depth, and personality Harnessing the power of CSS animation, a starry sky background transitions from mere static image to dynamic image, -They move around in the ballet

Want to Make this type of Animation then you have to follow 2 Step which is given below

Step 1 HTML Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Star in Sky | untoldcoing</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="night">
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
      <div class="untoldcoing"></div>
    </div>
    <p>Jai Siya Ram</p>
  </body>
</html>

Used a starry sky background with CSS animation

There are several basic steps to implement a starry sky background using CSS animation:

Creating HTML templates:

Start by setting up your HTML markup, and defining the layout and content of your web page. Make sure to specify the container element in which the starred sky background will be used.

Styling with CSS:

Define the attributes of your web page elements using CSS, including fonts, colors, layout, and positioning. For a starry sky background, set the background attribute of the container element and resize and position it as needed.

Astronomical inclusions:

Create individual star elements with CSS, using pseudo-elements (::before ::after) to create star shapes. Each star can be customized with vertical, top, left, width, height, border-radius, background color and other parameters in order to achieve a varied and natural look

Bringing stars to life:

Use CSS animation to create the illusion of twinkling stars. Use keyframes to define alternating animation sequences between opacity levels to simulate the flickering of distant celestial objects. Experiment with time functions for a subtle and organic shimmer effect.

Micro-modifications and optimizations:

Carefully test your starry-sky background on different devices and screen sizes, adjusting style and animation parameters as necessary for best performance and visual effects Consider using display optimization techniques such as hardware acceleration to reduce animation complexity so that you make sure you translate it correctly.

Step 2 CSS Code :

body {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: "Anton", sans-serif;
  justify-content: center;
  align-items: center;
}

.night {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateZ(45deg);
}

.untoldcoing {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
  border-radius: 999px;
  filter: drop-shadow(0 0 6px #699bff);
  -webkit-animation: tail 3000ms ease-in-out infinite,
    shooting 3000ms ease-in-out infinite;
  animation: tail 3000ms ease-in-out infinite,
    shooting 3000ms ease-in-out infinite;
}
.untoldcoing::before {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  height: 2px;
  background: linear-gradient(
    -45deg,
    rgba(0, 0, 255, 0),
    #5f91ff,
    rgba(0, 0, 255, 0)
  );
  transform: translateX(50%) rotateZ(45deg);
  border-radius: 100%;
  -webkit-animation: shining 3000ms ease-in-out infinite;
  animation: shining 3000ms ease-in-out infinite;
}
.untoldcoing::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  height: 2px;
  background: linear-gradient(
    -45deg,
    rgba(0, 0, 255, 0),
    #5f91ff,
    rgba(0, 0, 255, 0)
  );
  transform: translateX(50%) rotateZ(45deg);
  border-radius: 100%;
  -webkit-animation: shining 3000ms ease-in-out infinite;
  animation: shining 3000ms ease-in-out infinite;
  transform: translateX(50%) rotateZ(-45deg);
}
.untoldcoing:nth-child(1) {
  top: calc(50% - 132px);
  left: calc(50% - 7px);
  -webkit-animation-delay: 2500ms;
  animation-delay: 2500ms;
}
.untoldcoing:nth-child(1)::before,
.untoldcoing:nth-child(1)::after {
  -webkit-animation-delay: 2500ms;
  animation-delay: 2500ms;
}
.untoldcoing:nth-child(2) {
  top: calc(50% - -109px);
  left: calc(50% - 96px);
  -webkit-animation-delay: 1747ms;
  animation-delay: 1747ms;
}
.untoldcoing:nth-child(2)::before,
.untoldcoing:nth-child(2)::after {
  -webkit-animation-delay: 1747ms;
  animation-delay: 1747ms;
}
.untoldcoing:nth-child(3) {
  top: calc(50% - -168px);
  left: calc(50% - 12px);
  -webkit-animation-delay: 8783ms;
  animation-delay: 8783ms;
}
.untoldcoing:nth-child(3)::before,
.untoldcoing:nth-child(3)::after {
  -webkit-animation-delay: 8783ms;
  animation-delay: 8783ms;
}
.untoldcoing:nth-child(4) {
  top: calc(50% - 62px);
  left: calc(50% - 145px);
  -webkit-animation-delay: 211ms;
  animation-delay: 211ms;
}
.untoldcoing:nth-child(4)::before,
.untoldcoing:nth-child(4)::after {
  -webkit-animation-delay: 211ms;
  animation-delay: 211ms;
}
.untoldcoing:nth-child(5) {
  top: calc(50% - -188px);
  left: calc(50% - 109px);
  -webkit-animation-delay: 3434ms;
  animation-delay: 3434ms;
}
.untoldcoing:nth-child(5)::before,
.untoldcoing:nth-child(5)::after {
  -webkit-animation-delay: 3434ms;
  animation-delay: 3434ms;
}
.untoldcoing:nth-child(6) {
  top: calc(50% - -157px);
  left: calc(50% - 15px);
  -webkit-animation-delay: 5982ms;
  animation-delay: 5982ms;
}
.untoldcoing:nth-child(6)::before,
.untoldcoing:nth-child(6)::after {
  -webkit-animation-delay: 5982ms;
  animation-delay: 5982ms;
}
.untoldcoing:nth-child(7) {
  top: calc(50% - 62px);
  left: calc(50% - 294px);
  -webkit-animation-delay: 4694ms;
  animation-delay: 4694ms;
}
.untoldcoing:nth-child(7)::before,
.untoldcoing:nth-child(7)::after {
  -webkit-animation-delay: 4694ms;
  animation-delay: 4694ms;
}
.untoldcoing:nth-child(8) {
  top: calc(50% - 40px);
  left: calc(50% - 13px);
  -webkit-animation-delay: 5844ms;
  animation-delay: 5844ms;
}
.untoldcoing:nth-child(8)::before,
.untoldcoing:nth-child(8)::after {
  -webkit-animation-delay: 5844ms;
  animation-delay: 5844ms;
}
.untoldcoing:nth-child(9) {
  top: calc(50% - 173px);
  left: calc(50% - 97px);
  -webkit-animation-delay: 9303ms;
  animation-delay: 9303ms;
}
.untoldcoing:nth-child(9)::before,
.untoldcoing:nth-child(9)::after {
  -webkit-animation-delay: 9303ms;
  animation-delay: 9303ms;
}
.untoldcoing:nth-child(10) {
  top: calc(50% - 123px);
  left: calc(50% - 297px);
  -webkit-animation-delay: 2218ms;
  animation-delay: 2218ms;
}
.shooting_star:nth-child(10)::before,
.shooting_star:nth-child(10)::after {
  -webkit-animation-delay: 2218ms;
  animation-delay: 2218ms;
}
.shooting_star:nth-child(11) {
  top: calc(50% - 172px);
  left: calc(50% - 3px);
  -webkit-animation-delay: 5877ms;
  animation-delay: 5877ms;
}
.shooting_star:nth-child(11)::before,
.shooting_star:nth-child(11)::after {
  -webkit-animation-delay: 5877ms;
  animation-delay: 5877ms;
}
.shooting_star:nth-child(12) {
  top: calc(50% - -68px);
  left: calc(50% - 277px);
  -webkit-animation-delay: 4381ms;
  animation-delay: 4381ms;
}
.shooting_star:nth-child(12)::before,
.shooting_star:nth-child(12)::after {
  -webkit-animation-delay: 4381ms;
  animation-delay: 4381ms;
}
.shooting_star:nth-child(13) {
  top: calc(50% - -16px);
  left: calc(50% - 34px);
  -webkit-animation-delay: 4255ms;
  animation-delay: 4255ms;
}
.shooting_star:nth-child(13)::before,
.shooting_star:nth-child(13)::after {
  -webkit-animation-delay: 4255ms;
  animation-delay: 4255ms;
}
.shooting_star:nth-child(14) {
  top: calc(50% - 131px);
  left: calc(50% - 29px);
  -webkit-animation-delay: 6968ms;
  animation-delay: 6968ms;
}
.shooting_star:nth-child(14)::before,
.shooting_star:nth-child(14)::after {
  -webkit-animation-delay: 6968ms;
  animation-delay: 6968ms;
}
.shooting_star:nth-child(15) {
  top: calc(50% - 100px);
  left: calc(50% - 196px);
  -webkit-animation-delay: 1070ms;
  animation-delay: 1070ms;
}
.shooting_star:nth-child(15)::before,
.shooting_star:nth-child(15)::after {
  -webkit-animation-delay: 1070ms;
  animation-delay: 1070ms;
}
.shooting_star:nth-child(16) {
  top: calc(50% - 130px);
  left: calc(50% - 126px);
  -webkit-animation-delay: 9384ms;
  animation-delay: 9384ms;
}
.shooting_star:nth-child(16)::before,
.shooting_star:nth-child(16)::after {
  -webkit-animation-delay: 9384ms;
  animation-delay: 9384ms;
}
.shooting_star:nth-child(17) {
  top: calc(50% - -21px);
  left: calc(50% - 225px);
  -webkit-animation-delay: 5608ms;
  animation-delay: 5608ms;
}
.shooting_star:nth-child(17)::before,
.shooting_star:nth-child(17)::after {
  -webkit-animation-delay: 5608ms;
  animation-delay: 5608ms;
}
.shooting_star:nth-child(18) {
  top: calc(50% - -179px);
  left: calc(50% - 163px);
  -webkit-animation-delay: 7217ms;
  animation-delay: 7217ms;
}
.shooting_star:nth-child(18)::before,
.shooting_star:nth-child(18)::after {
  -webkit-animation-delay: 7217ms;
  animation-delay: 7217ms;
}
.shooting_star:nth-child(19) {
  top: calc(50% - 127px);
  left: calc(50% - 290px);
  -webkit-animation-delay: 7010ms;
  animation-delay: 7010ms;
}
.untoldcoing:nth-child(19)::before,
.untoldcoing:nth-child(19)::after {
  -webkit-animation-delay: 7010ms;
  animation-delay: 7010ms;
}
.untoldcoing:nth-child(20) {
  top: calc(50% - -163px);
  left: calc(50% - 161px);
  -webkit-animation-delay: 170ms;
  animation-delay: 170ms;
}
.untoldcoing:nth-child(20)::before,
.untoldcoing:nth-child(20)::after {
  -webkit-animation-delay: 170ms;
  animation-delay: 170ms;
}

@-webkit-keyframes tail {
  0% {
    width: 0;
  }
  30% {
    width: 100px;
  }
  100% {
    width: 0;
  }
}

@keyframes tail {
  0% {
    width: 0;
  }
  30% {
    width: 100px;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes shining {
  0% {
    width: 0;
  }
  50% {
    width: 30px;
  }
  100% {
    width: 0;
  }
}
@keyframes shining {
  0% {
    width: 0;
  }
  50% {
    width: 30px;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes shooting {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(300px);
  }
}
@keyframes shooting {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(300px);
  }
}
@-webkit-keyframes sky {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(405deg);
  }
}
@keyframes sky {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(405deg);
  }
}
p {
  position: absolute;
  font-size: 50px;
  font-weight: 900;
  -webkit-text-stroke: 1px rgb(54, 101, 140);
  color: transparent;
  animation: untoldcoding 5s infinite ease-in-out;
}

Want to Download the Source Code : Click here

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

Elevating User Experience with a Starry Sky Background

Integrating a starry sky background into your website offers numerous benefits for user experience:

Visual Engagement: The ethereal beauty of a starry sky captivates users' attention and encourages exploration, fostering a deeper connection with your website's content and brand.
Atmospheric Ambiance: A starry sky background sets the mood and ambiance of your website, creating a tranquil, otherworldly atmosphere that immerses visitors in a captivating digital journey.
Memorable Branding: A distinctive starry sky background serves as a memorable visual signature for your website, reinforcing brand identity and leaving a lasting impression on visitors.
Storytelling Potential: The dynamic nature of CSS animation allows for creative storytelling opportunities, where the movement of stars can symbolize progress, discovery, or transformation, enriching the narrative experience for users.

FAQ (Frequently Asked Questions) about Star in Sky Backgrounds

1. Are starry sky backgrounds suitable for all types of websites?

While starry sky backgrounds can enhance the ambiance and visual appeal of many websites, they may not be appropriate for all contexts. Consider the tone, theme, and target audience of your website when deciding whether a starry sky background aligns with your design goals.

2. Can CSS animation be combined with other background effects, such as parallax scrolling?

Yes, CSS animation can be seamlessly integrated with other background effects, such as parallax scrolling, to create dynamic and immersive user experiences. Experiment with different combinations to find the perfect balance of effects for your website.

3. How can I optimize performance when using CSS animation for a starry sky background?

To optimize performance, minimize the number of animated elements and use hardware acceleration where possible. Additionally, consider reducing animation complexity and limiting the duration and frequency of animations to ensure smooth rendering across devices and browsers.

4. Are there any accessibility considerations when using a starry sky background?

When using a starry sky background, ensure that text content remains legible and accessible to all users, including those with visual impairments. Use sufficient color contrast between text and background elements and provide alternative text for non-text content to ensure accessibility compliance.

Conclusion

A starry sky background, brought to life through CSS animation, holds the power to enchant, inspire, and captivate users on their digital journeys. By harnessing the magic of CSS animation, designers can transform static backgrounds into dynamic vistas that elevate the user experience to new heights of wonder and delight. Embrace the art of starry sky backgrounds in your web design endeavors, and embark on a celestial voyage of creativity and imagination.

Star in Sky | CSS Animation in Background | #untoldcoding

Step 1 HTML Code :