"Custom" animation [CSS + 010]

Haihong Pro 2021-04-08 11:20:15
custom animation css


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

Ideas

Here we use span The element represents the outer white circle

Two red balls are used separately span Two pseudo classes of ::before and ::after representative

According to the renderings , We can get a general idea

  • First use of span Make a square , Set the border
  • The two pseudo class elements are absolute positioning , It's on the top left and the bottom right of the square
  • Then fillet them separately
  • Finally, add the rotation animation

Demo Code

HTML

<!DOCTYPE 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;
/* The red border is just a reminder */
border: 2px solid red;
}
span{
width : 96px;
height: 96px;
border: 10px solid white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
animation: rotation 2s linear infinite;
}
span::before{
position: absolute;
content: '';
top: 15px;
left: 15px;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
span::after{
position: absolute;
content: '';
bottom: 15px;
right: 15px;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
@keyframes rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)
}
}

The principle,

step 1

take span The element is set to

  • One 96️96px The square of
  • Border is 10px, white ,solid
 width : 96px;
height: 96px;
border: 10px solid #fff;

The renderings are as follows
 Insert picture description here

step 2

span::before and span::after Set up

  • Width 、 The height is 20px
  • Absolute positioning , among before On the top left ,after At the bottom right
  • The background color is red
/* before Set up */
position: absolute;
content: '';
top: 0;
left: 0;
width: 20px;
height: 20px;
background: red;
/*after Set up */
position: absolute;
content: '';
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background: red;

The renderings are as follows

 Insert picture description here

step 3

Move slightly towards the center of the square ::before and ::after

/* before Set up */
top: 15px;
left: 15px;
/*after Set up */
bottom: 15px;
right: 15px;

The renderings are as follows

 Insert picture description here

step 4

Yes span、span::before、span::after Setting fillet

border-radius: 50%;

The renderings are as follows
 Insert picture description here

step 7

by span Add animation

animation: rotation 1s linear infinite;
/* Animation to achieve */
@keyframes rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)
}

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'm Haihong ଘ(੭ˊᵕˋ)੭, 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://qdmana.com/2021/04/20210408104918432R.html

  1. Scheme and implementation of front end page watermarking
  2. Why is 0.1 + 0.2 not equal to 0.3?
  3. JS arrow function this points to related practice
  4. CSS text decoration & text emphasis
  5. 2021必修 首门CSS架构系统精讲 理论+实战玩转蘑菇街
  6. 大前端
  7. The first compulsory CSS architecture system in 2021
  8. Big front end
  9. 你喜欢才是最好的,前端工程师常用的8个工具
  10. What you like is the best. There are 8 common tools used by front-end engineers
  11. Spring Boot + Vue3 前后端分离 实战wiki知识库系统
  12. Spring boot + vue3 front end and back end separation practical wiki knowledge base system
  13. CSS高级技巧总结
  14. CSS advanced skills summary
  15. HTML5教程 - HTML5 事件
  16. HTML5 tutorial - HTML5 events
  17. Vue和微信小程序的区别
  18. The difference between Vue and wechat applet
  19. HTML5和CSS3提高
  20. Improvement of HTML5 and CSS3
  21. HTML5和CSS3提高
  22. Improvement of HTML5 and CSS3
  23. NMN concept stock up and down limit, Harvard & 34; ageless drug & 34; only market speculation?
  24. 「HTML+CSS」--自定义加载动画【011】
  25. 「HTML+CSS」--自定义加载动画【010】
  26. 「HTML+CSS」--自定义加载动画【009】
  27. 「HTML+CSS」--自定义加载动画【008】
  28. "HTML + CSS" -- custom loading animation [011]
  29. "Custom" animation [CSS + 010]
  30. "HTML + CSS" -- custom loading animation [009]
  31. "HTML + CSS" -- custom loading animation [008]
  32. HttpServletRequest、通过request获得请求头、请求体等、解决中文乱码等问题
  33. HttpServletRequest, obtaining request header and request body through request, solving Chinese garbled code and other problems
  34. html2canvas 识别 svg 解决方案
  35. Solution of identifying SVG with html2canvas
  36. Web前端架构师
  37. Web front end architect
  38. 3000 yuan of financial software is less than 28 yuan of system, and the automatic accounting system is comparable to artifact
  39. Blessing of the sea
  40. IT兄弟连 HTML5教程 CSS3揭秘 小结及习题
  41. Summary and exercises of CSS3 in HTML5 course of it Brothers Company
  42. It's disassembled before it's on the market. The workmanship of Xiaomi 10 is unexpected, reducing maintenance costs?
  43. Vue自学之路5-vue模版语法(v-text,v-html,v-pre)
  44. Vue self learning 5-vue template syntax (v-text, v-html, v-pre)
  45. 【HTML】处理&lt;br&gt;换行符追加到前端换行无效的问题 --- html中渲染的字符串中包含HTML标签无效的处理方法,字符串中包含HTML标签被转义的问题 解决
  46. [HTML] processing & lt; BR & gt; the problem of invalid line feed when the line feed character is added to the front end --- the processing method of invalid HTML tag contained in the rendered string in HTML, and the problem of escape of HTML tag containe
  47. Vue自学之路5-vue模版语法(v-text,v-html,v-pre)
  48. Vue self learning 5-vue template syntax (v-text, v-html, v-pre)
  49. 7个Web前端程序员必须会用CSS技巧
  50. 10个优秀开源JavaScript模板引擎
  51. JavaScript基础知识及写法
  52. FB大规模重构React Native,Airbnb宣布回归原生,前端巨变来临?
  53. Seven web front-end programmers must be able to use CSS skills
  54. 10 excellent open source JavaScript template engines
  55. Basic knowledge and writing method of JavaScript
  56. FB large scale reconstruction react native, airbnb announced return to the original, the front-end changes coming?
  57. 网页HTML5视频播放器(兼容各主流浏览器)
  58. Web HTML5 video player (compatible with mainstream browsers)
  59. 前端开发需要掌握哪些技术?前端开发都学什么?
  60. 一本关于HTTP的恋爱日记