judgecx 发表于 2020-1-16 09:28

wordpress主题加载动画求助

<!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>Document</title>

<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
#he{
/* width: 100%; */
display: flex;/*弹性盒模型*/
justify-content: center;/*主轴方向居中显示*/
align-items: center;/*交叉轴方向居中显示*/
height: 100vh;
background-color: #232e6d;
}
ul{
height: 200px;
}
li{
float: left;
width: 20px;
height: 20px;
border-radius: 20px;
margin-right: 10px;
}
li:nth-child(1){
background-color: #f62e74;
animation: love1 4s infinite;
}
li:nth-child(2){
background-color: #f45330;
animation: love2 4s infinite;
animation-delay: 0.15s;
}
li:nth-child(3){
background-color: #ffc883;
animation: love3 4s infinite;
animation-delay: 0.3s;
}
li:nth-child(4){
background-color: #30d268;
animation: love4 4s infinite;
animation-delay: 0.45s;
}
li:nth-child(5){
background-color: #006cb4;
animation: love5 4s infinite;
animation-delay: 0.6s;
}
li:nth-child(6){
background-color: #784697;
animation: love4 4s infinite;
animation-delay: 0.75s;
}
li:nth-child(7){
background-color: #ffc883;
animation: love3 4s infinite;
animation-delay: 0.9s;
}
li:nth-child(8){
background-color: #f45330;
animation: love2 4s infinite;
animation-delay: 1.05s;
}
li:nth-child(9){
background-color: #f62e74;
animation: love1 4s infinite;
animation-delay: 1.2s;
}
@keyframes love1{
30%,50%{height: 60px; transform: translateY(-30px);}
75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love2{
30%,50%{height: 125px; transform: translateY(-62.5px);}
75%,100%{height: 20px; transform: translateY(0);}

}
@keyframes love3{
30%,50%{height: 160px; transform: translateY(-75px);}
75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love4{
30%,50%{height: 180px; transform: translateY(-60px);}
75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love5{
30%,50%{height: 190px; transform: translateY(-45px);}
75%,100%{height: 20px; transform: translateY(0);}
}
</style>

</head>
<body>

<div id="he">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

</body>
</html>
就是我想把这个写进WordPress主题里怎么写啊
那个显示在首页的和尾页隐藏的代码怎么写啊大佬求助

longgod 发表于 2020-1-16 10:59

将<style>标签内的代码一般放到style.css里，整个<div id="he">标签内的代码一般放到footer.php中</body>闭合标签之前。当然有些主题这么改可能无效，比如dux主题直接改style.css是无效的。

judgecx 发表于 2020-1-16 11:26

longgod 发表于 2020-1-16 10:59
将标签内的代码一般放到style.css里，整个标签内的代码一般放到footer.php中闭合标签之前。当然有些主题这 ...

老哥出了点问题 一直在页面显示

longgod 发表于 2020-1-16 12:55

你是想要几秒后动画就消失吧，我改了一下用的jQuery 设置指定秒数(3秒)后隐藏元素。
<!DOCTYPE html>
<html>

<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>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
      * {
            padding: 0;
            margin: 0;
            list-style: none;
      }

      #he {
            /* width: 100%; */
            display: flex;
            /*弹性盒模型*/
            justify-content: center;
            /*主轴方向居中显示*/
            align-items: center;
            /*交叉轴方向居中显示*/
            height: 100vh;
            background-color: #232e6d;
      }

      ul {
            height: 200px;
      }

      li {
            float: left;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            margin-right: 10px;
      }

      li:nth-child(1) {
            background-color: #f62e74;
            animation: love1 4s infinite;
      }

      li:nth-child(2) {
            background-color: #f45330;
            animation: love2 4s infinite;
            animation-delay: 0.15s;
      }

      li:nth-child(3) {
            background-color: #ffc883;
            animation: love3 4s infinite;
            animation-delay: 0.3s;
      }

      li:nth-child(4) {
            background-color: #30d268;
            animation: love4 4s infinite;
            animation-delay: 0.45s;
      }

      li:nth-child(5) {
            background-color: #006cb4;
            animation: love5 4s infinite;
            animation-delay: 0.6s;
      }

      li:nth-child(6) {
            background-color: #784697;
            animation: love4 4s infinite;
            animation-delay: 0.75s;
      }

      li:nth-child(7) {
            background-color: #ffc883;
            animation: love3 4s infinite;
            animation-delay: 0.9s;
      }

      li:nth-child(8) {
            background-color: #f45330;
            animation: love2 4s infinite;
            animation-delay: 1.05s;
      }

      li:nth-child(9) {
            background-color: #f62e74;
            animation: love1 4s infinite;
            animation-delay: 1.2s;
      }

      @keyframes love1 {

            30%,
            50% {
                height: 60px;
                transform: translateY(-30px);
            }

            75%,
            100% {
                height: 20px;
                transform: translateY(0);
            }
      }

      @keyframes love2 {

            30%,
            50% {
                height: 125px;
                transform: translateY(-62.5px);
            }

            75%,
            100% {
                height: 20px;
                transform: translateY(0);
            }

      }

      @keyframes love3 {

            30%,
            50% {
                height: 160px;
                transform: translateY(-75px);
            }

            75%,
            100% {
                height: 20px;
                transform: translateY(0);
            }
      }

      @keyframes love4 {

            30%,
            50% {
                height: 180px;
                transform: translateY(-60px);
            }

            75%,
            100% {
                height: 20px;
                transform: translateY(0);
            }
      }

      @keyframes love5 {

            30%,
            50% {
                height: 190px;
                transform: translateY(-45px);
            }

            75%,
            100% {
                height: 20px;
                transform: translateY(0);
            }
      }
    </style>
    <script>
      $(function () {
            $("#he").show().delay(3000).fadeOut(); //时间设置为3秒
      })
    </script>
</head>

<body>
    <div id="he">
      <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
      </ul>
    </div>
</body>

</html>
效果如下

如果不担心可能会和主题或插件冲突，可以直接将
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
      * {
            padding: 0;
            margin: 0;
            list-style: none;
      }

      #he {
            /* width: 100%; */
            display: flex;
            /*弹性盒模型*/
            justify-content: center;
            /*主轴方向居中显示*/
            align-items: center;
            /*交叉轴方向居中显示*/
            height: 100vh;
            background-color: #232e6d;
      }

      ul {
            height: 200px;
      }

      li {
            float: left;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            margin-right: 10px;
      }

      li:nth-child(1) {
            background-color: #f62e74;
            animation: love1 4s infinite;
      }

      li:nth-child(2) {
            background-color: #f45330;
            animation: love2 4s infinite;
            animation-delay: 0.15s;
      }

      li:nth-child(3) {
            background-color: #ffc883;
            animation: love3 4s infinite;
            animation-delay: 0.3s;
      }

      li:nth-child(4) {
            background-color: #30d268;
            animation: love4 4s infinite;
            animation-delay: 0.45s;
      }

      li:nth-child(5) {
            background-color: #006cb4;
            animation: love5 4s infinite;
            animation-delay: 0.6s;
      }

      li:nth-child(6) {
            background-color: #784697;
            animation: love4 4s infinite;
            animation-delay: 0.75s;
      }

      li:nth-child(7) {
            background-color: #ffc883;
            animation: love3 4s infinite;
            animation-delay: 0.9s;
      }

      li:nth-child(8) {
            background-color: #f45330;
            animation: love2 4s infinite;
            animation-delay: 1.05s;
      }

      li:nth-child(9) {
            background-color: #f62e74;
            animation: love1 4s infinite;
            animation-delay: 1.2s;
      }

      @keyframes love1 {

            30%,
            50% {
                height: 60px;
                transform: translateY(-30px);
            }

            75%,
            100% {
                height: 20px;
                transform: translateY(0);
            }
      }

      @keyframes love2 {

            30%,
            50% {
                height: 125px;
                transform: translateY(-62.5px);
            }

            75%,
            100% {
                height: 20px;
                transform: translateY(0);
            }

      }

      @keyframes love3 {

            30%,
            50% {
                height: 160px;
                transform: translateY(-75px);
            }

            75%,
            100% {
                height: 20px;
                transform: translateY(0);
            }
      }

      @keyframes love4 {

            30%,
            50% {
                height: 180px;
                transform: translateY(-60px);
            }

            75%,
            100% {
                height: 20px;
                transform: translateY(0);
            }
      }

      @keyframes love5 {

            30%,
            50% {
                height: 190px;
                transform: translateY(-45px);
            }

            75%,
            100% {
                height: 20px;
                transform: translateY(0);
            }
      }
    </style>
    <script>
      $(function () {
            $("#he").show().delay(3000).fadeOut(); //时间设置为3秒
      })
    </script>
放到header.php中</head>结束标签之前，
<div id="he">
      <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
      </ul>
    </div>
放到footer.php中</body>标签之前。

judgecx 发表于 2020-1-16 13:22

longgod 发表于 2020-1-16 12:55
你是想要几秒后动画就消失吧，我改了一下用的jQuery 设置指定秒数(3秒)后隐藏元素。


不用发到style里面吗

longgod 发表于 2020-1-16 14:00

其实这么改有很大的问题，这占用了<ul>和<li>标签，而且每个页面都会有动画。要改成完美效果太麻烦了，你要是会基础的CSS和PHP的话，最好还是改一下CSS代码并且可以使用WordPess自带的jQuery。

judgecx 发表于 2020-1-16 14:02

longgod 发表于 2020-1-16 12:55
你是想要几秒后动画就消失吧，我改了一下用的jQuery 设置指定秒数(3秒)后隐藏元素。


{:1_937:}我放上去了页面也跟着跳的

longgod 发表于 2020-1-16 14:15

你要是只想要首页有动画，一般放在index.php中；文章有动画，一般放在single.pho中；页面有动画，一般放在page.php中。而且如果主题不是按照WordPress官方要求开发的话，可能我刚刚说的就没有效果。所以说很麻烦，没有基础不推荐自己修改，有太多方面要考虑到。

judgecx 发表于 2020-1-16 14:32

longgod 发表于 2020-1-16 14:15
你要是只想要首页有动画，一般放在index.php中；文章有动画，一般放在single.pho中；页面有动画，一般放在p ...

有效果 就是那个动画三秒过后页面还在像心形那样跳着

judgecx 发表于 2020-1-16 14:47

longgod 发表于 2020-1-16 14:15
你要是只想要首页有动画，一般放在index.php中；文章有动画，一般放在single.pho中；页面有动画，一般放在p ...

老哥我把主题包丢给你看看可以么？
或者是你上我服务器帮忙看看
页: [1] 2
查看完整版本: wordpress主题加载动画求助


免责声明：
吾爱破解所发布的一切破解补丁、注册机和注册信息及软件的解密分析文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:Service@52pojie.cn