½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > CSS > ±âŸȿ°ú > ¸¶¿ì½º ¿À¹ö½Ã Á¿ì·Î ¿òÁ÷ÀÌ´Â css ¿¡´Ï¸ÞÀÌ¼Ç È¿°ú »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
PHP
HTML
ASP
mysql
CSS
Mobile
image
jquery
slide
¸Þ´º
�޴�
2023
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
¸¶¿ì½º ¿À¹ö½Ã Á¿ì·Î ¿òÁ÷ÀÌ´Â css ¿¡´Ï¸ÞÀÌ¼Ç È¿°ú
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù ±âŸȿ°ú
´Ù¿î·Îµå Ƚ¼ö 123 ȸ
°£´Ü¼³¸í css ÀÇ animation È¿°úÁß keyframes À» ÀÌ¿ëÇÑ ¸¶¿ì½º hover È¿°ú·Î °£´ÜÇÏ°Ô ±¸ÇöÀÌ °¡´ÉÇÑ css ¼Ò½ºÀÔ´Ï´Ù.
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ


À§ ¿µ¿ª¿¡ ¸¶¿ì½º¸¦ ¿À¹öÇÒ °æ¿ì ºÎµå·´°Ô Á¿ì·Î ¿òÁ÷ÀÌ´Â animation È¿°úÀÔ´Ï´Ù.


¼Ò½º»ó¿¡¼­

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 30px;
  top: 0px;
 }
 100% {
  left: 0;
  top: 0;
 }

À§ keyframes ¿µ¿ªÀº À§ ³ì»ö ±¸¿µ¿ªÀÇ ¿òÁ÷ÀÓÀ» ÁÖ±â À§ÇÑ ¿µ¿ªÀÔ´Ï´Ù.
0% ´Â ù¹ø° À§Ä¡, 50% ´Â µÎ¹ø° À§Ä¡ÇÒ ºÎºÐ, 100% ´Â µÇµ¹¾Æ¿Ã À§Ä¡¸¦ ¸»ÇÕ´Ï´Ù.
(µÇµ¹¾Æ¿Ã À§Ä¡¸¦ 100px ·Î Àû¿ëÇϸé Çѹø´õ ÁÂÃøÀ¸·Î À̵¿µÇ¹Ç·Î µÇµ¹¾Æ¿Ã À§Ä¡°¡ ¾Æ´Ñ ´ÙÀ½¹ø À̵¿µÉ À§Ä¡ÀÔ´Ï´Ù.)
slide ¶ó´Â ºÎºÐÀº animation-name À¸·Î Àû¿ëÇÒ ³×À̹ÖÀ¸·Î ¾Æ·¡ Ãß°¡ ¼³¸íÀ¸·Î ¾È³»µå¸®°Ú½À´Ï´Ù.

º» ¼Ò½º¿¡¼­´Â

<div class="stage">
  <figure class="ball"></figure>
</div>

¶ó´Â ÇüÅÂÀÇ ±¸Á¶À̸ç, stage ¿µ¿ª¿¡ ¸¶¿ì½º hover ½Ã ball ¿µ¿ªÀÌ ¿òÁ÷ÀÌ´Â Á¶°ÇÀÇ ¼Ò½ºÀÔ´Ï´Ù.
css »ó¿¡¼± ¾Æ·¡Ã³·³ hover ¿µ¿ª¿¡ ´ëÇÑ animation ¿µ¿ªÀ» ¸¸µé¾î µÎ¾ú½À´Ï´Ù.

 .stage:hover .ball {
  animation-name: slide; <-- keyframes À̸§
  animation-duration: 2s; <-- ¾Ö´Ï¸ÞÀ̼ǠÇÑ »çÀÌŬÀÌ °É¸®´Â ½Ã°£ÀÔ´Ï´Ù.
  animation-timing-function: ease-in-out; <- ¾Ö´Ï¸ÞÀÌ¼Ç ¼Óµµ¸¦ Á¶ÀýÇÕ´Ï´Ù.
  animation-delay: .2s; <- ¾Ö´Ï¸ÞÀÌ¼Ç ½ÃÀÛÀü Áö¿¬½Ã°£ÀÔ´Ï´Ù. (Áï½Ã Àû¿ëµÇ¸é ºÎµå·¯¿î È¿°ú°¡ Ç¥ÇöµÇÁö ¾Ê½À´Ï´Ù.)
  animation-iteration-count: infinite; <- ¹Ýº¹È½¼ö¸¦ ¼³Á¤ÇÕ´Ï´Ù. (infinite ´Â ¹«ÇÑÀ¸·Î ¹Ýº¹ÇÕ´Ï´Ù.)
 }


À§ ±¸Á¶·Î Àû¿ëÇÏ¿´À¸¸ç, index.html ÆÄÀÏÀ» ´Ù¿î¹Þ¾Æ ÇØ´ç ¼Ò½º¸¦ È®ÀÎÇغ¸½Ã±â ¹Ù¶ø´Ï´Ù.
³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
µî·ÏµÈ ÀÇ°ßÀÌ ¾ø½À´Ï´Ù.
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 33754282 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.