关闭边栏(ESC)打开边栏(ESC)
苏醒主题又出了一款新的主题:Cosy,挺好看的,其中一个加载更多的过滤效果挺好的,拷了下来
HTML结构
1 2 3 4 5 6 7 |
<div class="post-loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> |
CSS样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
.post-loading { width: 150px; margin: 20px auto; text-align: center; position: relative; } .post-loading span { display: inline-block; width: 10px; height: 10px; border-radius: 50px; margin-right: 10px; background: #48494d; -webkit-animation: load 1.04s ease infinite; } .post-loading span:last-child { margin-right: 0px; } @-webkit-keyframes load { 0% { opacity: 1; -webkit-transform: scale(1.6); } 100% { opacity: .1; -webkit-transform: scale(0); } } .post-loading span:nth-child(1) { -webkit-animation-delay: 0.1s; } .post-loading span:nth-child(2) { -webkit-animation-delay: 0.2s; } .post-loading span:nth-child(3) { -webkit-animation-delay: 0.3s; } .post-loading span:nth-child(4) { -webkit-animation-delay: 0.4s; } .post-loading span:nth-child(5) { -webkit-animation-delay: 0.5s; } |
哈喽,麻烦问一下,HTML结构应该添加在主题的什么地方呢
只要添加到body前 如果你主题有head.php 就放在这个文件中
能分享?
上面不是有代码了吗
其实你网站一直有一个问题,有些时候访问的时候会一直停留在加载页面,需要手动点一下才会显示内容
是啊,它是全部加载完内容后才隐藏那个loading动画的,打算把它取消掉