1
似乎有我的div中的字母I的問題。我嘗試了許多不同的單詞和隨機字母組合，但似乎無法找到「模式」。字母「我」在動畫格？
當你將鼠標懸停在上面的div（見的jsfiddle），用「我」在它會改變它的大小迅速股利。另外請注意，hovered div應該改變大小，但只限於div。
我遇到了單詞「Items」的問題，如果您發現解決方法/修復，阻止它重新調整尺寸或任何提示，請發佈答案/評論，一切都將得到讚賞。
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;
}
}
他們都做一個小小的跳對我來說，我沒有看到項目和測試之間的區別。 – Barmar
這裏沒有什麼奇怪的...沒有改變的大小。 –
你在測試什麼瀏覽器？ –