![CSS 点击按钮以后修改DIV的高度，代码怎么写？[有代码]](/aiimages/CSS+%E7%82%B9%E5%87%BB%E6%8C%89%E9%92%AE%E4%BB%A5%E5%90%8E%E4%BF%AE%E6%94%B9DIV%E7%9A%84%E9%AB%98%E5%BA%A6%EF%BC%8C%E4%BB%A3%E7%A0%81%E6%80%8E%E4%B9%88%E5%86%99%EF%BC%9F%5B%E6%9C%89%E4%BB%A3%E7%A0%81%5D.png)
用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
用css做一个呼吸效果，然后让想闪烁的元素调用：
比如，我的div想呼吸
div.breatheDiv{height:500px
width:500px
background-color: #FF94A6
border-radius: 100%
webkit-animation: breathe 2000ms ease infinite
-moz-animation: breathe 2000ms ease infinite
-o-animation: breathe 2000ms ease infinite
animation: breathe 2000ms ease infinite
}
@-webkit-keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
@-moz-keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
@-o-keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
@keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
css3 实现对动态加载的dom加载动画效果：body {
background: #222
}
figure {
position: absolute
margin: auto
top: 0
bottom: 0
left: 0
right: 0
width: 6.250em
height: 6.250em
animation: rotate 2.4s linear infinite
}
.white {
top: 0
bottom: 0
left: 0
right: 0
background: white
animation: flash 2.4s linear infinite
opacity: 0
}
.dot {
position: absolute
margin: auto
width: 2.4em
height: 2.4em
border-radius: 100%
transition: all 1s ease
}
.dot:nth-child(2) {
top: 0
bottom: 0
left: 0
background: #FF4444
animation: dotsY 2.4s linear infinite
}
.dot:nth-child(3) {
left: 0
right: 0
top: 0
background: #FFBB33
animation: dotsX 2.4s linear infinite
}
.dot:nth-child(4) {
top: 0
bottom: 0
right: 0
background: #99CC00
animation: dotsY 2.4s linear infinite
}
.dot:nth-child(5) {
left: 0
right: 0
bottom: 0
background: #33B5E5
animation: dotsX 2.4s linear infinite
}
@keyframes rotate {
0% {
transform: rotate( 0 )
}
10% {
width: 6.250em
height: 6.250em
}
66% {
width: 2.4em
height: 2.4em
}
100% {
transform: rotate(360deg)
width: 6.250em
height: 6.250em
}
} @keyframes dotsY {
66% {
opacity: .1
width: 2.4em
}
77% {
opacity: 1
width: 0
}
}
@keyframes dotsX {
66% {
opacity: .1
height: 2.4em
}
77% {
opacity: 1
height: 0
}
} @keyframes flash {
33% {
opacity: 0
border-radius: 0%
}
55% {
opacity: .6
border-radius: 100%
}
66% {
opacity: 0
}
}
