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


¿þÀ̺êÄ¡´Â ¹ÂÁ÷ Ç÷¹À̾îÀÔ´Ï´Ù.
Á¦ÀÌÄõ¸®¸¦ ÅëÇØ Ç÷¹ÀÌ¿Í Á¤Áö¸¦ ÄÁÆ®·Ñ ÇÏ°í

¿þÀ̺ê´Â transformÀ» ÅëÇØ ¾Ö´Ï¸ÞÀ̼ÇÀ» ÁÖ´Â ¿¹Á¦ÀÔ´Ï´Ù.

 

 

HTML ±¸Á¶

<div class='music-card playing'>

  

  <div class='image'></div>

  

  <div class='wave'></div>

  <div class='wave'></div>

  <div class='wave'></div>

  

  <div class='info'>

    <h2 class='title'>Anomaly</h2>

    <div class='artist'>Lecrae</div>

  </div>

  

  <i class="fa fa-pause trigger" aria-hidden="true"></i>

  <i class="fa fa-play trigger" aria-hidden="true"></i>

</div>

 



CSS ¼Ò½º

@import 'https://fonts.googleapis.com/css?family=Reem+Kufi';


body {

  background: #fff;

}



@keyframes wave {

  0%   { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}


.music-card {

  margin: 100px auto;

  background: #fff;

  box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.45);

  overflow: hidden;

  position: relative;

  width: 300px;

  height: 500px;

  border-radius: 6px;

}


.image {

  background: url('http://static1.squarespace.com/static/530b728de4b04fc9b23a5988/t/569880381a5203aa7d44c1a8/1452834873397/00.jpg?format=1000w') no-repeat 75%;

  background-size: cover;  

  position: absolute;

  z-index: 1;

  opacity: 0.3;

  height: 300px;

  width: 300px;

}


.image:after {

  height: 100px;

  content: '';

  top: 200px;

  position: absolute;

  width: 100%;

  z-index: 1;

  background: linear-gradient(rgba(9, 2, 4, 0), #444);

}


.wave {

  position: absolute;

  height: 750px;

  width: 750px;

  opacity: 0.6;

  left: 0;

  top: 0;

  margin-left: -70%;

  margin-top: -130%;

  background: radial-gradient(#353535, #383737);

}


.wave:nth-child(2),

.wave:nth-child(3) {

  top: 10px;

}


.playing .wave {

  border-radius: 40%;

  animation: wave 3000ms infinite linear;

}

/* when stop */

.wave {

  border-radius: 40%;

  animation: wave 55s infinite linear;

}


.playing .wave:nth-child(2) {

  animation-duration: 4000ms;

}

/* when stop */

.wave:nth-child(2) {

  animation-duration: 50s;

}


.playing .wave:nth-child(3) {

  animation-duration: 5000ms;

}

/* when stop */

.wave:nth-child(3) {

  animation-duration: 45s;

}


.info {

  position: absolute;

  bottom: 20px;

  left: 0;

  right: 0;

  text-align: center;

}


.title {

  font-size: 1.4em;

  font-weight: 400;

  color: #333;

  margin-bottom: 8px;

  text-transform: uppercase;

  font-family: 'Reem Kufi', sans-serif;

}


.artist {

  color: #cfcfcf;

  font-size: 1.2em;

  letter-spacing: 0.08em;

  font-family: 'Reem Kufi', sans-serif;

  margin-top: -10px;

}


.fa {

  position: absolute;

  bottom: 10px;

  right: 10px;

  font-size: 18px;

  cursor: pointer;

  color: #555;

}


.fa-play {

  display: none;

}



JS ¼Ò½º

var audio = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/Lecrae_-_Anomaly_(Lyric_Video).mp3');

audio.volume = 0.1;

audio.autoplay = true;


$('.trigger').click(function() {

  if (audio.paused == false) {

      audio.pause();

      $('.fa-play').show();

      $('.fa-pause').hide();

      $('.music-card').removeClass('playing');

  } else {

      audio.play();

      $('.fa-pause').show();

      $('.fa-play').hide();

      $('.music-card').addClass('playing');

  }

});


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