博客园自定义主题代码

body {
    font-family: '微软雅黑';
    background: -webkit-radial-gradient(circle, #FFFFFF, #E8ECF3, #F2F4F5);
    background: -o-radial-gradient(circle, #FFFFFF, #E8ECF3, #F2F4F5);
    background: -moz-radial-gradient(circle, #FFFFFF, #E8ECF3, #F2F4F5);
    background: radial-gradient(circle, #FFFFFF, #E8ECF3, #F2F4F5);
}

#blogTitle {
    display: none;
}

#navList a:hover {
    text-shadow: none;
}

#blogTitle {
    display: none;
}

#main {
    margin: 0 auto;
}

#home {
    padding: 20px 0 0 20px;
}

#footer {
    margin: 2px 0;
    padding: 0;
}

#navigator {
    background: -webkit-linear-gradient(left, #0095FF, #5E0E63);
    background: -o-linear-gradient(right, #0095FF, #5E0E63);
    background: -moz-linear-gradient(right, #0095FF, #5E0E63);
    background: linear-gradient(to right, #0095FF, #5E0E63);
    -webkit-animation: fadeinB 1s ease-out backwards;
    -moz-animation: fadeinB 1s ease-out backwards;
    -ms-animation: fadeinB 1s ease-out backwards;
    animation: fadeinB 1s ease-out backwards;
}

.day {
    margin-bottom: 10px;
}

#widget_my_zzk {
    padding: 15px 0 15px 15px;
    border: 1px solid #dedede;
    margin: 0!important;
}

#blog-calendar {
    border: 1px solid #dedede;
    padding: 15px;
}

#mainContent {
    -webkit-animation: fadeinL 1s ease-out backwards;
    -moz-animation: fadeinL 1s ease-out backwards;
    -ms-animation: fadeinL 1s ease-out backwards;
    animation: fadeinL 1s ease-out backwards;
}

@-webkit-keyframes fadeinL {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-200px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes fadeinL {
    0% {
        opacity: 0;
        -moz-transform: translateX(-200px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-ms-keyframes fadeinL {
    0% {
        opacity: 0;
        -ms-transform: translateX(-200px);
    }
    100% {
        opacity: 1;
        -ms-transform: translateX(0);
    }
}

@keyframes fadeinL {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

#sideBar {
    -webkit-animation: fadeinR 1s ease-out backwards;
    -moz-animation: fadeinR 1s ease-out backwards;
    -ms-animation: fadeinR 1s ease-out backwards;
    animation: fadeinR 1s ease-out backwards;
}

@-webkit-keyframes fadeinR {
    0% {
        opacity: 0;
        -webkit-transform: translateX(150px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes fadeinR {
    0% {
        opacity: 0;
        -moz-transform: translateX(150px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-ms-keyframes fadeinR {
    0% {
        opacity: 0;
        -ms-transform: translateX(150px);
    }
    100% {
        opacity: 1;
        -ms-transform: translateX(0);
    }
}

@keyframes fadeinR {
    0% {
        opacity: 0;
        transform: translateX(150px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes fadeinB {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-80px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeinB {
    0% {
        opacity: 0;
        -moz-transform: translateY(-80px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-ms-keyframes fadeinB {
    0% {
        opacity: 0;
        -ms-transform: translateY(-80px);
    }
    100% {
        opacity: 1;
        -ms-transform: translateY(0);
    }
}

@keyframes fadeinB {
    0% {
        opacity: 0;
        transform: translateY(-80px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#under_post_news,
#ad_c1,
#ad_t2,
#blog-comments-placeholder,
#under_post_kb,
.c_ad_block {
    display: none;
}

#home #header {
    display: none;
}

#header {
    width: 100%;
    margin: 0 auto;
    min-width: 1220px;
}

::-webkit-scrollbar {
    width: 2px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background-color: #EEE5EF;
}


/* 滚动条的滑轨背景颜色 */

::-webkit-scrollbar-thumb {
    background-color: #169fe6;
}


/* 滑块颜色 */

::-webkit-scrollbar-button {
    height: 0px;
    background-color: #EEE5EF;
}


/* 滑轨两头的监听按钮颜色 */

::-webkit-scrollbar-corner {
    background-color: #EEE5EF;
}


/*常用链接 */

.catList ul li {
    display: inline-block;
    width: 40%;
    padding: 10px;
    text-align: center;
}

.sidebar-block ul li a {
    display: inline-block;
}

.sidebar-block ul li a:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    text-indent: 2px;
}

.newsItem {
    display: none;
}

.music {
    position: absolute;
    right: 30px;
}

.music img {
    width: 30px;
    margin-top: 15px;
    -webkit-animation: musicPlay 2s linear 0s infinite normal;
    animation: musicPlay 2s linear 0s infinite normal;
    cursor: pointer;
}


/* animate 音乐播放旋转360°*/

@-webkit-keyframes musicPlay {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@keyframes musicPlay {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

#scrollUp {
    width: 46px;
    height: 46px;
    bottom: 100px;
    right: 10px;
    background: #1f7b9b url(http://images.cnblogs.com/cnblogs_com/twobin/520730/o_icon.png) no-repeat 8px -150px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    font-family: sans-serif;
    text-decoration: none;
    opacity: .9;
}

#scrollUp:hover {
    background: #ff7227 url(http://images.cnblogs.com/cnblogs_com/twobin/520730/o_icon.png) no-repeat 8px -150px;
}

@media screen and (min-width: 1px) and (max-width: 800px) {
    #sideBar {
        width: 100%;
        position: static;
        width: 100%;
        display: none;
    }
    #mainContent,
    #main,
    #navList {
        width: 100%
    }
    #home {
        padding: 20px 10px 0;
    }
    #header {
        min-width: 100%;
    }
    #mainContent {
        padding-left: 0;
        padding-right: 0;
        width: 98%;
    }
    table {
        width: 100%
    }
    div.commentform textarea {
        width: 100%
    }
    .commentbox_title_right {
        display: none;
    }
    img {
        max-width: 100%!important;
    }
}

#randomMusic {
    display: block;
    position: fixed;
    width: 46px;
    height: 46px;
    bottom: 150px;
    right: 10px;
    z-index: 2147483647;
}

#randomMusic img {
    width: 100%;
    cursor: pointer;
}

#randomMusic:active {
    transform: scale(0.9)
}

HTML页首

<div id="header">
    <div id="blogTitle">
        <a id="lnkBlogLogo" href="http://www.cnblogs.com/winyou/"><img id="blogLogo" src="http://i.cnblogs.com/Skins/custom/images/logo.gif" alt="返回主页"></a>
        <!--done-->
        <h1><a class="headermaintitle" id="Header1_HeaderTitle" href="http://www.cnblogs.com/winyou/">VinceChueng</a></h1>
        <h2></h2>
    </div>
    <!--end: blogTitle 博客的标题和副标题 -->
    <div id="navigator">
        <ul id="navList">
            <li></li>
            <li><a class="menu" id="MyLinks1_MyHomeLink" href="http://www.cnblogs.com/winyou/">首页</a></li>
            <li><a class="menu" id="MyLinks1_MyHomeLink" href="http://yangchueng.github.io/" target="_blank">Github</a></li>
            <li><a class="menu" id="MyLinks1_MyHomeLink" href="http://yangchueng.github.io/html/personal/index.html" target="_blank">关于我</a></li>
            <li><a class="menu" id="MyLinks1_Admin" rel="nofollow" href="http://i.cnblogs.com/">管理</a></li>
            <li class="music"><img src="http://images.cnblogs.com/cnblogs_com/winyou/826990/t_music.png"></li>
        </ul>
        <div class="blogStats">
            <span id="stats_post_count">随笔 - 2  </span>
            <span id="stats_article_count">文章 - 0  </span>
            <span id="stats-comment_count">评论 - 0</span>
        </div>
        <!--end: blogStats -->
    </div>
    <!--end: navigator 博客导航栏 -->
</div>

HTML页脚

<a id="randomMusic"><img src="http://images.cnblogs.com/cnblogs_com/winyou/826990/o_random.png" /></a>
<a id="scrollUp" href="#top" title="回到顶部" style="position: fixed; z-index: 2147483647; display: block;"></a>
<script>
$(".music img").on("click", function(e) {
    var musicElement = this;
    var musicPlayElement = $("#music")[0];
    if (musicPlayElement.paused) {
        musicPlayElement.play();
        musicElement.style.webkitAnimationPlayState = "running";
    } else {
        musicPlayElement.pause();
        musicElement.style.webkitAnimationPlayState = "paused";
    }
});

var musicList = ["http://tsmusic24.tc.qq.com/441035.mp3",
    "http://www.xuenb.com/tools/mp3/c105602723.mp3?906037",
    "http://www.xuenb.com/tools/mp3/c102636799.mp3?276699",
    "http://www.xuenb.com/tools/mp3/c105393664.mp3?970873",
    "http://www.xuenb.com/tools/mp3/c101847263.mp3?413398",
    "http://www.xuenb.com/tools/mp3/c236105.mp3?410719",
    "http://www.xuenb.com/tools/mp3/c5032571.mp3?430688",
    "http://www.xuenb.com/tools/mp3/c105639066.mp3?552517",
    "http://www.xuenb.com/tools/mp3/c105518511.mp3?336460",
    "http://www.xuenb.com/tools/mp3/c1535302.mp3?721532",
    "http://www.xuenb.com/tools/mp3/c102382946.mp3?775175",
    "http://www.xuenb.com/tools/mp3/c104922178.mp3?915722",
    ""
];

$("#randomMusic").on("click", function(e) {
    var index = parseInt(Math.random() * 10),
        $audio = $("#music");
    var item = musicList[index];
    $audio.attr("src", item);
    $audio[0].play();
});

window.onload = function() {
    setTimeout(function() {
        var index = parseInt(Math.random() * 10),
            $audio = $("#music");
        console.log($("#music")[0]);
        var item = musicList[index];
        $audio.attr("src", item);
        $audio[0].play();
    }, 4500);

};

var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'initialwidth=device-width,initial-scale=1');
document.getElementsByTagName('head')[0].appendChild(meta);
</script>

媒体元素

<audio id="music" src="" preload="none"></audio>

posted @ 2016-05-10 13:55 VinceChueng 阅读(346) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

YangChueng's Blog

VinceChueng

博客园自定义主题代码

公告