|
|
Ŭ¶ó¿ìµåű×
javascript PHP ASP CSS mysql html jquery ������ image mobile API slide °Ô½ÃÆÇ
|
|
|
ÇöÀçÁ¢¼ÓÀÚ ¸í |
|
|
|
|
|
|
|
¼¼È÷ »ö»óÀÌ º¯ÇÏ´Â ¹é±×¶ó¿îµå ¾Ö´Ï¸ÞÀÌ¼Ç Pulsating Marble |
|
|
|
|
¼Ò½ººÐ·ù |
±âŸȿ°ú |
|
|
´Ù¿î·Îµå Ƚ¼ö |
6 ȸ |
|
|
|
°£´Ü¼³¸í |
¼¼È÷ »ö»óÀÌ º¯ÇÏ´Â ¹é±×¶ó¿îµå ¾Ö´Ï¸ÞÀÌ¼Ç |
|
|
|
|
|
¼¼È÷ »ö»óÀÌ º¯ÇÏ´Â ¹é±×¶ó¿îµå ¾Ö´Ï¸ÞÀ̼ÇÀÔ´Ï´Ù.
°£´ÜÇÑ ¼Ò½º·Î ±¸ÇöÀÌ °¡´ÉÇÕ´Ï´Ù.
HTML ±¸Á¶
CSS ¼Ò½º
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: grid;
align-items: center;
justify-items: center;
margin: 0;
background-color: #000;
}
div {
width: 300px;
height: 300px;
border-radius: 50%;
box-shadow:
0 0 20px #fff,
-20px 0 80px #f0f,
20px 0 80px #0ff,
inset 0 0 50px #fff,
inset 50px 0 80px #f0f,
inset -50px 0 80px #0ff,
inset 50px 0 300px #f0f,
inset -50px 0 300px #0ff;
animation: pulsate 6s linear infinite;
}
@keyframes pulsate {
50% {
box-shadow:
0 0 20px #fff,
20px 0 80px #f0f,
-20px 0 80px #0ff,
inset 0 0 50px #fff,
inset -50px 0 80px #f0f,
inset 50px 0 80px #0ff,
inset -50px 0 300px #f0f,
inset 50px 0 300px #0ff;
}
}
÷ºÎÆÄÀÏÀ» ´Ù¿î·Îµå ¹Þ°Å³ª ÇØ´ç »çÀÌÆ®·Î À̵¿Çؼ Àüü ¼Ò½º¸¦ È®ÀÎÇÏ½Ç ¼ö ÀÖ½À´Ï´Ù.
|
|
³×ƼÁð ÀÇ°ß ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.) |
|