漫长的第四回合

"欢迎回来,各位运动迷们!这里是赫尔墨斯·伊瓦利斯塔,一如既往,陪着我的是欧帕西亚·卡珊德洛斯。如果你打算加入我们,目前的比分是24-28,我们已经进入了这场Alexylva大学西哥特人队,和马其顿王国勇士队之间的劲爆比赛的第四回合,两分钟警告时间。在我们回到比赛之前,欧帕西亚,我想今晚的焦点一定是Alexylva大学的大二学生,Cron Apostolou无与伦比的进攻技巧。"

"没错,小赫。听着,这孩子整晚都像着了火似的。他势不可挡,冲了275码,两次触地得分。场上马其顿王国的防守队员现在简直懵了,他们完全无法弄清他到底是何方神圣。”

"但我们也别忘了大三跑卫JaMarcus Aurelius的运动才能与魔法手艺。今晚他跑了几乎150码,亮点是触地得分前的45码冲刺,过程中他徒手将马其顿王国队的所有第二防卫都变成了蛤蟆。他的确不一般啊。"

"没错。如果你了解不多的话,你估计根本不会想到,仅仅三年前,Aurelius只是名临时队员而已。自从那时起,他每季都会刷新纪录。真真切切是场上的一股自然之力。"

"但Alexylva依然对另一队有所顾虑。马其顿王国的万用近端锋,Darius Lykos,已经三次触地得分。至高长者,Panagakos教练在下周末大会开幕式上,对战耶鲁牛头犬队之前,可得好好做些研究咯。"

"好哇,我们已经准备好继续比赛了。球在Alexylva大学的19码线上,第一档进攻开始,还有十码。Apostolou重新占据主攻位置,左翼有两名接球员,Aurelius殿后。球被抢走了…右翼受到压制,Aurelius成功使用咒术摆脱了他们!Apostolou向左急转,看看,他躲过了!Nereus抢到了球,对第一档进攻来说超出预期,现在他们的得分是31。时钟滴答作响,而至高长者,Panagakos教练现在只剩下一次暂停时间了。“

"这时可得小心啊,小赫。你如果想在场上速战速决,就不能犯下低级错误,把球拱手让人。你只需要始终如一地进攻,稳步前进,或许我们的大二新星还会展现一下他的英雄本色呢。”

"Apostolou依然打前锋,动作完美,像个真男人。看来防守方那边有些拖曳了,Aurelius现在正向左转。快传给Apostolou,他左右扫视,往中间射击,然后…不妙。那边没有他的队友。"

"看上去像是给Lason的短传,但他就是没法一步到位。太可惜了,看到这位几乎整个下午都是赛场之光的球员,做出这么拙劣的一次投球。"

"现在时间还剩下1分42秒, Apostolou从场中央钻了出来。他右边带着个人,第二档攻击开始,还有十码。传球时间到,Apostolou抢到了球!此刻他正向右跑,看起来想要试着亲自撞线。哦哦,遭到马其顿王国方的防守组的撞击,这一下子Cron可真是被撞得不轻啊。裁判出来了,看看他有没有得分。他们在测量,测量…看起来他的确成功了!勉勉强强,但我想他得分了!"

"小赫,这就是你希望在四分卫身上看到的魄力。一次传球失败,但毫不在意,专注于最终的奖励,继续向前冲锋。"

"时钟依然滴答作响,我们还剩下1分15秒。Apostolou重回赛场, 防守方似乎正在召唤雷电,我不知道他看没看到。开球给Apostolou,手递手传球时间到!Aurelius向左转,左转,现在他正在线上边卫迂回,有着足够的空间!他跑了50码,45码,然后被拖在了马其顿王国队的42码线上。神呐,这孩子真是行走如飞。他们得加快动作,时间不等人啊。Apostolou跑到了线上,身边有着飞翔的接球员。对,你没听错,接球员长出双翼,飞到了天上。看起来马其顿王国队准备使用渔叉反击了,让我们看看结果如何。还剩56秒,球被抢走了。Apostolou左顾右盼,锁定一名队友,然后猛力一掷,宙斯在上,这球投得真妙!球在Lason手上,他躲过一支渔叉,又一支,看起来安全卫正在召唤火球,没错,的确是这样。Lason落地了,他能触到球场边线吗?我看不行。虽然对于第一档进攻来说算不错了,差一点点,我们就能冲过马其顿王国队的29码线。

"你真的很想看到这种积极进攻,小赫。Lason注意到了袭来的火球,只多花了点力气,便赢得了额外的码数。教练们就喜欢这股精神。"

"我们现在还剩下37秒,Apostolou正在盯着边线。Alexylva大学耐克体育馆内的人群,已经在高声咆哮了。时间过得飞快,小伙子们,快加把劲儿吧。我想Cron似乎听不到边线那头的人!他在打手势,看起来准备独自主导进攻,而他的确这么做了。开球传给Apostolou,接着他传给了后卫区的Kallias。Kallias向左跑去,结果完全被王国队的边锋压垮了,可能还丢了一码。这可不是你希望看到的情形。"

"没错,我也不知道这是有意为之,还是他们只希望继续前行,但这完完全全没必要。"

"Apostolou再次得球,正在向右看。第二档进攻,还剩25秒,他试了一次… 不妙。还是不该强行传球啊,Cron。第三档进攻,还有11码,比赛计时剩下22秒。看起来他们在暂停后挣到了两三档进攻机会,让我们翘首以待吧。Apostolou回到前锋位置,左翼有两名接球员,右翼有一名。Aurelius回到他身边助攻,看起来王国队的防守方正在15码线上召唤古神。那是……没错,是摩亚,荒凉孤寂之神。这可是一个全新的障碍啊,欧帕希亚。"

"对哇,你没法真的为古神做好准备,小赫。Alexylva只能快点找出突破难关,冲进球门区的窍门了。”

"Apostolou正站在中场, 他抢到了球,手递手传球给- 不,他正在带球向左转!Apostolou看向左方,王国队的防守方在线上,现在……他把球抛给了Aurelius!Aurelius向右急转,赢来了一些空间,正在奔向球场边线。我不知道他能否成功,那边摩亚又来了。不,他只差一点就被叫停了,而现在至高长者,Panagakos教练用完了Alexylva队的最后一次暂停时间。还剩十秒,第四档进攻,在马其顿王国队的20码线上,还有1码。我觉得Apostolou在这次进攻中必须得进入球门区了,欧帕西亚。"

"他的确得这么做,小赫。加上第二防卫上的摩亚,荒凉孤寂之神,目前的情况对这位年轻的四分卫来说相当严峻啊。"

"Alexylva队从混乱中脱身,现在看起来他们的队形换成了四接球员齐出,右边三个,左边一个,Apostolou打前锋。这里已经一团乱了,伙计们,成败就在此刻。Apostolou回来了,他正在向左打手势。看来王国队准备再次召唤雷电,而摩亚依然死死盯着码线。传球时间到,Apostolou接到了球!他正往右疾奔,而球场上又多出了一个咒术。看起来像是沼泽恶疾,足以成为他们的绊脚石。Cron正在跑,他奔过了15码线,接着是10码,摩亚来了!Apostolou向右急转,又袭来了一个火球!他俯身躲避,侧滑过转角,赢来不少活动的余地!Apostolou的对手只剩下一人!他…他成功了!Cron Apostolou成功了!他进到了球门区!秒表计时已经归零,而Cron Apostolou,来自乔治亚州,雅典市的大二四分卫,成功逆转战局,为Alexylva赢得了一分!多么精彩的球赛,多么精彩的进攻!施法者已经来到了场地上,他们正在重新封印古神。Ramos又勇往直前,得了额外的一分,这是好事!哨声已经响起,今天的比赛就到这里了!最终比分,Alexylva大学西哥特人队31分, 马其顿王国勇士队28分。"

-◬-

中心 - 赛后

:root {
    --timeScale: 1;
    --timeDelay: 0s;
}
 
/* Converting middle divider from box-shadow to ::before pseudo-element */
.anom-bar > .bottom-box { box-shadow: none!important; }
.anom-bar > .bottom-box::before {
    position: absolute;
    content: " ";
    width: 100%;
    height: 0.5rem;
    background-color: rgb(var(--black-monochrome, 12, 12, 12));
    transform: translateY(-0.74rem);
}
 
/* DIVIDER */
.anom-bar > .bottom-box::before {
    animation-name: divider;
    animation-duration: calc(0.74s * var(--timeScale));
    animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
}
 
/* CLASSIFIED LEVEL BARS */
div.top-center-box  > * {
    animation-name: bar;
    animation-duration: calc(0.45s * var(--timeScale));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
div.top-center-box > :nth-child(1) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(2) { animation-delay: calc(0.32s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(3) { animation-delay: calc(0.45s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(4) { animation-delay: calc(0.61s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(5) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(6) { animation-delay: calc(0.95s * var(--timeScale) + var(--timeDelay)); }
 
/* TOP TEXT */
div.top-left-box, div.top-right-box {
    clip-path: polygon( 0% -50%, 150% -50%, 150% 100%, 0% 100%);
}
 
div.top-left-box > *, div.top-right-box > * {
    position: relative;
    animation-name: bottomup;
    animation-duration: calc(0.65s * var(--timeScale));
    animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/* CONTAINMENT, DISRUPTION, RISK CLASSES */
div.text-part > * {
    clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%);
    animation-name: expand2;
    animation-duration: calc(0.5s * var(--timeScale));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
div.text-part > :nth-child(1) {
    animation-name: expand1;
}
div.text-part > :nth-child(1) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }
div.text-part > :nth-child(2) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }
div.text-part > :nth-child(3) { animation-delay: calc(0.86s * var(--timeScale) + var(--timeDelay)); }
 
div.main-class::before, div.main-class::after {
    animation-name: iconslide;
    animation-duration: calc(0.45s * var(--timeScale));
    animation-delay: calc(0.8s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 /* BOTTOM TEXT */
div.main-class > *,  div.disrupt-class > *, div.risk-class > * {
    white-space: nowrap;
    animation-name: flowIn;
    animation-duration: calc(0.42s * var(--timeScale));
    animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/* DIAMOND */
div.arrows {
    animation-name: arrowspin;
    animation-duration: calc(0.7s * var(--timeScale));
    animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 
div.quadrants > * {
    animation-name: fade;
    animation-duration: calc(0.3s * var(--timeScale));
    animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 
div.top-icon, div.right-icon, div.left-icon, div.bottom-icon {
    animation-name: nodegrow;
    animation-duration: calc(0.4s * var(--timeScale));
    animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
div.diamond-part {
    clip-path: polygon( -10% 0.37%, 120% 0.37%, 120% 100%, -10% 100%);
    animation-name: diamondBorder;
    animation-duration: calc(0.8s * var(--timeScale));
    animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
    will-change: box-shadow;
}
 
/* MOBILE QUERY */
@media (max-width: 480px ) {
    .anom-bar > .bottom-box::before {
        display:none;
    }
    .anom-bar > .bottom-box {
        box-shadow: 0 -0.5rem 0 0 rgb(var(--black-monochrome, 12, 12, 12))!important;
    }
    div.top-center-box  > * {
        animation-name: bar-mobile;
        animation-duration: calc(0.9s * var(--timeScale));
    }
    div.top-center-box > :nth-child(1) { animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(2) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(3) { animation-delay: calc(0.3s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(4) { animation-delay: calc(0.4s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(5) { animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(6) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }
 
}
 
/*--- Motion Accessibility ---*/
@media screen and (prefers-reduced-motion: reduce) { 
    div.anom-bar-container { --timeScale: 0!important; }
}
 
/*-------------------------*/
 
@keyframes divider {
    from { max-width: 0%;  }
    to { max-width: 100%; }
}
 
@keyframes bar {
    from { max-width: 0%; }
    to { max-width: 100%; }
}
@keyframes bar-mobile {
    from { max-height: 0%; }
    to { max-height: 100%; }
}
 
@keyframes bottomup {
    from { top: 100px; }
    to { top: 0; }
}
 
@keyframes expand1 {
    from { opacity: 0; clip-path: inset(0 calc(100% - 0.75rem) 0 0); }
    to { opacity: 1; clip-path: inset(0); }
}
@keyframes iconslide {
    from { opacity: 0; transform: translateX(-5rem); }
    to { opacity: 1; transform: translateX(0); }
}
 
@keyframes expand2 {
    from { opacity: 0; width: 1%; }
    to { opacity: 1; width: calc(100% - 0.25rem); }
}
@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
 
@keyframes flowIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
 
@keyframes arrowspin {
    from { clip-path: circle(0%); transform: rotate(135deg); }
    to { clip-path: circle(75%); transform: rotate(0deg); }
}
@keyframes nodegrow {
    from { transform: scale(0);}
    to {  transform: scale(1);}
}
@keyframes diamondBorder {
    from { box-shadow: -0.5rem -20rem 0 0 rgb(var(--black-monochrome, 12, 12, 12)); }
    to { box-shadow: -0.5rem 0 0 0 rgb(var(--black-monochrome, 12, 12, 12)); }
}

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License