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:
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. Thehour
,minute
andsecond
classes are used to display hour, minute and second hands respectively. With theposition
property and thetransform
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:
00000000
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 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 HTML code: CSS code: In the above code, we use CSS can also create various complex animations using keyframes and HTML code: CSS code: In the above code, we use 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!display
property and theflex
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 thebackground-color
property, and using thebox-shadow
property of the CSS box model to add a shadow effect.
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:Hello World!
.blink { animation: blink 1s linear infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
tags and
.blink
classes are used to create text elements, and CSS’sanimation
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.
animation
properties. Here is a simple CSS animation example:
.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); } }
.animated
class to create an element containing an image, and use CSSanimation
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.