html - 如何删除从动画创建的边框

问题描述

这是我第一次来这里！让我们来看看！

我对编码大约有 1 周的时间。我试图在图像上放置动画，它正在工作。唯一的问题是

html, body {
    height: 100%;
}

body {
    margin: 0%;
}

nav {
    display: flex;
    width: 100%;
    height: 20%;
    background-color: transparent;
    margin-top: 20px;
    align-content: center;
    justify-content: center;
    
    
    
    
}

.logo { 
    
    padding-left: 10px;

}

a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.8);
    margin: 0 50px;
    padding-top: 70px;
    
    
}

a:hover { 
    color: gray;

}

header nav h1 
{
    font-size: 25px;
    padding-right: 100px;
    
}

.container {
    
    text-align: center;
    align-content: center;
}
.papier {
    min-height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(Images/papier.png);
    width: 100%;
    height: 100%;
    padding-bottom: -200px;
    border-style: hidden;
    
}

    
    .slide {
    -moz-animation: showHide 0.5s ; /* Firefox */
    -webkit-animation: showHide 0.5s ; /* Safari and Chrome */
    -ms-animation: showHide 0.5s ; /* IE10 */
    -o-animation: showHide 0.5s ; /* Opera */
    animation-duration: 7s;
        overflow: hidden

    }

}
@-webkit-keyframes showHide { /* Chrome, Safari */
     1% {width:0%}
    20% {width:20%;}
    40% {width:40%;}
    60% {width:60%;}
    80% {width:80%;}
    100% {width:100%;}
    overflow: hidden
 
    
}
@-ms-keyframes showHide { /* IE10 */
      1% {width:0%}
    20% {width:20%;}
    40% {width:40%;}
    60% {width:60%;}
    80% {width:80%;}
    100% {width:100%;}
    overflow: hidden
}
@-o-keyframes showHide { /* Opera */
      1% {width:0%}
    20% {width:20%;}
    40% {width:40%;}
    60% {width:60%;}
    80% {width:80%;}
    100% {width:100%;}
    overflow: hidden
}
@keyframes showHide {
     1% {width:0%}
    20% {width:20%;}
    40% {width:40%;}
    60% {width:60%;}
    80% {width:80%;}
    100% {width:100%;}
    overflow: hidden

}
    

.topnav
{
    overflow: hidden;
    float: right;
    background-color: transparent;
    border-style: hidden;
    border: transparent;
    
    
    
}

.topnav input[type=text]

{
    text-align: center;
    border-style: hidden;
    float: right;
    background-color: transparent;
    font-size: 13px;
    color: #404040;
    border: transparent;
    margin-top: 68px;
    
    
        
    
}
    
    
img {
    
    pointer-events: none;
    
}

::selection {
    background-color: transparent;
    color: #000;
}

html { *//
    background: url(Images/345.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}



#t
{
    height: 20px;
    width: 20px;
    padding-left: 20px;
    margin-top: 68px;
    
}

#f {
    height: 20px;
    width: 20px;
    padding-left: 60px;
    margin-top: 66px;
    
    

}

#i {
    height: 18px;
    width: 18px;
    padding-left: 60px;
    margin-top: 68px;
    
}

.sectionleft {
    
    float: left;
}
   
.gauche{
    
    height: 500px;
    width: 400px;
    


}

<!DOCTYPE HTML>
<html>

<head>
<link href="styles.css" rel="stylesheet">
<link href="stylessheet.css" rel="stylesheet">
<meta carset="utf-8"> </head>
<title>Noemie Forcier.</title>

<body>
<header>
    <nav> <a href="">ABOUT</a> <a href="">ARTICLES</a> <a href="">PHOTOS</a> <a href="">VIDEOS</a>
        <h1>NOEMIE <br><span class="logo">FORCIER.</span></h1> <a href="">CONTACT</a> <img src="Images/twitter.png" id="t"> <img src="Images/insta.png" id="i"> <img src="Images/facebook.png" id="f">
        <div class="topnav">
            <input type="text" placeholder="Recherche.."> </div>
    </nav>
    <div class="slide"> <img class="papier"> </div>
</header>
<section>
    <div class="sectionleft"> <img class="gauche" src="Images/sectiongauche.jpg"> </div>
    <div class="sectionright"> </div>
</section>
<footer> </footer>
</body>

</html>

当图像淡入时，右侧和顶部有一些奇怪的边框。

无论如何我可以让它们透明吗？我尝试了边框颜色和溢出隐藏。

标签： htmlcss

html - 如何删除从动画创建的边框

问题描述

解决方案

推荐阅读