Html 剪辑动画div

我试图在CSS中使用动画创建一个很好的旧CRT“tv”效果，但是在预期div的上方和下方显示扫描线时出现了一些问题

我拥有的是一个登录页，它有4个div链接到站点的其他区域。前两个分区是“电视”，每个分区都有一个背景，显示链接内容的“电视”（静态图像）

在桌面或其他较大屏幕上，4个div显示为2x2，在较小屏幕上以1x4格式显示

我已经创建了一个单一的图像，将与css动画，以伪造移动扫描线向下移动的前2个div

发生的情况是，“扫描线”出现在“电视”上方，并移动到“电视”下方

您可以看到JSFIDLE上发生了什么：

以下是一些经过清理的HTML代码：

<a href="URL1" target="_blank">
    <div class="content" id="outside">
        <div class="scanlines">
            <div class="aniscan" id="aniscanout">
            </div>
            <div class="aniscan" id="aniscanout2">
            </div>
        </div>
    </div>
</a>
<a href="URL2" target="_blank">
    <div class="content" id="inside">
        <div class="scanlines">
            <div class="aniscan" id="aniscanin">
            </div>
            <div class="aniscan" id="aniscanin2">
            </div>
        </div>
    </div>
</a>

我曾考虑过在两台电视机上下制作一个z-index div更高的“窗口”，但在响应性设计方面效果并不理想

任何帮助都将不胜感激

---

另外，如果我也能在圆角后面获得扫描线，那就太好了，但它并不是真正的交易破坏者-我总是可以删除圆角。

您需要

溢出：隐藏在
中。内容
类：

像这样：

.content{
    width: 300px;
    min-width: 300px;
    height: 125px;
    min-height: 125px;
    float:left;
    margin: 5px;
    border: 3px solid #555555;
    z-index: -100;
    overflow: hidden;
}

小提琴：
谢谢绿辣椒！先生，你让我高兴极了！
.content{
    width: 300px;
    min-width: 300px;
    height: 125px;
    min-height: 125px;
    float:left;
    margin: 5px;
    border: 3px solid #555555;
    z-index: -100;
    overflow: hidden;
}