How to set time in css

CSS (Cascading Style Sheets) is a language used for web page style design and plays a very important role in web design. In addition to playing a role in the style and layout of web pages, CSS can also easily set various temporal effects and animations in web pages. This article will introduce in detail how to use CSS to set time-related effects.

1. CSS clock effect

The clock is a time effect that is usually applied to various websites and applications. Using CSS, you can create clock effects that are not only beautiful but also precise. Here is an example code of how to create a simple clock style:

HTML code:

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS code:

.clock {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #fff;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.hour {
  width: 6px;
  height: 50px;
  background-color: #000;
  position: absolute;
  left: calc(50% - 3px);
  top: calc(50% - 50px);
  transform-origin: bottom center;
  transform: rotate(90deg);
}
.minute {
  width: 4px;
  height: 80px;
  background-color: #000;
  position: absolute;
  left: calc(50% - 2px);
  top: calc(50% - 80px);
  transform-origin: bottom center;
  transform: rotate(180deg);
}
.second {
  width: 2px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: calc(50% - 1px);
  top: calc(50% - 100px);
  transform-origin: bottom center;
  transform: rotate(270deg);
  animation: move 60s linear infinite;
}
@keyframes move {
  0% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(630deg);
  }
}

In the above code, we assigned the div tag to .clock class makes it the outer frame of the clock. The hour, minute and second classes are used to display hour, minute and second hands respectively. With the position property and the transform property in CSS, we can easily place them in the right position and make them rotate to show the current time. Additionally, we can use CSS animation to make the second hand move smoothly.

2. CSS to realize the countdown effect

The countdown effect is widely used in many occasions, such as product special offer countdown on web pages or event end time countdown, etc. Using CSS, we can easily add this countdown effect to our website. The following is a code example that uses CSS to set a countdown effect:

HTML code:

<div>
  <div>00</div>
  <div>00</div>
  <div>00</div>
  <div>00</div>
</div>

CSS code:

.countdown {
  font-family: monospace;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  justify-content: center;
  margin: 50px 0;
}
.countdown div {
  width: 60px;
  height: 60px;
  margin: 0 10px;
  border-radius: 10px;
  background-color: #fff;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

In the above code, we use <div> tag to represent the countdown number. Using the <code>display property and the flex property value in CSS, we arrange these number elements in rows. We can easily resize the number element by setting the width and height of the <div> tag. Styling digital elements, such as changing the background color through the <code>background-color property, and using the box-shadow property of the CSS box model to add a shadow effect.

3. Create flickering effects and animation effects with CSS

In addition to the clock and countdown effects currently introduced, CSS can also create many other time-related effects, such as flickering, scaling, rotation and color changes. wait. Here are some examples of using CSS to achieve a specific time effect:

1. CSS Blink Effect

The blink effect is often used to emphasize certain elements on a website, through the animationAttributes and keyframes, we can easily add a flickering effect to text or images. The following is a simple CSS flash effect code example:

HTML code:

<h1 id="Hello-World">Hello World!</h1>

CSS code:

.blink {
  animation: blink 1s linear infinite;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

In the above code, we use <h1> </h1> tags and .blink classes are used to create text elements, and CSS’s animation properties and @keyframes rules are used to make text elements blink. In the @keyframes rules, we define the animation effect of the text element from 100% opacity to 50% opacity to 100% opacity.

2. CSS Animation Effect

CSS can also create various complex animations using keyframes and animation properties. Here is a simple CSS animation example:

HTML code:

<div>
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="How to set time in css" >
</div>

CSS code:

.animated {
  animation: animated 2s ease-out;
}
@keyframes animated {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.5) rotate(45deg);
  }
  50% {
    transform: scale(0.5) rotate(-45deg);
  }
  75% {
    transform: scale(1.2) rotate(0deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

In the above code, we use <div> tag and <code>.animated class to create an element containing an image, and use CSS animation property and @keyframes rule to create an animation for the element . In the @keyframes rules, we define the transition of an element from normal proportions, to enlargement with a 45-degree rotation, to scale-down and rotation back to the original proportions.

In CSS, we can use various properties and values ​​to set time-related effects and animations. Hopefully the examples presented in this article will help you get creative and add great time effects and various animation effects to your website.