집 > 기사 > 웹 프론트엔드 > js+css는 동적으로 변화하는 colors_javascript 기술을 사용하여 원 안의 원 효과를 그립니다.

js+css는 동적으로 변화하는 colors_javascript 기술을 사용하여 원 안의 원 효과를 그립니다.

WBOY원래의: 2016-05-16 15:17:251458검색

이 기사의 예에서는 js+css를 사용하여 색상을 동적으로 변경하는 원 안의 원 효과를 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

런닝 효과 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

<html>
<head>
 <title>circle</title>
 <style type="text/css" >
  .circle 
  { 
   border-radius:50%; 
   background:#DDDDDD; 
  }
  .circle_inside 
  { 
   width:80%; 
   height:80%;
   left:10%; 
   border-radius:50%; 
   background:#494949;
   position:relative;
   top:10%;
  }
  #circle 
  {
   margin-left:50%;
   position:relative;
   left:-250px;
   width:500px;
   height:500px;
  }
 </style>
 <script type="text/javascript" >
  var c = 'DDDDDD,DFEFFF,494949,C8DB74,46DFDE,59DDDE'.split(',');
  function create_color() {
   var color = '',
    c_length = c.length,
    random_nmb = Math.floor(Math.random()*c_length);
   return '#'+c[random_nmb];
  }
  function create_inside_circle(color, id) {
   return "<div id='"+id+"' class='circle_inside' style='background:"+color+";'></div>";
  }
  function create_all_circle() {
   var circle_nmb = 15,
    html = [],
    id = 0,
    inside_circle = document.getElementById('circle');
   for(var i=0; i<circle_nmb; i++) {
    id = "circle"+i;
    inside_circle.innerHTML = create_inside_circle(create_color(), id);
    inside_circle = document.getElementById(id);
   }
  } 
  window.onload = function(){
   setInterval(function(){
    create_all_circle();
   }, 1500);
  } 
 </script> 
</head>
<body>
 <div class="circle bg1" id="circle">
 </div>
</body>
</html>

js 특수 효과와 관련된 더 많은 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제를 확인할 수 있습니다: "jQuery 애니메이션 및 특수 효과 사용 요약", "일반적인 클래식 요약 jQuery의 특수 효과" 및 " JavaScript 애니메이션 특수 효과 및 기법 요약》

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：js+html5_javascript 기술로 구현된 자유낙하 모션 효과 코드다음 기사：js+html5_javascript 기술로 구현된 자유낙하 모션 효과 코드

js+css는 동적으로 변화하는 colors_javascript 기술을 사용하여 원 안의 원 효과를 그립니다.

관련 기사