wordpress主题加载动画求助

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

[HTML] 纯文本查看 复制代码

<!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秒)后隐藏元素。

[HTML] 纯文本查看 复制代码

<!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>

效果如下

如果不担心可能会和主题或插件冲突，可以直接将

[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>结束标签之前，

[HTML] 纯文本查看 复制代码

<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秒)后隐藏元素。
[mw_shl_code=html,tr ...

不用发到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秒)后隐藏元素。
[mw_shl_code=html,tr ...

我放上去了页面也跟着跳的

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 ...

老哥我把主题包丢给你看看可以么？
或者是你上我服务器帮忙看看

帐号		自动登录	找回密码
密码			注册[Register]

[求助] wordpress主题加载动画求助

免费评分