用 CSS 模仿闪闪发光的水面

现在，我们将为首页的主要文本添加一些亮点，通过将 CSS 动画与之关联，使其在首次打开网站/加载首页时循环显示各种蓝色调。

首先，我将其添加到 Site.css 中

/*In memory of Rory Gallagher*/
.EdgedInBlue {
    color: white;
    font-size: 2em;
    font-family: 'Segoe UI Light', Candara, Consolas, Calibri, sans-serif !important;
    text-shadow: 4px 3px 6px #000000;
    text-shadow: 4px 3px 6px rgba(0, 0, 0, .5);
    display: inline;
    padding-right: 10px;

    animation-name: bluesForRory;
    animation-duration: 5s;
    animation-delay: 2s;
    -moz-animation: bluesForRory 5s 1 linear;
    -o-animation: bluesForRory  5s 1 linear;
    -webkit-animation: bluesForRory 5s 1 linear;
    animation: bluesForRory 5s 1 linear;
}

@-webkit-keyframes bluesForRory {
from {
         color: MidnightBlue;
     }
7% {
        color: Navy;
    }
14% {
        color: Blue;
    }
21% {
        color: DeepSkyBlue;
    }
28% {
        color: SkyBlue;
    }
35% {
        color: LightSkyBlue;
    }
42% {
        color: Aqua;
    }
49% {
        color: PowderBlue;
    }
56% {
        color: Azure;
    }
63% {
        color: PowderBlue;
    }
70% {
        color: Aqua;
    }
77% {
        color: LightSkyBlue;
    }
84% {
        color: SkyBlue;
    }
88% {
        color: DeepSkyBlue;
    }
92% {
        color: Blue;
    }
96% {
        color: Navy;
    }
to {
       color: MidnightBlue;
   }
}

正如你所看到的，我从午夜蓝开始，然后回到午夜蓝，但在循环中穿插各种蓝色调，给每个色调大约相同的时间。

但是，请注意，除了 "@-webkit-keyframes rainbowGlow"，你还需要带有相同的 CSS

@-moz-keyframes bluesForRory, @-o-keyframes bluesForRory, 以及 @keyframes bluesForRory

最后，我在首页上给主要 (H1) 文本添加 "EdgedInBlue" 类，如下所示

Hartt's Pool Plastering

我无法在屏幕截图中真正展示它是如何工作的，因为它稍纵即逝。你可以在我的网站 http://www.awardwinnersonly.com 上看到类似的效果（它会循环显示彩虹的颜色），或者等到这个网站上线后再查看。

尽管如此，这种效果也会给文本添加阴影，所以我将用该效果的“快照”来逗你

现在是一些字体优化

我不太喜欢页面上默认使用的字体，所以我将创建一个或两个 CSS 类，用于稍微美化文本。

最终，我创建了几个 CSS 类。由于两个原因，我不会详细介绍我在哪里应用了哪些类：0) 这会有点无聊，以及 1) 这些都是你应该根据自己的风格、客户的需求、业务的性质（它的“个性”等）自己做出的决定。尽管如此，这里是我添加的 CSS 类

.coolPool {
    color: midnightblue;
    font-family: "Segoe UI", Consolas, sans-serif;
}

.statelyPresence {
    font-family: "Palatino Linotype", "Lucida Sans Unicode", "Lucida Grande", "DejaVu Sans Condensed", sans-serif;
}

.beanies {
    font-variant: small-caps;
}

.whiterShadeOfPale {
    color: White;
}

你可以从我给出的 CSS 类的名称中看出，我很容易被逗乐，或者我喜欢在我的变量/类名中寻找乐趣。各有所好/YMMV。无论如何，这些是我添加的类，然后将它们应用于各种 HTML 标签，以使网站的文本从我的角度/品味上更具吸引力。说到品味，他们在 Marvin Gaye 之前唱了一首歌，题为“发生了什么”

以下是这些更改后的外观示例

启动并运行

该网站已发布到 http://replaster.azurewebsites.net

它仍然需要一些调整，例如更改和添加文本，也许添加一些图像，但总的来说，我认为它已经完成了。要将其与原始网站进行比较，请访问 http://www.replaster.com

再见，感谢所有的鲶鱼

因此，我们史诗般的旅程结束了，进入了 UI 重构的领域，并半盲目地摸索着走向终点。如果你完成了所有七个部分，给自己一个鼓励，或者去照镜子，对第一个出现的人微笑。

如果你错过了它们 - 该系列的前几部分