.cnblogs-markdown .hljs { border: none !important; } #cnblogs_post_body th,
#cnblogs_post_body td, .cnblogs-post-body th, .cnblogs-post-body td { border:
none !important; padding: 0; } .postCon { font-size: 15px; } .cnblogs-markdown
.hljs, .cnblogs-post-body .hljs { font-family: "Consolas",sans-serif
!important; font-size: 15px! important; } .cnblogs-markdown .hljs,
.cnblogs-post-body .hljs { font-family: "Courier New",sans-serif!important;
font-size: 15px!important; line-height: 1.5!important; padding: 5px!important;
} #cnblogs_post_body table, .cnblogs-post-body table { border: none !important;
border-collapse: collapse; word-break: break-word; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 渐变圆环隧道</title>
<style>
body {
    margin: 0;
    overflow: hidden;
}
.tunnel div {
    border-radius: 50%;
    position: absolute;
}
.tunnel .t-0 {
    border: 80px solid;
    width: 560px;
    height: 560px;
    z-index: 15;
    top: 3.33333%;
    left: 37.33333px;
    -webkit-animation: color 5s ease-in 2.25s infinite;
    animation: color 5s ease-in 2.25s infinite;
}
@-webkit-keyframes color {
    25% {
        border-color: #172319;
    }
    50% {
        border-color: #2a4242;
    }
    75% {
        border-color: #2b2f45;
    }
}
@keyframes color {
    25% {
        border-color: #172319;
    }
    50% {
        border-color: #2a4242;
    }
    75% {
        border-color: #2b2f45;
    }
}
.tunnel .t-1 {
    border: 80px solid;
    width: 520px;
    height: 520px;
    z-index: 14;
    top: 6.66667%;
    left: 74.66667px;
    -webkit-animation: color 5s ease-in 2.1s infinite;
    animation: color 5s ease-in 2.1s infinite;
}
@keyframes color {
    25% {
        border-color: #19281b;
    }
    50% {
        border-color: #2c4848;
    }
    75% {
        border-color: #2d324e;
    }
}
.tunnel .t-2 {
    border: 80px solid;
    width: 480px;
    height: 480px;
    z-index: 13;
    top: 10%;
    left: 112px;
    -webkit-animation: color 5s ease-in 1.95s infinite;
    animation: color 5s ease-in 1.95s infinite;
}
@keyframes color {
    25% {
        border-color: #1a2d1e;
    }
    50% {
        border-color: #2d4d4d;
    }
    75% {
        border-color: #2e3556;
    }
}
.tunnel .t-3 {
    border: 80px solid;
    width: 440px;
    height: 440px;
    z-index: 12;
    top: 13.33333%;
    left: 149.33333px;
    -webkit-animation: color 5s ease-in 1.8s infinite;
    animation: color 5s ease-in 1.8s infinite;
}
@keyframes color {
    25% {
        border-color: #1c3220;
    }
    50% {
        border-color: #2f5353;
    }
    75% {
        border-color: #30385f;
    }
}
.tunnel .t-4 {
    border: 80px solid;
    width: 400px;
    height: 400px;
    z-index: 11;
    top: 16.66667%;
    left: 186.66667px;
    -webkit-animation: color 5s ease-in 1.65s infinite;
    animation: color 5s ease-in 1.65s infinite;
}
@keyframes color {
    25% {
        border-color: #1e3722;
    }
    50% {
        border-color: #305858;
    }
    75% {
        border-color: #303a69;
    }
}
.tunnel .t-5 {
    border: 80px solid;
    width: 360px;
    height: 360px;
    z-index: 10;
    top: 20%;
    left: 224px;
    -webkit-animation: color 5s ease-in 1.5s infinite;
    animation: color 5s ease-in 1.5s infinite;
}
@keyframes color {
    25% {
        border-color: #1f3d24;
    }
    50% {
        border-color: #315e5e;
    }
    75% {
        border-color: #313c72;
    }
}
.tunnel .t-6 {
    border: 80px solid;
    width: 320px;
    height: 320px;
    z-index: 9;
    top: 23.33333%;
    left: 261.33333px;
    -webkit-animation: color 5s ease-in 1.35s infinite;
    animation: color 5s ease-in 1.35s infinite;
}
@keyframes color {
    25% {
        border-color: #214226;
    }
    50% {
        border-color: #316464;
    }
    75% {
        border-color: #313e7c;
    }
}
.tunnel .t-7 {
    border: 80px solid;
    width: 280px;
    height: 280px;
    z-index: 8;
    top: 26.66667%;
    left: 298.66667px;
    -webkit-animation: color 5s ease-in 1.2s infinite;
    animation: color 5s ease-in 1.2s infinite;
}
@keyframes color {
    25% {
        border-color: #224828;
    }
    50% {
        border-color: #326a6a;
    }
    75% {
        border-color: #313f87;
    }
}
.tunnel .t-8 {
    border: 80px solid;
    width: 240px;
    height: 240px;
    z-index: 7;
    top: 30%;
    left: 336px;
    -webkit-animation: color 5s ease-in 1.05s infinite;
    animation: color 5s ease-in 1.05s infinite;
}
@keyframes color {
    25% {
        border-color: #234d2a;
    }
    50% {
        border-color: #337171;
    }
    75% {
        border-color: #304191;
    }
}
.tunnel .t-9 {
    border: 80px solid;
    width: 200px;
    height: 200px;
    z-index: 6;
    top: 33.33333%;
    left: 373.33333px;
    -webkit-animation: color 5s ease-in 0.9s infinite;
    animation: color 5s ease-in 0.9s infinite;
}
@keyframes color {
    25% {
        border-color: #24532c;
    }
    50% {
        border-color: #377;
    }
    75% {
        border-color: #30429c;
    }
}
.tunnel .t-10 {
    border: 80px solid;
    width: 160px;
    height: 160px;
    z-index: 5;
    top: 36.66667%;
    left: 410.66667px;
    -webkit-animation: color 5s ease-in 0.75s infinite;
    animation: color 5s ease-in 0.75s infinite;
}
@keyframes color {
    25% {
        border-color: #24592d;
    }
    50% {
        border-color: #337e7e;
    }
    75% {
        border-color: #2e43a8;
    }
}
.tunnel .t-11 {
    border: 80px solid;
    width: 120px;
    height: 120px;
    z-index: 4;
    top: 40%;
    left: 448px;
    -webkit-animation: color 5s ease-in 0.6s infinite;
    animation: color 5s ease-in 0.6s infinite;
}
@keyframes color {
    25% {
        border-color: #255f2f;
    }
    50% {
        border-color: #338484;
    }
    75% {
        border-color: #2d43b4;
    }
}
.tunnel .t-12 {
    border: 80px solid;
    width: 80px;
    height: 80px;
    z-index: 3;
    top: 43.33333%;
    left: 485.33333px;
    -webkit-animation: color 5s ease-in 0.45s infinite;
    animation: color 5s ease-in 0.45s infinite;
}
@keyframes color {
    25% {
        border-color: #266630;
    }
    50% {
        border-color: #338b8b;
    }
    75% {
        border-color: #2b44c0;
    }
}
.tunnel .t-13 {
    border: 80px solid;
    width: 40px;
    height: 40px;
    z-index: 2;
    top: 46.66667%;
    left: 522.66667px;
    -webkit-animation: color 5s ease-in 0.3s infinite;
    animation: color 5s ease-in 0.3s infinite;
}
@keyframes color {
    25% {
        border-color: #266c32;
    }
    50% {
        border-color: #339292;
    }
    75% {
        border-color: #2944cc;
    }
}
.tunnel .t-14 {
    border: 80px solid;
    width: 0px;
    height: 0px;
    z-index: 1;
    top: 50%;
    left: 560px;
    -webkit-animation: color 5s ease-in 0.15s infinite;
    animation: color 5s ease-in 0.15s infinite;
}
@keyframes color {
    25% {
        border-color: #267333;
    }
    50% {
        border-color: #399;
    }
    75% {
        border-color: #2644d9;
    }
}
.tunnel .t-0 {
    z-index: 0;
    border: 999px solid;
    border-radius: 0;
    top: 0;
    left: 0;
}
</style>
</head>
<body>
<div class='tunnel'>
    <div class='t-0'></div>
    <div class='t-1'></div>
    <div class='t-2'></div>
    <div class='t-3'></div>
    <div class='t-4'></div>
    <div class='t-5'></div>
    <div class='t-6'></div>
    <div class='t-7'></div>
    <div class='t-8'></div>
    <div class='t-9'></div>
    <div class='t-10'></div>
    <div class='t-11'></div>
    <div class='t-12'></div>
    <div class='t-13'></div>
    <div class='t-14'></div>
</div>
</body>
</html>