HTML5+CSS3 loading 效果收集

HTML5+CSS3 loading 效果收集,第1张

用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足。这已经成为一种趋势。

这里收集了几十个用html5和css3实现的loading效果,以供学习参考。

01. CSS Rainbow Loader

02. Single element Slack loader

03. Pure CSS3 loader

04. CSS Cog loader

05. VSCO – CSS loader

06. Cube CSS Loader

07. CSS Loader

08. Tumblr-style cog loaders

09. CSS Weather Loader

10. Chrome Cast CSS Loader

11. CSS3 Loaders

12. Android 4.4 Kitkat loader

13. CSS loaders kit

14. CSS creative loading

15. CSS Loading Animation

16. Logo Loader

17. Loaders collection by Loaders.css

18. CSS Water filling Loader

19. CSS loader

20. Animated CSS3 Loading Bar

21. CSS loading text animation

22. Simple Loader

23. CSS Loading animation

24. CSS loader

25. Pushing pixels CSS loader

26. CSS Loader

27. CSS Loaders

28. Random Loader

29. Single element CSS spinners

30. Simple CSS loader

31. SpinKit – CSS loaders

32. Modern Google Loader

33. 2D and 3D Block Loaders

34. 12 free SVG loaders

35. Page Loading Effects

36. Pace.js – Page Load Progress Bars

37. Loading SVG loaders

38. Material Design preloader

我用css3写了个demo

<html>

<head>

<meta charset="utf-8"/>

<title>Loading</title>

<style>

.spinner {

margin: 100px auto

width: 60px

height: 60px

text-align: center

font-size: 10px

}

.spinner >div {

background-color: #67CF22

height: 100%

width: 6px

display: inline-block

-webkit-animation: stretchdelay 1.2s infinite ease-in-out

animation: stretchdelay 1.2s infinite ease-in-out

}

.spinner .rect2 {

-webkit-animation-delay: -1.1s

animation-delay: -1.1s

}

.spinner .rect3 {

-webkit-animation-delay: -1.0s

animation-delay: -1.0s

}

.spinner .rect4 {

-webkit-animation-delay: -0.9s

animation-delay: -0.9s

}

.spinner .rect5 {

-webkit-animation-delay: -0.8s

animation-delay: -0.8s

}

@-webkit-keyframes stretchdelay {

0%, 40%, 100% { -webkit-transform: scaleY(0.4) }

20% { -webkit-transform: scaleY(1.0) }

}

@keyframes stretchdelay {

0%, 40%, 100% {

transform: scaleY(0.4)

-webkit-transform: scaleY(0.4)

} 20% {

transform: scaleY(1.0)

-webkit-transform: scaleY(1.0)

}

}

</style>

</head>

<body>

<div class="spinner">

<div class="rect1"></div>

<div class="rect2"></div>

<div class="rect3"></div>

<div class="rect4"></div>

<div class="rect5"></div>

</div>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6250498.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存