我在 html5 和 css3 中有一个关键帧动画。 我需要一个闪烁的效果，所以我根据它编写了 css3 关键帧动画。我的问题是我为 div 指定了“position:absolute”。除非我为边框 1px 添加额外的代码，否则它不会工作，如果我给
border:1px solid transparent the 'position:absolute' will work, else it won't
我不需要那个边框，因为它会导致我的设计出现宽度问题。
这是我的html
@-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.img-front {
-webkit-animation: blink 1s;
-webkit-animation-iteration-count: infinite;
-moz-animation: blink 1s;
-moz-animation-iteration-count: infinite;
-o-animation: blink 1s;
-o-animation-iteration-count: infinite;
width: 500px;
border: 1px solid transparent;
position: inherit;
left: 0;
}
.img-back {
position: inherit;
left: 0;
width: 500px;
}<html>
<body>
<img class="img-back" src="http://goo.gl/L7WKNE" />
<img class="img-front" src="http://goo.gl/EBMULc" />
</body>
</html>我该如何排序，提前致谢。
最佳答案
@-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.img-front {
-webkit-animation: blink 1s;
-webkit-animation-iteration-count: infinite;
-moz-animation: blink 1s;
-moz-animation-iteration-count: infinite;
-o-animation: blink 1s;
-o-animation-iteration-count: infinite;
width: 500px;
border: 1px solid transparent;
position: inherit;
left: 0;
}
.img-back {
position: inherit;
left: 0;
width: 500px;
}
.img-wrapper{
position: absolute;
float: left;
}<html>
<body>
<div class="img-wrapper">
<img class="img-back" src="http://goo.gl/L7WKNE" />
<img class="img-front" src="http://goo.gl/EBMULc" />
</div>
</body>
</html>关于html - 位置:除非给出边界，否则绝对不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28851955/