Question

我有一个div作为我的网页的导航栏。 div由水平无序列表组成，其中每个列表项都是图像。无序列表在加载时具有淡入动画，并且每个列表项具有悬停效果，其在鼠标悬停时按比例增长。

出于某种原因，每当我加载页面时，无论是在Dreamweaver的实时视图屏幕中还是在Web浏览器上进行预览，div都会从右侧的位置开始几个像素，并且一旦淡入动画完成，它'抽搐'回到正确的位置。

它非常令人沮丧，因为这不是复杂的代码。我只在项目中加载了源代码页面及其CSS样式表。

这是与导航栏相关的所有HTML代码：

<div class="Nav">
    <ul>
        <li>
            <img src="icons/filmicon.png" width="120px" height="120px" alt="Filmography"><br/>
        </li>
        <li>
            <img src="icons/cameraicon.png" width="120px" height="120px" alt="Photography"><br/>
        </li>
        <li id="josh">
            <img src="img/joshforsite.png"  width="300px" height="300px" alt="About Me"><br/>
        </li>
        <li>
            <img src="icons/designicon.png"  width="120px" height="120px" alt="Design"><br/>
        </li>
        <li>
            <img src="icons/brandicon.png"  width="120px" height="120px" alt="Branding"><br/>
        </li>
    </ul>
</div>

...这是与导航栏相关的所有CSS代码：

.Nav {
display: flex;
flex-direction: row;
justify-content: center;
list-style-type: none;
position: absolute;
width: 100%;
padding-top: 16%;
white-space: nowrap;

.Nav li {
vertical-align: middle;
display: inline-block;
padding-right: 4%;
opacity: 1;
-webkit-animation: fadein 2s; 
   -moz-animation: fadein 2s; 
    -ms-animation: fadein 2s; 
     -o-animation: fadein 2s; 
        animation: fadein 2s;
        transition: all .3s ease-in-out; 

.Nav li:hover {
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2);

@keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
@-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
@-webkit-keyframes fadein {from { opacity: 0; }to { opacity: 1; }}
@-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; }}

同样，我是HTML＆amp; amp;的初学者。 CSS所以我不知道编码有多乱。

Here是我上传的YouTube视频的链接，显示了问题。它最后还显示了我所遇到的第二个问题，即不断增长的悬停效应。任何帮助都将不胜感激。

谢谢！

Answer 1

将.Nav li上的填充权限更改为基于px的解决方案而不是百分比，它应该消除该跳转。

此外，您还缺少每个块的结束花括号。

Answer 2

您正在使用带有替代文字的图片。毛刺可能是由加载图像引起的。尝试使用javascript预加载图像，这可能会有所帮助。

在加载和悬停效果无法正常工作时“划分”

2 个答案: