吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 1484|回复: 10
收起左侧

[求助] 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>

效果如下
1.gif
如果不担心可能会和主题或插件冲突,可以直接将
[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>标签之前。

免费评分

参与人数 1吾爱币 +1 热心值 +1 收起 理由
judgecx + 1 + 1 我很赞同!

查看全部评分

 楼主| 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]

本版积分规则 警告:本版块禁止回复与主题无关非技术内容,违者重罚!

快速回复 收藏帖子 返回列表 搜索

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-3-29 05:11

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表