Duration (Time)

Research

The definition of Duration (time) refers to the salt pool of text or elements, the delay of animation or hover, the duration of animation or hover, etc. in designing a website. Simply put, it represents the change in time presented in the web page. Through the exercises in the class, I learned how to create the effect of text magnifying over time, but I was thinking about other effects that could explain the meaning of time and be interesting at the same time. I searched a lot of different time effects online and finally I came up with an electronic clock.

image of css clocks
Reseach of clock effect in web design

Process

When making a clock, what I want to present is a digital clock. First, I set the background to a gradient picture that changes color over time, which is also one of the elements that represents time. Secondly, I made the title so that it can be enlarged over time to add interest. For the design of the electronic clock, I chose a sans-serif font for ease of reading. It is a color that changes over time. I hope that through this design, this project can become a static website that has the function of displaying and displaying time just like a computer lock screen interface.

process picture
Clock design without javascript yet