Charging effect simulation

Table of Contents

Requirements

Thought analysis and code implementation

Achieve the effect

Summary

---

Demand

Continue to fish...

On a whim, how to achieve a mobile phone charging effect?Similar to...emmm is not easy to find, so omitted.In short, the dynamic effect that appears on the interface after the phone is connected to the charger.

Thought analysis and code implementation

This can obviously also be achieved with css animations.Displays the current battery level with a circle surrounded by solid-colored areas that are changing in color and shape.

It's not very easy to describe, just go to the code.

html section

 
82.5%

css section

 .container {width: 500px;min-height: 600px;background-color: black;margin: 0 auto;position: relative;}.circle {width: 300px;height: 300px;border-radius: 50%;margin: 100px auto;border: 3px solid white;color: white;background-color: black;line-height: 300px;text-align: center;font-size: 50px;position: relative;}/* clear margin overlap */.clearfix::before,.clearfix::after {content: '';display: table;clear: both;}.fire {width: 350px;height: 320px;position: absolute;top: calc(50% - 50px);left: 50%;transform: translate(-50%, -50%);}.fire-content{width: 100%;height: 100%;animation: rotate 10s infinite both reverse linear;}@keyframes rotate{from{transform: rotate(0);background-color: azure;border-radius: 260px 80px;}25%{transform: rotate(90deg);background-color: beige;border-radius: 80px 260px;}50%{transform: rotate(180deg);background-color: bisque;border-radius: 260px 80px;}75%{transform: rotate(270deg);background-color: powderblue;border-radius: 80px 260px;}100%{transform: rotate(360deg);background-color: honeydew;border-radius: 260px 80px;}}

It's important to note here that confusion can arise when transform and animation are applied to the same element, and the animation also manipulates the transform.To do this, you can wrap a parent element outside the element, transform the parent element, and animate the child element.This way, there will be no confusion.

So, I manipulate fire-content with animation and fire with transform.

Achieving the effect

It's kind of like that!

Summary

This time the code is relatively simple, nothing special, just a point to pay attention to when applying animations and transforms.

When publishing, it indicates that the quality of the article is too low....Hey, let's go low!