Question

我试图创造一个漂亮的旧CRT＆＃34; tv＆＃34;在CSS中使用动画效果，但是在显示目标div上方和下方的扫描线有一些问题。

我所拥有的是一个目标网页，其中有4个div链接到该网站的其他区域。前2个div是＆＃34; TV＆＃34;每个都有一个背景显示＆＃34; tv＆＃34; （静态图像）链接的内容。

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

我创建了一个单独的图像，用css动画来伪造移动的扫描线向下移动到前2个div。

正在发生的事情是＆＃34; scanlines＆＃34;出现在＆＃34; TV＆＃34;并转移到＆＃34; TV＆＃34;。

之下

你可以看到JSFiddle上发生了什么： http://jsfiddle.net/blyzz/ynekxcud/2/

这里有一些已清理的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>

和随附的清理CSS：

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

.scanlines{
    width: 100%;
    height: 100%;
    background-repeat: repeat;
    z-index: 100;
}

.aniscan{
    width: 100%;
    height: 100%;
    background-image: url('http://www.oocities.org/~special_effect/holo_scanlines.jpg');
    background-repeat: repeat-x;
    z-index: 200;
    position: relative;
    opacity:0.6;
}

#inside {   
    background-image: url('http://www.clipartbest.com/cliparts/xig/7rM/xig7rMriA.png');
    border-radius: 0px 15px 0px 0px;
}

#outside{
    background-image: url('http://cdn.graphicsfactory.com/clip-art/image_files/image/6/1347556-2587-Royalty-Free-Dog-With-Big-Bone-In-Mouth.jpg');
    border-radius: 15px 0px 0px 0px;
}

#aniscanin{
    -webkit-animation: mymove 5.2s linear infinite;
    -moz-animation: mymove 5.2s linear infinite;
    -o-animation: mymove 5.2s linear infinite;
    animation: mymove 5.2s linear infinite;
}

#aniscanin2{
    -webkit-animation: mymoveb 5.2s linear infinite;
    -moz-animation: mymoveb 5.2s linear infinite;
    -o-animation: mymoveb 5.2s linear infinite;
    animation: mymoveb 5.2s linear infinite;
}

#aniscanout{
    -webkit-animation: mymove 4.8s linear infinite;
    -moz-animation: mymove 4.8s linear infinite;
    -o-animation: mymove 4.8s linear infinite;
    animation: mymove 4.8s linear infinite;
}

#aniscanout2{
    -webkit-animation: mymoveb 4.8s linear infinite;
    -moz-animation: mymoveb 4.8s linear infinite;
    -o-animation: mymoveb 4.8s linear infinite;
    animation: mymoveb 4.8s linear infinite;
}

@-webkit-keyframes mymove {
    0% {top: -125px;}
    100% {top: 0px;}
}

@keyframes mymove {
    0% {top: -125px;}
    100% {top: 0px;}
}

@-webkit-keyframes mymoveb{
    0% {top: -125px;}
    100% {top: 0px;}
}

@keyframes mymoveb {
    0% {top: -125px;}
    100% {top: 0px;}
}

我考虑过制作一个＆＃34;窗口＆＃34;在两台电视机的上方和下方都有更高的z-index div，但它在响应式设计方面并不能很好地工作。

任何帮助将不胜感激！

P.S。如果我能够在圆角后面获得扫描线，那就太好了，但它并不是真正的交易破坏者 - 我总能去除圆角。

Answer 1

overflow: hidden课程中需要.content：

像这样：

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

小提琴： http://jsfiddle.net/ynekxcud/3/

剪切动画div

1 个答案: