WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › 实现圆圈状CSS3的酷炫加载状态

实现圆圈状CSS3的酷炫加载状态

PCDotFan10年前

这是一个非常帅的加载状态,可在网站页面加载时显示,加载后淡出。

 

蓝色小圈加载样式

1. 将 CSS 样式表代码插入 Style.css 主题文件中

#circle {
        background-color: rgba(0,0,0,0);
        border:5px solid rgba(0,183,229,0.9);
        opacity:.9;
        border-top:5px solid rgba(0,0,0,0);
        border-left:5px solid rgba(0,0,0,0);
        border-radius:50px;
        box-shadow: 0 0 35px #2187e7;
        width:30px;
        height:30px;
        margin:0 auto;
        -moz-animation:spin .5s infinite linear;
        -webkit-animation:spin .5s infinite linear;
        -o-animation:spin .5s infinite linear;
        -ms-animation:spin .5s infinite linear;
        position:fixed;
        left:20px;
        bottom:20px;
}
#circle1 {
        background-color: rgba(0,0,0,0);
        border:5px solid rgba(0,183,229,0.9);
        opacity:.9;
        border-top:5px solid rgba(0,0,0,0);
        border-left:5px solid rgba(0,0,0,0);
        border-radius:50px;
        box-shadow: 0 0 15px #2187e7;
        width:10px;
        height:10px;
        margin:0 auto;
        position:fixed;
        left:30px;
        bottom:30px;
        -moz-animation:spinoff .5s infinite linear;
        -webkit-animation:spinoff .5s infinite linear;
        -o-animation:spinoff .5s infinite linear;
        -ms-animation:spinoff .5s infinite linear;
}
@-moz-keyframes spin {
        0% { -moz-transform:rotate(0deg); }
        100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
        0% { -moz-transform:rotate(0deg); }
        100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
        0% { -webkit-transform:rotate(0deg); }
        100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
        0% { -webkit-transform:rotate(0deg); }
        100% { -webkit-transform:rotate(-360deg); }
}
@-o-keyframes spin {
        0% { -o-transform:rotate(0deg); }
        100% { -o-transform:rotate(360deg); }
}
@-o-keyframes spinoff {
        0% { -o-transform:rotate(0deg); }
        100% { -o-transform:rotate(-360deg); }
}
@-ms-keyframes spin {
        0% { -ms-transform:rotate(0deg); }
        100% { -ms-transform:rotate(360deg); }
}
@-ms-keyframes spinoff {
        0% { -ms-transform:rotate(0deg); }
        100% { -ms-transform:rotate(-360deg); }
}

 

2. 在 header.php 中加入

<div id="circle"></div> <div id="circle1" ></div>

 

3. 在 footer.php 中加入

<script type="text/javascript">
$(window).load(function() {
$("#circle").fadeOut(500);
$("#circle1").fadeOut(700);
});
</script>

注:可别忘了加载 jQuery 库哦!

 

黑 / 蓝色大圈加载样式

实现圆圈状CSS3的酷炫加载状态-WP酷

 实现圆圈状CSS3的酷炫加载状态-WP酷

1. 将 CSS 样式表代码插入 Style.css 主题文件中(若需实现蓝色大圈效果,请自行修改以下代码,蓝白色应该搭配 rgba(0,183,229) 与 #2187e7)

#circle {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(10,10,10,0.9);
    opacity:.9;
    border-right:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #808080;
    width:50px;
    height:50px;
        margin:0 auto;
    position:fixed;
        left:30px;
        bottom:30px;
    -moz-animation:spinPulse 1s infinite ease-in-out;
    -webkit-animation:spinPulse 1s infinite ease-in-out;
    -o-animation:spinPulse 1s infinite ease-in-out;
    -ms-animation:spinPulse 1s infinite ease-in-out;

}
#circle1 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(20,20,20,0.9);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #202020;
    width:30px;
    height:30px;
        margin:0 auto;
        position:fixed;
        left:40px;
        bottom:40px;
    -moz-animation:spinoffPulse 1s infinite linear;
    -webkit-animation:spinoffPulse 1s infinite linear;
    -o-animation:spinoffPulse 1s infinite linear;
    -ms-animation:spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050;}
    50% { -moz-transform:rotate(145deg); opacity:1; }
    100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
    50% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}
@-o-keyframes spinPulse {
    0% { -o-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
    50% { -o-transform:rotate(145deg); opacity:1;}
    100% { -o-transform:rotate(-320deg); opacity:0; }
}
@-o-keyframes spinoffPulse {
    0% { -o-transform:rotate(0deg); }
    100% { -o-transform:rotate(360deg); }
}
@-ms-keyframes spinPulse {
    0% { -ms-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
    50% { -ms-transform:rotate(145deg); opacity:1;}
    100% { -ms-transform:rotate(-320deg); opacity:0; }
}
@-ms-keyframes spinoffPulse {
    0% { -ms-transform:rotate(0deg); }
    100% { -ms-transform:rotate(360deg); }
}

 

2. 在 header.php 中加入

<div id="circle"></div> <div id="circle1" ></div>

 

3. 在 footer.php 中加入

<script type="text/javascript">
$(window).load(function() {
$("#circle").fadeOut(500);
$("#circle1").fadeOut(700);
});
</script>
#CSS3#yufengs#加载效果
6
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (11)
再想想
  • 螳螂虾

    这么好的东东竟然没人顶?沙个发,赶紧去试试。

    10年前
    • WP酷

      @螳螂虾 去试试吧~

      10年前
    • 红色石头

      @螳螂虾 哈哈,我说我是在哪看到的,原来是在这里看到的,记错了~

      10年前
  • 静鹰

    大哥,如何让只他显示在还没加载完的地方,想你的那要,不要显示在旁边。

    9年前
    • WP酷

      @静鹰 哦哦没加载完的地方吗?直接启用simple lazyload插件,然后把插件里面的loading.gif替换掉就好

      9年前
    • 静鹰

      @WP酷 还要安装插件?

      9年前
    • 静鹰

      @静鹰 你用的插件,在文章说的不是不用插件吗?

      9年前
    • WP酷

      @静鹰 两个不是一种性质,本篇文章说的是在页面加载时显示一个圆圈状加载状态;我的那个是在图片加载时显示圆圈状加载状态

      9年前
    • 静鹰

      @WP酷 哦,模板了。

      9年前
    • 静鹰

      @静鹰 明白了

      9年前
    • 静鹰

      @静鹰 你的加载特效是用插件实现的吗?

      9年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
日月交替特效 给网站添加华丽时钟
10年前
如何为WordPress博客完整搬家
10年前
建立一个WP博客需要什么?
10年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1