WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

CSS3の色指定 HSL

色をランダムで配置

http://efu.sakura.ne.jp/web/hsl/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HSL</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <style>
    body {
      background: #333;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="script.js"></script>
</head>
<body>

</body>
</html>
$(function(){
  for(var i = 0; i < 100; i++) {
    var hue = 360 * Math.random();
    var color = "hsl(" + hue + ", 70%, 60%)";
    var posX = window.innerWidth * Math.random();
    var posY = window.innerHeight * Math.random();
    var div = document.createElement("div");
    var dotRnd = [ 10, 15, 20, 25, 30, 35 ] ;
    var dotW = dotRnd[ Math.floor( Math.random() * dotRnd.length ) ];
    div.style.width = dotW + 'px';
    div.style.height = dotW + 'px';
    div.style.borderRadius = "50%";
    div.style.backgroundColor = color;
    div.style.position = "absolute";
    div.style.left = posX + "px";
    div.style.top = posY + "px";
    document.body.appendChild(div);
  }
});

アニメーションさせる

http://efu.sakura.ne.jp/web/hsl/index2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HSL2</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <link rel="stylesheet" href="style2.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="script2.js"></script>
</head>
<body>
  <div class="star">
    <div class="star--01"></div>
    <div class="star--02"></div>
    <div class="star--03"></div>
  </div>
</body>
</html>
@charset "utf-8";

.star {
  width: 200px;
  margin: 100px auto;
  position: relative;
}

.star .star--01 {
   position: absolute;
   top: 0;
   left: 0;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
   transform:      rotate(35deg);
}

.star .star--02 {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -60px;
   left: 60px;
   content: '';
}

.star .star--03 {
   position: absolute;
   top: 0;
   left: -15px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);
   transform:      rotate(-35deg);
   content: '';
}
$(function(){
  var hue = 0;
  var $div1 = $(".star--01");
  var $div2 = $(".star--02");
  var $div3 = $(".star--03");

  handleTick();
  function handleTick() {
    requestAnimationFrame(handleTick);
    var color = "hsl(" + hue + ", 100%, 50%)";
    $div1.css({'border-bottom': '70px solid ' + color});
    $div2.css({'border-bottom': '80px solid ' + color});
    $div3.css({'border-bottom': '70px solid ' + color});
    hue += 1.0;
  }
});

参考
qiita.com

The Shapes of CSS