[英]Custom Css Page Preloader in Wordpress
i made a custom css animation for a website so it shows every time a page is loading.我为网站制作了自定义 css 动画,因此每次加载页面时都会显示。 The problem is i cant find a way to use this animation in a wordpress site.
问题是我找不到在 wordpress 站点中使用此动画的方法。
I am an experience wordpress user and was hoping that after the animation was done it would be really easy to do this but i cant find the answer.我是一名经验丰富的 wordpress 用户,希望在动画完成后,这样做真的很容易,但我找不到答案。
Here is my snippet.这是我的片段。 How do i use it in wordpress?
我如何在wordpress中使用它?
#cssload-loader { position: absolute; margin: auto; left: 0; right: 0; width: 88px; } #cssload-loader ul { margin: 0; list-style: none; width: 88px; height: 63px; position: relative; padding: 0; height: 10px; } #cssload-loader ul li { position: absolute; width: 8px; height: 0; background-color: #154093; bottom: 0; } #cssload-loader li:nth-child(1) { left: 0; animation: cssload-sequence1 1.15s ease infinite 0; -o-animation: cssload-sequence1 1.15s ease infinite 0; -ms-animation: cssload-sequence1 1.15s ease infinite 0; -webkit-animation: cssload-sequence1 1.15s ease infinite 0; -moz-animation: cssload-sequence1 1.15s ease infinite 0; } #cssload-loader li:nth-child(2) { left: 15px; animation: cssload-sequence2 1.15s ease infinite 0.12s; -o-animation: cssload-sequence2 1.15s ease infinite 0.12s; -ms-animation: cssload-sequence2 1.15s ease infinite 0.12s; -webkit-animation: cssload-sequence2 1.15s ease infinite 0.12s; -moz-animation: cssload-sequence2 1.15s ease infinite 0.12s; } #cssload-loader li:nth-child(3) { left: 29px; animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s; -o-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s; -ms-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s; -webkit-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s; -moz-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s; } #cssload-loader li:nth-child(4) { left: 44px; animation: cssload-sequence2 1.15s ease-in infinite 0.35s; -o-animation: cssload-sequence2 1.15s ease-in infinite 0.35s; -ms-animation: cssload-sequence2 1.15s ease-in infinite 0.35s; -webkit-animation: cssload-sequence2 1.15s ease-in infinite 0.35s; -moz-animation: cssload-sequence2 1.15s ease-in infinite 0.35s; } #cssload-loader li:nth-child(5) { left: 58px; animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s; -o-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s; -ms-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s; -webkit-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s; -moz-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s; } #cssload-loader li:nth-child(6) { left: 73px; animation: cssload-sequence2 1.15s ease infinite 0.58s; -o-animation: cssload-sequence2 1.15s ease infinite 0.58s; -ms-animation: cssload-sequence2 1.15s ease infinite 0.58s; -webkit-animation: cssload-sequence2 1.15s ease infinite 0.58s; -moz-animation: cssload-sequence2 1.15s ease infinite 0.58s; } #cssload-loader li:nth-child(7) { left: 87px; animation: cssload-sequence2 1.15s ease infinite 0.12s; -o-animation: cssload-sequence2 1.15s ease infinite 0.12s; -ms-animation: cssload-sequence2 1.15s ease infinite 0.12s; -webkit-animation: cssload-sequence2 1.15s ease infinite 0.12s; -moz-animation: cssload-sequence2 1.15s ease infinite 0.12s; } #cssload-loader li:nth-child(8) { left: 101px; animation: cssload-sequence2 1.15s ease infinite 0.23s; -o-animation: cssload-sequence2 1.15s ease infinite 0.23s; -ms-animation: cssload-sequence2 1.15s ease infinite 0.23s; -webkit-animation: cssload-sequence2 1.15s ease infinite 0.23s; -moz-animation: cssload-sequence2 1.15s ease infinite 0.23s; } #cssload-loader li:nth-child(9) { left: 115px; animation: cssload-sequence2 1.15s ease-in infinite 0.35s; -o-animation: cssload-sequence2 1.15s ease-in infinite 0.35s; -ms-animation: cssload-sequence2 1.15s ease-in infinite 0.35s; -webkit-animation: cssload-sequence2 1.15s ease-in infinite 0.35s; -moz-animation: cssload-sequence2 1.15s ease-in infinite 0.35s; } #cssload-loader li:nth-child(10) { left: 129px; animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s; -o-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s; -ms-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s; -webkit-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s; -moz-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s; } @keyframes cssload-sequence1 { 0% { height: 10px; } 50% { height: 49px; } 100% { height: 10px; } } @-o-keyframes cssload-sequence1 { 0% { height: 10px; } 50% { height: 49px; } 100% { height: 10px; } } @-ms-keyframes cssload-sequence1 { 0% { height: 10px; } 50% { height: 49px; } 100% { height: 10px; } } @-webkit-keyframes cssload-sequence1 { 0% { height: 10px; } 50% { height: 49px; } 100% { height: 10px; } } @-moz-keyframes cssload-sequence1 { 0% { height: 10px; } 50% { height: 49px; } 100% { height: 10px; } } @keyframes cssload-sequence2 { 0% { height: 19px; } 50% { height: 63px; } 100% { height: 19px; } } @-o-keyframes cssload-sequence2 { 0% { height: 19px; } 50% { height: 63px; } 100% { height: 19px; } } @-ms-keyframes cssload-sequence2 { 0% { height: 19px; } 50% { height: 63px; } 100% { height: 19px; } } @-webkit-keyframes cssload-sequence2 { 0% { height: 19px; } 50% { height: 63px; } 100% { height: 19px; } } @-moz-keyframes cssload-sequence2 { 0% { height: 19px; } 50% { height: 63px; } 100% { height: 19px; } }
<body style="padding:100px;"> <div id="cssload-loader" style="margin: 0 auto;"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body>
if you are feeling it difficult to incorporate into your WordPress website then you can download a free plugin like this https://www.everlive.net/wordpress-plugins/42-preloader-for-wordpress.html如果你觉得很难融入你的 WordPress 网站,那么你可以下载一个像这样的免费插件https://www.everlive.net/wordpress-plugins/42-preloader-for-wordpress.html
and modify it's CSS to the way you like.并将其 CSS 修改为您喜欢的方式。 It would be very simple.
这将非常简单。 You don't need to modify any core WordPress files.
您无需修改任何核心 WordPress 文件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.