我们新增Dark Mode(暗模式),(只是在晚上)可以改变MAC OS&Windows系统的暗模式实现切换;安卓和苹果手机是一样的。
WordPress

CSS3圆圈加载效果

gyue2345·2015-04-04·566 次阅读··

   2015-04-04 2:14 LJY2345    2 条评论   隐藏边栏   黑色模式    566 
   评分 0 次,平均分 0.0    2 条评论   隐藏边栏   黑色模式

1.在主题根目录下的style.css样式表中添加:

#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); }      

}

 蓝白色应该搭配border:5px solid rgba(0,183,229,0.9)与box-shadow: 0 0 35px #2187e7

2.在header.php的<body></body>区域任意位置添加如下代码:

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

<script type="text/javascript">      

$(window).load(function() {           

$("#circle").fadeOut(500);      

$("#circle1").fadeOut(700);      

});      

</script>

淡出时间500、700毫秒那些可以自己自定义修改。

赞赏

除特别注明外,本站所有文章均为LJY IT BLOG原创,转载请注明出处来自https://www.ljy2345.com/2015/04/css3%e5%9c%86%e5%9c%88%e5%8a%a0%e8%bd%bd%e6%95%88%e6%9e%9c/

博 主作者: 关注:6    粉丝:1最后编辑于:2017年7月20日
LJY IT BLOG的站长。

扫一扫打赏

支付宝扫一扫打赏

微信扫一扫打赏

view comments - 2 comments

Comments | 2 comments

🌙
😃

切换注册
忘记密码 ?

×

您也可以使用第三方帐号快捷登录

切换登录

×
扫一扫二维码分享
下载海报
  切换主题 | SCHEME TOOL