念念不忘
必有回响

B站网页特效学习 — Loading动态加载图制作

看到B站讲的不错的网页特效视频,在GitHub也有分享的demo,顺便记录一下总结,需要引入的CDN资源。

<!-- font-awesome --> <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />

Loading效果:demo

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Loading1</title> <style> body { margin: 0; padding: 0; background: #333; } .middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .bar { width: 6px; height: 2px; background: white; display: inline-block; transform-origin: bottom center; animation: loading 1.5s ease-in-out infinite; } .bar1 { animation-delay: 0.1s; } .bar2 { animation-delay: 0.2s; } .bar3 { animation-delay: 0.3s; } .bar4 { animation-delay: 0.4s; } .bar5 { animation-delay: 0.5s; } .bar6 { animation-delay: 0.6s; } .bar7 { animation-delay: 0.7s; } .bar8 { animation-delay: 0.8s; } @keyframes loading { 0% { transform: scaleY(0.1); background: #fff; } 50% { transform: scaleY(30); background: #2ecc71; } 100% { transform: scaleY(0.1); background: transparent; } } </style> </head> <body> <div class="middle"> <div class="bar bar1"></div> <div class="bar bar2"></div> <div class="bar bar3"></div> <div class="bar bar4"></div> <div class="bar bar5"></div> <div class="bar bar6"></div> <div class="bar bar7"></div> <div class="bar bar8"></div> </div> </body> </html>

效果图:

赞(0) 打赏
未经允许不得转载:小蚁上树 » B站网页特效学习 — Loading动态加载图制作
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址