个人中心
gpt4 book ai didi

html - 动画 div 中的字母 "I"？

转载 作者：行者123 更新时间：2023-11-28 17:55:21 24 4
gpt4 key购买 nike

我的 div 中的字母 I 似乎有问题。我尝试了许多不同的单词和随机字母组合，但似乎找不到“模式”。

JsFiddle

当您将 div 悬停在顶部时(参见 jsfiddle)，带有“I”的 div 会快速改变它的大小。另请注意，悬停的 div 应该改变大小，但只有悬停的 div。

我在使用“元素”这个词时遇到了问题，如果您找到解决方法/修复、阻止它重新调整大小的方法或任何提示，请发表回答/评论，我们将不胜感激。

HTML

<body>
    <div id='wheel'></div>
    <div class='wrapper'>
        <div id='header'>   <a href='' class='nav-link'>Test</a>
    <a href='' class='nav-link'>test</a>
    <a href='' class='nav-link'>test</a>
    <a href='' class='nav-link'>Items</a>
    <a href='' class='nav-link'>test</a>

        </div>
        <div class='box'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper, nisi ac lacinia blandit, arcu erat sodales tellus, non interdum leo ipsum nec turpis. Sed porta eros ut lobortis tristique. Cras fermentum nulla id ligula accumsan iaculis. Sed eleifend ultrices elit, ac ultrices diam pharetra vitae. Morbi sit amet urna in mi lobortis ornare ac eget metus. Curabitur mollis condimentum ipsum quis pretium. Etiam et elementum nisl. Aliquam vitae nisl nec lectus molestie lobortis sit amet at nisi. Nulla in lectus vel quam consectetur interdum ac sit amet tortor. Curabitur fermentum justo velit, ac accumsan augue porta eget. Cras elit turpis, volutpat nec enim in, facilisis dictum enim. Curabitur ut mattis neque, ac volutpat metus. Aliquam auctor lorem eget sem elementum tempor eu id turpis. In facilisis, erat auctor vestibulum euismod, tellus odio convallis velit, non blandit nisl nisi vel magna. Morbi pulvinar purus in ultrices aliquet. Cras pellentesque augue a augue elementum fringilla. Nulla tempor nec ante pharetra fringilla. Nam semper semper purus, quis accumsan libero ultricies a. Cras orci neque, tristique sit amet quam nec, interdum cursus leo. Integer eu tempus metus, sit amet euismod massa. Maecenas consequat tincidunt velit, malesuada faucibus dolor pharetra et. Morbi a nulla ante. Integer placerat posuere elit non laoreet. Vivamus facilisis eros sit amet purus tincidunt pretium. Ut in ante rutrum, faucibus tortor eget, lacinia quam. Sed orci augue, rhoncus id faucibus quis, lacinia id nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla rutrum tellus sit amet sem luctus, et iaculis ante iaculis. Etiam elementum nunc et nisl rutrum, sit amet aliquet turpis blandit. Nam viverra lectus vulputate porta elementum. Etiam tortor lacus, ultricies et interdum et, lobortis non libero. Nunc dapibus, lectus nec venenatis consequat, lectus ligula tempus felis, eget laoreet velit eros non enim. Aliquam non augue odio. Vivamus risus sem, posuere sit amet ultricies faucibus, rutrum a nibh. Nullam non libero a mauris rutrum imperdiet non sollicitudin risus. Vestibulum facilisis ligula quis velit faucibus, eu pellentesque leo faucibus. Fusce diam augue, scelerisque sit amet elit at, volutpat adipiscing nibh. Quisque faucibus nisi eget risus tincidunt, at tempus ante pellentesque. Praesent vulputate, purus sit amet laoreet consectetur, ligula sem iaculis mauris, et varius libero mi eleifend justo. Cras eu neque malesuada, fringilla nibh vitae, luctus lorem. Vivamus auctor tempus convallis. Etiam feugiat lobortis nunc sit amet laoreet. Mauris sapien sapien, dapibus eget porttitor sed, rutrum vitae erat. Maecenas eros orci, dignissim vel nulla sed, tincidunt tempus metus. Aliquam auctor dui eget mi blandit scelerisque. Ut vel tristique quam. Nunc laoreet laoreet rhoncus. Nunc ut nunc at nisl lobortis eleifend. Pellentesque convallis ipsum id cursus vulputate. Nunc eget ipsum non nisl malesuada facilisis bibendum suscipit lectus. Integer ante neque, placerat at lectus quis, adipiscing placerat ipsum. Quisque a auctor sem. Nunc eu vehicula purus. In congue lorem purus, in euismod dolor dictum ac. Etiam vitae dolor vel nisi egestas porttitor. Aliquam ultricies libero sit amet eros interdum, ut adipiscing lacus sollicitudin. Proin vitae dapibus massa. Donec blandit et massa ut scelerisque. Nulla eu leo at magna imperdiet commodo sed ut libero.</div>
    </div>
</body>

CSS

@charset"utf-8";

/* CSS Document */
 body, html {
    font-family:'Calibri';
    font-size:16px;
    font-weight:bold;
    margin:0;
    padding:0;
    background-color:#141414;
    min-width:920px;
    min-width:900px;
    line-height:120%;
    letter-spacing:0.5px;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
}
#wheel {
    background-image:url(../img/wheel.png);
    position:absolute;
    left:-400px;
    top:-100px;
    height:1190px;
    width:1190px;
    animation:rotate 140s linear infinite;
    -webkit-animation:rotate 140s linear infinite;
    /* Safari and Chrome */
}
@keyframes rotate {
    from {
        -webkit-transform:rotateZ(0deg);
    }
    to {
        -webkit-transform:rotateZ(360deg);
    }
}
@-webkit-keyframes rotate
/* Safari and Chrome */
 {
    from {
        -webkit-transform:rotateZ(0deg);
    }
    to {
        -webkit-transform:rotateZ(360deg);
    }
}
.wrapper {
    width:90%;
    max-width:1400px;
    min-width:900px;
    margin:0 auto;
}
.box {
    position:relative;
    border-radius:10px;
    color:#FFF;
    background-color:rgba(27, 27, 27, 0.7);
    border:2px solid #333;
    box-shadow: #000 3px 0 0 0 inset, #000 0 3px 0 0 inset, #000 0 -3px 0 0 inset, #000 -3px 0 0 0 inset;
    padding:15px;
}
#header {
    overflow:hidden;
    position:relative;
    margin-bottom:20px;
}
.nav-link {
    background: #313131;
    /* Old browsers */
    background: -moz-linear-gradient(top, #313131 0%, #1e1e1e 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #313131), color-stop(100%, #1e1e1e));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #313131 0%, #1e1e1e 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #313131 0%, #1e1e1e 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #313131 0%, #1e1e1e 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #313131 0%, #1e1e1e 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#313131', endColorstr='#1e1e1e', GradientType=0);
    /* IE6-9 */
    color:#FFF;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    border-bottom:1px solid #161416;
    border-left:1px solid #2f2f2f;
    border-right:1px solid #222522;
    float:left;
    padding:30px;
    margin:0 20px 5px 0;
    font-size:22px;
    box-shadow:#000 0 2px 5px 0;
    text-decoration:none;
}
.nav-link:hover {
    animation:hover 0.1s linear infinite;
    -webkit-animation:hover 0.1s linear;
    /* Safari and Chrome */
}
@keyframes hover {
    0% {
        padding:30px;
        margin:0 20px 5px 0;
    }
    50% {
        padding:25px;
        margin:0 25px 10px 5px;
    }
    100% {
        padding:30px;
        margin:0 20px 5px 0;
    }
}
@-webkit-keyframes hover
/* Safari and Chrome */
 {
    0% {
        padding:30px;
        margin:0 20px 5px 0;
    }
    50% {
        padding:25px;
        margin:0 25px 10px 5px;
    }
    100% {
        padding:30px;
        margin:0 20px 5px 0;
    }
}

最佳答案

只需在您的 CSS 中添加:

a.nav-link {letter-spacing: 0px;}

这应该可以解决问题。

http://jsfiddle.net/hb7J4/3/

关于html - 动画 div 中的字母 "I"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21441616/

24 4 0
文章推荐： javascript - 使用 Javascript 获取选择输入并在另一部分使用数据
文章推荐： python - 如何在 Visual Studio IronPython 项目中配置导入路径
文章推荐： python - 如何在 django 模板的 url templatetag 中嵌入标签？
文章推荐： iphone - 来自远程服务器的 obj-C、Json + Coredata - 没有本地数据库/数据库，最佳方法？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com