下面我们可以使用 CSS 做点有意思的事情，去为播放器的视频封面添加一点过渡的效果 ..

CSS 过渡效果就是从一种样式，过渡到另一种样式，过渡的时候会使用一个动画效果。

我们可以在播放器容器上面的 .ninghao-player 这个类上，设置过渡的初始的样式 … 然后在 .is-poster 这个类上，去设置过渡到的最终的样式 …

因为最开始播放器不会使用 .is-poster 这个类 .. flowplayer 只有在确定我们为视频添加了视频封面以后，才会在播放器的容器上添加这个类 …

所以这个过渡效果才会有效 …

先打开自定义的样式表 … 在 .ninghao-player 上，我们再设置一下背景的尺寸 … background-size … 设置为 50% …

另起一行再设置一下背景的位置 … background-position … 水平位置设置为 50% … 垂直位置设置为 -100% ..

background-position: 50% -100%;

这样，背景图像会跑到播放器容器以外显示 …

下面我们再设置一下过渡到的最终的样式 …

我们用 .is-poster 作为样式的选择器 …

.is-poster {
background-size:100%;
background-position: 50% 50%;
}

背景尺寸设置为 100% … 再设置一下背景位置 … 水平是 50% … 垂直位置是 50% …

最后我们再设置一下过渡的效果 …

在这个 .ninghao-player 上 … 使用 transition …

首先我们要指定想要过渡显示的属性 … 这里我们要过渡显示的是背景 … 所以可以设置成 background …

然后是过渡效果持续的时间 … 设置为 1s .. 也就是 1 秒钟的时候 … 我们还可以设置一下显示过渡效果的延时 … 设置为 .5s …

也就是 0.5 秒之后再去过渡 …

保存 … 回到浏览器上看一下 …

0.5 秒以后，视频封面会从播放器的最上面 ，大小是 50% ，过渡到播放器容器的中间，大小会变成 100% …

过渡的时候会使用一种动画效果 ….