위의 요소가 애니메이션으로 인해 움직이는 요소는 어떻게 수정합니까?

내 웹 사이트에 오류가 발생했습니다. 두 번째 타이틀 사진이 움직이는 동안 왜 타이틀 이미지 아래에있는 3 개의 버튼이 움직이는 지 알 수 없습니다. 내 목표는 title2가 움직일 때 제목 아래에있는 3 개의 버튼을 그대로 두는 것입니다. 애니메이션은 끊임없이 축소되거나 커지며 펄스라고합니다. 여기 내 코드가 모두 엉망이지만이 코드는 나를 배우기위한 것입니다. 위의 요소가 애니메이션으로 인해 움직이는 요소는 어떻게 수정합니까?

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Test Website</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> 
 
<script src="scripts/snow.js"></script> 
 
<style type="text/css"> 
 
body 
 
{ 
 
background-color: black; 
 
background-image: url("res/bg.png"); 
 
background-repeat: no-repeat; 
 
} 
 
div.button1 
 
{ 
 
    width: 600px; 
 
    position: static; 
 
    height: 150px; 
 
    margin: 30px 50px; 
 
    background-image: url("res/button1.png"); 
 
    border: 1px solid #FF0030; 
 
    border-radius: 55px; 
 
    /*opacity:0.4;*/ 
 
    /*filter:alpha(opacity=40);*/ 
 
} 
 
div.button2 
 
{ 
 
    width: 600px; 
 
    height: 150px; 
 
    margin: 30px 50px; 
 
    background-image: url("res/button2.png"); 
 
    border: 1px solid #00B7FF; 
 
    border-radius: 55px; 
 
    /*opacity:0.4;*/ 
 
    /*filter:alpha(opacity=40);*/ 
 
} 
 
div.button3 
 
{ 
 
    width: 600px; 
 
    height: 150px; 
 
    margin: 30px 50px; 
 
    background-image: url("res/button3.png"); 
 
    border: 1px solid #00FFD5; 
 
    border-radius: 55px; 
 
    /*opacity:0.4;*/ 
 
    /*filter:alpha(opacity=40);*/ 
 
} 
 
div.button1:hover 
 
{ 
 
transition: all 0.2s ease-in; 
 
-webkit-stroke-width: 5.3px; 
 
-webkit-stroke-color: #FFFFFF; 
 
-webkit-fill-color: #FFFFFF; 
 
box-shadow: 1px 0px 20px #000000; 
 
border: 2px solid #FF0030; 
 
} 
 
div.button2:hover 
 
{ 
 
transition: all 0.2s ease-in; 
 
-webkit-stroke-width: 5.3px; 
 
-webkit-stroke-color: #FFFFFF; 
 
-webkit-fill-color: #FFFFFF; 
 
box-shadow: 1px 0px 20px #000000; 
 
border: 2px solid #00B7FF; 
 
} 
 
div.button3:hover 
 
{ 
 
transition: all 0.2s ease-in; 
 
-webkit-stroke-width: 5.3px; 
 
-webkit-stroke-color: #FFFFFF; 
 
-webkit-fill-color: #FFFFFF; 
 
box-shadow: 1px 0px 20px #000000; 
 
border: 2px solid #00FFD5; 
 
} 
 
#seventyfive{ 
 
    font-size:100px; 
 
    font-weight:bold; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<center> 
 
<img src="res/title.png"</img> 
 
<img id="seventyfive"; src="res/title2.png"</img> 
 
</br> 
 
<div class="button1"> 
 
</div> 
 
<div class="button2"> 
 
</div> 
 
<div class="button3"> 
 
</div> 
 
</center> 
 
</body> 
 
</html> 
 
<script> 
 
$(document).ready(function(){ 
 
     $.fn.snow({ minSize: 8, maxSize: 15, newOn: 390, flakeColor: '#C800FF' }); 
 
}); 
 
(function pulse(back) { 
 
    $('#seventyfive').animate(
 
     { 
 
      'font-size': (back) ? '100px' : '160px', 
 
      height: (back) ? "60%" : "50%", 
 
      width: (back) ? "60%" : "50%", 
 
      
 
      
 
     }, 700, function(){pulse(!back)}); 
 
})(false); 
 
</script>

내가 어떤 답변/제안에 열려입니다, 내 질문을 읽어 주셔서 감사합니다. 다들 감사 해요!

출처

2015-01-24 Absolute Zero

을 시도 할 수 작동하지 않는 경우 수직 위치는 항목 위의 무엇이든의 크기에 따라 할 것입니다. 따라서 위의 항목이 100px이면 아래의 버튼은 100px + margin-bottom 위치에 있습니다. 해당 항목이 200px 일 때 아래의 버튼은 200px + margin-bottom에서 시작합니다.

원하는 것은 크기를 변경하지 않는 이미지 태그 주위의 div입니다.

<div style="width: 500px; height: 500px"> 
    <img id="seventyfive"; src="res/title2.png"</img> 
</div>

추신 : CSS 애니메이션과 jquery를 비교하십시오.

출처

2015-01-24 04:39:49

고맙습니다. –

내가 그것에 어떤 약속을하고 있지 않다

#seventyfive{ 
    font-size:100px; 
    font-weight:bold; 
    position:absolute; 

}

을보십시오. 먼저 바이올린을 통해 실행하려고했지만 펄스가 작동하지 않았습니다. 그 다음 당신은 또한 CSS를

.seventyfive { 
position:absolute; 
}

HTML

<div class="seventyfive"> 
<img src="res/title.png"> 
<img id="seventyfive"; src="res/title2.png"> 
</div>

출처

2015-01-24 04:34:54

위의 요소가 애니메이션으로 인해 움직이는 요소는 어떻게 수정합니까?

답변

관련 문제