我正在尝试使用CSS动画创建一个漂亮的旧CRT“电视”效果,但是扫描线在显示时出现了一些问题,它们会显示在预期div的上方和下方。
我有一个着陆页面,其中有4个div,链接到网站的其他区域。前两个div是“电视”,每个都有显示链接内容的“电视”(静态图像)的背景。
在桌面或其他较大的屏幕上,4个div将显示为2x2,在较小的屏幕上将以1x4格式显示。
我创建了一个单独的图像,将通过CSS动画来模拟第1个和第2个div上下移动的扫描线。
问题是,“扫描线”出现在“电视”上方,然后移动到下方。
您可以在JSFiddle上查看实际情况:http://jsfiddle.net/blyzz/ynekxcud/2/ 以下是一些已清理的HTML代码:
我考虑使用更高的z-index div在两个电视上下创建一个“窗口”,但是这在响应式设计中并不起作用。
我有一个着陆页面,其中有4个div,链接到网站的其他区域。前两个div是“电视”,每个都有显示链接内容的“电视”(静态图像)的背景。
在桌面或其他较大的屏幕上,4个div将显示为2x2,在较小的屏幕上将以1x4格式显示。
我创建了一个单独的图像,将通过CSS动画来模拟第1个和第2个div上下移动的扫描线。
问题是,“扫描线”出现在“电视”上方,然后移动到下方。
您可以在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;}
}
我考虑使用更高的z-index div在两个电视上下创建一个“窗口”,但是这在响应式设计中并不起作用。
任何帮助将不胜感激!
P.S. 如果我能把扫描线放在圆角后面就好了,但这并不是必须的 - 我可以随时去掉圆角。