编程知识 cdmana.com

"HTML + CSS" -- custom loading animation [029]

Preface

Hello! buddy !
First of all, thank you very much for reading Haihong's article , If there are mistakes in the text , You are welcome to point out ~
ha-ha Introduce yourself
nickname : Sea boom
label : There's a program ape |C++ player | Student
brief introduction : because C Language and programming , Then I turned to computer science , Lucky to have won the National Award 、 Provincial awards, etc , It has been insured . Currently learning C++/Linux( It's really, really hard ~)
Learning experience : Solid foundation + Take more notes + Knock more code + Think more + Learn English well !
Everyday sharing : WeChat official account 【 Sea boom Pro】 Record life 、 Learning , Share some source code or learning materials , Welcome to your attention ~

Effect display

 Insert picture description here

Demo Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <section><span></span></section>
</body>
</html>

CSS

html,body{
    
  margin: 0;
  height: 100%;
}
body{
    
  display: flex;
  justify-content: center;
  align-items: center;
  background: #263238;
}
section {
    
    width: 650px;
    height: 300px;
    padding: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid red;
}
span {
    
  width : 96px;
  height: 96px;
  background: white;
  border-radius: 50%;
  animation: animloader 1s ease-in infinite;
}
@keyframes animloader {
    
  0% {
     transform: scale(0); opacity: 1;}
  100% {
     transform: scale(1); opacity: 0;}
}

The principle,

step 1

Use span label , Set up

  • Width 、 The height is 96px
  • Background color : white
 width : 96px;
  height: 96px;
  background: white;

The renderings are as follows

 Insert picture description here

step 2

span Fillet

 border-radius: 50%;

The renderings are as follows
 Insert picture description here

step 3

by span Animate

  • The initial state : The size is 0( Relative to the original size ), The color is ( white , Transparency level 1)
  • Termination status : The size is 1( Relative to the original size ), The color is ( white , Transparency level 0)
animation: animloader 1s ease-in infinite;
@keyframes animloader {
    
  0% {
     transform: scale(0); opacity: 1;}
  100% {
     transform: scale(1); opacity: 0;}
}

The renderings are as follows

 Insert picture description here

Conclusion

Source of learning :

https://codepen.io/bhadupranjal/pen/vYLZYqQ

The article is only for study notes , Record from 0 To 1 A process of . I hope it will be of some help to you , If you have any mistakes, you are welcome to correct them ~

I am a Sea boom ଘ(੭ˊᵕˋ)੭, If you think it's ok , Please like it

Writing is not easy to ,「 give the thumbs-up 」+「 Collection 」+「 forward 」

Thank you for your support ️

 Insert picture description here

版权声明
本文为[Haihong Pro]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/04/20210422025428919g.html

Scroll to Top