日別アーカイブ: 2021年9月5日

SCSS(カバースライド)

コメントを残す

カバースライドアニメーションを作る

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
<!-- ホバーしたときに暗くする -->
    <!-- <div class="cover-slide hover-darken inview">
<img class="img-zoom" src="images/image-1.jpg" alt="">
  </div> -->
<!-- アス比を保ちたいときの設定 -->
  <div class="cover-slide hover-darken inview">
  <div class="bg-img-zoom img-bg50"></div>
  </div>
  </div>
</body>
</html>


mixinの記述




@mixin animation($name, $duration: 1s, $timing-function: ease, $delay: 0s, $iteration-count: 1, $direction: normal, $fill-mode: forwards) {
animation: {
name: $name;
duration: $duration;
timing-function: $timing-function;
delay: $delay;
iteration-count: $iteration-count;
direction: $direction;
fill-mode: $fill-mode;
 }
}




SCSSの記述


 続きを読む →