WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

グラーデーションをアニメーション

f:id:mmmmofu:20170501163100p:plain

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>グラデーション</title>
  <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="grd grd1 active"></div>
  <div class="grd grd2"></div>
  <div class="grd grd3"></div>
  <h1>gradation</h1>
</body>
</html>
body,html, div {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
body, html {
  width: 100%;
  height: 100%;
}
body {
  background: url("bg.jpg") no-repeat center center;
  background-size: cover;
}
body:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96%;
  height: 96%;
  border: 2px solid #FFF;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
h1 {
  position: absolute;
  top: 100px;
  left: 50%;
  font-size: 80px;
  font-family: 'Amatic SC', cursive;
  color: #FFF;
  font-weight: 400;
  border: 2px solid #FFF;
  padding: 10px 28px 14px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.grd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: all .8s linear;
  -o-transition: all .8s linear;
  transition: all 1s linear;
}
.grd.active {
  opacity: 0.4;
  -webkit-transition: all .8s linear;
  -o-transition: all .8s linear;
  transition: all 1s linear;
}
.grd1 {
  background: -moz-linear-gradient(top, #2882D7, #D728BD);
  background: -webkit-gradient(linear, center top, center bottom, from(#2882D7), to(#D728BD));
}
.grd2 {
  background: -moz-linear-gradient(top, #D7283C, #28D7AB);
  background: -webkit-gradient(linear, center top, center bottom, from(#D7283C), to(#28D7AB));
}
.grd3 {
  background: -moz-linear-gradient(top, #D9BB26, #2685D9);
  background: -webkit-gradient(linear, center top, center bottom, from(#D9BB26), to(#2685D9));
}
$(function(){
  var grdNum = 2;
  setInterval( function(){
    if(grdNum >= 3) {
      grdNum = 1;
    }
    $('.grd').removeClass('active');
    $('.grd' + grdNum).addClass('active');
    grdNum++;
  },3000);
});