DailyUI Challenge #004 - I made clone of the Google Calculator app, only the UI with a blinking cursor animation, might add functionality later on.

Font:

• Open Sans

Color Scheme:

• #2D3033 - top half background and button hover color
• #202124 - bottom half background
• #E8EAED - white input text and number color
• #174EA6 - blue strip on the right of numpad
• #88B2F5 - operator icon color
• #B7B7B7 - gray navbar text and calculated result color

Blinking Cursor Animation:

HTML

The part we want to animate is right after the input.

CSS

In the CSS for after the input, set the content empty and a very thin border to the right with your choice of color.

For each rendering engine's keyframe, set the border color at the beginning and end (0%, 100%) of the animation to be transparent and at the very middle (50%) of the animation to be your choice of color. The 50% is when you see the cursor blink.

For each rendering engine's animation, we set the blink animation to a 1 second duration, the timing-function to step-end, and the iteration-count to infinite because we want it to continuously blink.

CodePen