Skip to main content
本文に 26 文字追加
ソース リンク
user21426
user21426

アニメーションのmixinはこちらです


@keyframes loop{
    0%{
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    to{
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@keyframes loop2{
    0%{
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to{
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
    }
}

アニメーションのmixinはこちらです


@keyframes loop{
    0%{
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    to{
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@keyframes loop2{
    0%{
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to{
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
    }
}
本文に 413 文字追加
ソース リンク
user21426
user21426

レスポンシブのmixinはこちらです。

$breakpoint-sm: 357px !default;
$breakpoint-md: 768px !default;
$breakpoint-lg: 1024px !default;

$breakpoints: (
    'sm': 'screen and (max-width: 357px)',
    'md': 'screen and (max-width: 768px)',
    'lg': 'screen and (min-width: 1024px)'
) !default;

@mixin mq($breakpoint: md){
    @media #{map-get($breakpoints, $breakpoint)}{
        @content;
    }
}

レスポンシブのmixinはこちらです。

$breakpoint-sm: 357px !default;
$breakpoint-md: 768px !default;
$breakpoint-lg: 1024px !default;

$breakpoints: (
    'sm': 'screen and (max-width: 357px)',
    'md': 'screen and (max-width: 768px)',
    'lg': 'screen and (min-width: 1024px)'
) !default;

@mixin mq($breakpoint: md){
    @media #{map-get($breakpoints, $breakpoint)}{
        @content;
    }
}
タグの追加と、コードの整形
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

 <div class="loop__wrap">
  <ul>
      <li><a href=""><img src="./assets/img/001.jpg" alt=""></a></li>
       <li><a href=""><img src="./assets/img/002.jpg" alt=""></a<><;/li>
       <li><a href=""><img src="./assets/img/003.jpg" alt=""></a></li>
       <li><a href=""><img src="./assets/img/004.jpg" alt=""></a></li>
        <li><a href=""><img src="./assets/img/005.jpg" alt=""></a></li>
        </ul>
  <ul>
      <li><a href=""><img src="./assets/img/001.jpg" alt=""></a></li>
      <li><a href=""><img src="./assets/img/002.jpg" alt=""></a></li>
       <li><a href=""><img src="./assets/img/003.jpg" alt=""></a></li>
       <li><a href=""><img src="./assets/img/004.jpg" alt=""></a></li>
       <li><a href=""><img src="./assets/img/005.jpg" alt=""></a></li>
     </ul>
     </div>

 <div class="loop__wrap">
 <ul>
      <li><a href=""><img src="./assets/img/001.jpg" alt=""></a></li>
       <li><a href=""><img src="./assets/img/002.jpg" alt=""></a<;/li>
       <li><a href=""><img src="./assets/img/003.jpg" alt=""></a></li>
       <li><a href=""><img src="./assets/img/004.jpg" alt=""></a></li>
        <li><a href=""><img src="./assets/img/005.jpg" alt=""></a></li>
        </ul>
  <ul>
      <li><a href=""><img src="./assets/img/001.jpg" alt=""></a></li>
      <li><a href=""><img src="./assets/img/002.jpg" alt=""></a></li>
       <li><a href=""><img src="./assets/img/003.jpg" alt=""></a></li>
       <li><a href=""><img src="./assets/img/004.jpg" alt=""></a></li>
       <li><a href=""><img src="./assets/img/005.jpg" alt=""></a></li>
     </ul>
     </div>
<div class="loop__wrap">
  <ul>
    <li><a href=""><img src="./assets/img/001.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/002.jpg" alt=""></a><;/li>
    <li><a href=""><img src="./assets/img/003.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/004.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/005.jpg" alt=""></a></li>
  </ul>
  <ul>
    <li><a href=""><img src="./assets/img/001.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/002.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/003.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/004.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/005.jpg" alt=""></a></li>
  </ul>
</div>
タイトルからタグ的な文字列を削除しました
リンク
nekketsuuu
  • 2.4万
  • 12
  • 53
  • 117
読み込んでいます
ソース リンク
user21426
user21426
読み込んでいます