Home >Web Front-end >Front-end Q&A >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 class="clock"> <div class="hour"></div> <div class="minute"></div> <div class="second"></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 class="countdown"> <div class="days">00</div> <div class="hours">00</div> <div class="minutes">00</div> <div class="seconds">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 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 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:
The blink effect is often used to emphasize certain elements on a website, through the animation
Attributes 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 class="blink">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>
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.
CSS can also create various complex animations using keyframes and animation
properties. Here is a simple CSS animation example:
HTML code:
<div class="animated"> <img src="image.jpg"> </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 .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.
The above is the detailed content of How to set time in css. For more information, please follow other related articles on the PHP Chinese website!