1. 首頁
  2. 問答
  3. 當我轉錄代碼時，它出現了白色屏幕

當我轉錄代碼時，它出現了白色屏幕

2017-04-08 95 views
0

我嘗試在新筆或索引文件https://codepen.io/alexerlandsson/pen/JKyqky中複製此代碼，但顯示白色屏幕（例如：http s：//codepen.io/GARDFIELD3/pen/WpqYdW）（cut空間） 照片與白色屏幕：whitescreen.. 請幫我給我一個解決方案複製在新的鋼筆或站點索引文件的代碼時看起來是一樣的..當我轉錄代碼時，它出現了白色屏幕

*爲codepen第一個鏈接（良好的代碼/原件）

html 

<div data-am-fadeshow="next-prev-navigation autoplay"> 

    <!-- Radio --> 
    <input type="radio" name="css-fadeshow" id="slide-1" /> 
    <input type="radio" name="css-fadeshow" id="slide-2" /> 
    <input type="radio" name="css-fadeshow" id="slide-3" /> 

    <!-- Slides --> 
    <div class="fs-slides"> 
     <div class="fs-slide" style="background-image: url(https://images.unsplash.com/photo-1460500063983-994d4c27756c?crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2550);"> 
      <!-- Add content to images (sample) --> 
      <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-family: sans-serif; text-align: center; text-shadow: 0 0 20px rgba(0,0,0,0.5);"> 
       <h1 style="margin-top: 0; margin-bottom: 0.8vw; font-size: 5vw; font-weight: bold;">Pure CSS Fadeshow</h1> 
       <p style="font-size: 2vw; font-weight: 100; margin-top: 0;">Easy to implement and use on <strong>your</strong> site!</p> 
      </div> 
     </div> 
     <div class="fs-slide" style="background-image: url(https://images.unsplash.com/photo-1440557653082-e8e186733eeb?crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2500);"></div> 
     <div class="fs-slide" style="background-image: url(https://images.unsplash.com/photo-1449057528837-7ca097b3520c?crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2500);"></div> 
    </div> 

    <!-- Quick Navigation --> 
    <div class="fs-quick-nav"> 
     <label class="fs-quick-btn" for="slide-1"></label> 
     <label class="fs-quick-btn" for="slide-2"></label> 
     <label class="fs-quick-btn" for="slide-3"></label> 
    </div> 

    <!-- Prev Navigation --> 
    <div class="fs-prev-nav"> 
     <label class="fs-prev-btn" for="slide-1"></label> 
     <label class="fs-prev-btn" for="slide-2"></label> 
     <label class="fs-prev-btn" for="slide-3"></label> 
    </div> 

    <!-- Next Navigation --> 
    <div class="fs-next-nav"> 
     <label class="fs-next-btn" for="slide-1"></label> 
     <label class="fs-next-btn" for="slide-2"></label> 
     <label class="fs-next-btn" for="slide-3"></label> 
    </div> 

</div>

CSS

/* 
* CSS Fadeshow by @alexerlandsson 
* This is a fadeshow built in CSS and with customization in focus. 
* Supports quick navigation, prev/next navigation and autoplay. 
* 
* For better documentation and implementation guide, check out the GitHub repository: 
* https://github.com/alexerlandsson/css-fadeshow 
*/ 


/* 
* ===== VARIABLES ===== 
* 
* Change these variables to match your preferences. For a more detailed 
* description of what each variable do, visit https://github.com/alexerlandsson/css-fadeshow 
*/ 

$max-slides:     5; 
$prefix:       true; 
$responsive:     true; 
$breakpoint-small:   500px; 
$fade-time:      1; 
$prev-next-fontfamily:  sans-serif; 
$prev-next-icon-size:  3vw; 
$prev-next-icon-color:  rgba(255,255,255,0.5); 
$prev-next-bg:     rgba(255,255,255,0); 
$prev-next-bg-hover:   rgba(255,255,255,0.1); 
$prev-icon:      '❮'; 
$next-icon:      '❯'; 
$autohide-next-prev:   true; 
$quick-nav-color:    rgba(255,255,255,0.8); 
$quick-nav-active-color: coral; 
$fade-color:     #fff; 
$autoplay:      true; 
$autoplay-duration:   3; 


/* 
* ===== MIXINS ===== 
* 
* This section contains mixin used 
* Do not change anything here unless you know what you are doing. 
*/ 

/* Mixins to handle prefixes */ 

@mixin fadeshow-transition($value...) { 
    @if length($value) < 1 { 
     $value: all 150ms linear; 
    } 
    @if $prefix == true { 
     -webkit-transition: $value; 
    } 
        transition: $value; 
} 

@mixin fadeshow-transform($value...) { 
    @if length($value) < 1 { 
     $value: all 150ms linear; 
    } 
    @if $prefix == true { 
     -webkit-transform: $value; 
      -ms-transform: $value; 
    } 
        transform: $value; 
} 

@mixin fadeshow-animation($value...) { 
    @if $prefix == true { 
     -webkit-animation: $value; 
    } 
        animation: $value; 
} 

@mixin fadeshow-animation-delay($value) { 
    @if $prefix == true { 
     -webkit-animation-delay: $value; 
    } 
        animation-delay: $value; 
} 

@mixin fadeshow-unselectable() { 
    @if $prefix == true { 
     -webkit-user-select: none; 
      -moz-user-select: none; 
      -ms-user-select: none; 
    } 
        user-select: none; 
} 

/* Mixins to handle Quick Navigation Button states */ 

@mixin quickNavBtnActive() { 
    background-color: $quick-nav-active-color; 
} 

@mixin quickNavBtnInactive() { 
    background-color: $quick-nav-color; 
} 


/* 
* ===== FADESHOW ===== 
* 
* Base functionality for the fadeshow. 
* Do not change anything here unless you know what you are doing. 
*/ 

[data-am-fadeshow] { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    background-color: $fade-color; 

    /* Slides */ 
    .fs-slide { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     opacity: 0; 
     background-size: cover; 
     background-position: center; 
     background-repeat: no-repeat; 
     @include fadeshow-transition(opacity #{$fade-time}s ease); 

     /* Display first child on load */ 
     &:first-child { 
      opacity: 1; 
     } 
    } 

    /* Quick Navigation */ 
    .fs-quick-nav { 
     position: absolute; 
     bottom: 15px; 
     left: 50%; 
     z-index: 1; 
     @include fadeshow-unselectable(); 
     @include fadeshow-transform(translateX(-50%)); 
    } 

    .fs-quick-btn { 
     display: inline-block; 
     width: 15px; 
     height: 15px; 
     margin: 0 2px; 
     border-radius: 50%; 
     cursor: pointer; 
     @include fadeshow-transition(opacity 200ms ease); 
     @include quickNavBtnInactive(); 

     &:hover { 
      opacity: 0.8; 
     } 

     /* Set active state to first button on load */ 
     &:first-child { 
      @include quickNavBtnActive(); 
     } 
    } 

    /* Prev/Next Navigation */ 
    %prev-next { 
     position: absolute; 
     display: none; 
     top: 0; 
     bottom: 0; 
     width: 100px; 
     cursor: pointer; 
     font-family: $prev-next-fontfamily; 
     background-color: $prev-next-bg; 
     -webkit-tap-highlight-color: rgba(0,0,0,0); 
     @include fadeshow-transition(all 200ms ease); 

     @if $responsive == true { 
      @media (max-width: $breakpoint-small) { 
       width: 50%; 
      } 
     } 

     &:before { 
      position: absolute; 
      top: 50%; 
      font-size: $prev-next-icon-size; 
      color: $prev-next-icon-color; 
     } 

     &:hover { 
      background-color: $prev-next-bg-hover; 
      @if $responsive == true { 
       @media (max-width: $breakpoint-small) { 
        background-color: rgba(255,255,255,0); 
       } 
      } 
     } 
    } 

    .fs-prev-btn { 
     @extend %prev-next; 
     left: 0; 

     &:before { 
      content: "#{$prev-icon}"; 
      left: 50%; 
      @include fadeshow-transform(translate(-50%, -50%)); 
      @if $responsive == true { 
       @media (max-width: $breakpoint-small) { 
        left: 30px; 
       } 
      } 
     } 

     @if $autohide-next-prev == true { 
      @include fadeshow-transform(translateX(-100%)); 
      @if $responsive == true { 
       @media (max-width: $breakpoint-small) { 
        @include fadeshow-transform(translate(0)); 
       } 
      } 
     } 
    } 

    .fs-next-btn { 
     @extend %prev-next; 
     right: 0; 

     &:before { 
      content: "#{$next-icon}"; 
      right: 50%; 
      @include fadeshow-transform(translate(50%, -50%)); 
      @if $responsive == true { 
       @media (max-width: $breakpoint-small) { 
        right: 30px; 
       } 
      } 
     } 

     @if $autohide-next-prev == true { 
      @include fadeshow-transform(translateX(100%)); 
      @if $responsive == true { 
       @media (max-width: $breakpoint-small) { 
        @include fadeshow-transform(translate(0)); 
       } 
      } 
     } 
    } 

    /* Base functionality */ 
    input[type="radio"] { 
     position: fixed; 
     top: -9999px; 

     &:checked { 

      /* This loop handles the slide switching and quick navigation active state */ 
      $i: $max-slides; 

      @while $i > 0 { 

       &:nth-of-type(#{$i}) { 
        /* Show slide */ 
        ~ .fs-slides { 
         .fs-slide { 
          //Cancel autoplay 
          opacity: 0; 
          @include fadeshow-animation(none !important); 
         } 
         .fs-slide:nth-child(#{$i}) { 
          opacity: 1; 
         } 
        } 

        /* Add active state to dot */ 
        ~ .fs-quick-nav { 
         .fs-quick-btn { 
          @include quickNavBtnInactive(); 
          /* Cancel autoplay */ 
          @include fadeshow-animation(none !important); 
         } 
         .fs-quick-btn:nth-child(#{$i}) { 
          background-color: $quick-nav-active-color; 
          &:hover { 
           opacity: 1; 
          } 
         } 
        } 

       } 
       $i: $i - 1; 
      } 

      /* Hide navigation if only one slide */ 
      &:first-of-type:last-of-type { 
       ~ .fs-quick-nav, 
       ~ .fs-prev-nav, 
       ~ .fs-next-nav { 
        display: none !important; 
       } 
      } 

     } 
    } 

    /* Autohide Prev/Next Navigation */ 
    @if $autohide-next-prev == true { 
     &:hover { 
      .fs-prev-btn, 
      .fs-next-btn { 
       @include fadeshow-transform(translateX(0)); 
      } 
     } 
    } 

} 


/* 
* ===== PREV/NEXT NAVIGATION ===== 
* 
* This section handles the prev/next navigation. 
*/ 

/* Handle Prev/Next buttons */ 
[data-am-fadeshow~="next-prev-navigation"] { 
    input[type="radio"] { 

     &:checked { 

      $i: $max-slides; 

      @while $i > 0 { 

       &:nth-of-type(#{$i}) { 

        $prev: ($i - 1); 
        $next: ($i + 1); 

        /* Show previous button */ 
        @if $prev > 0 { 
         ~ .fs-prev-nav { 
          .fs-prev-btn { 
           display: none; 
          } 
          .fs-prev-btn:nth-child(#{$prev}) { 
           display: block; 
          } 
         } 
        } 

        /* Show next button */ 
        @if $next < ($max-slides + 1) { 
         ~ .fs-next-nav { 
          .fs-next-btn { 
           display: none; 
          } 
          .fs-next-btn:nth-child(#{$next}) { 
           display: block; 
          } 
         } 
        } 

        /* Show last prev button if first slide */ 
        &:first-of-type { 
         ~ .fs-prev-nav { 
          .fs-prev-btn:last-child { 
           display: block; 
          } 
         } 
        } 

        /* Show first next button if last slide */ 
        &:last-of-type { 
         ~ .fs-next-nav { 
          .fs-next-btn:first-child { 
           display: block; 
          } 
         } 
        } 

       } 
       $i: $i - 1; 
      } 
     } 
    } 

    /* Display first pair of Prev/Next Buttons on load */ 
    .fs-prev-btn:last-child { 
     display: block; 
    } 

    .fs-next-btn:nth-child(2) { 
     display: block 
    } 

} 


/* 
* ===== AUTOPLAY ===== 
* 
* Functions to handle autoplay. 
* If you're not going to use autoplay, set $autoplay to false. 
* This part tends to compile into a lot of uneccesary CSS otherwise. 
*/ 

@if $autoplay == true { 

    $i: $max-slides; 

    @while $i > 1 { 

     $total-duration: $autoplay-duration * $i; 

     @keyframes quickNavAnimation-#{$i} { 
      0% { @include quickNavBtnInactive(); } 
      #{100% * $fade-time/$total-duration}, 
      #{100% * $autoplay-duration/$total-duration} { @include quickNavBtnActive(); } 
      #{100% * ($autoplay-duration + $fade-time)/$total-duration}, 
      100% { @include quickNavBtnInactive(); } 
     } 
     @if $prefix == true { 
      @-webkit-keyframes quickNavAnimation-#{$i} { 
       0% { @include quickNavBtnInactive(); } 
       #{100% * $fade-time/$total-duration}, 
       #{100% * $autoplay-duration/$total-duration} { @include quickNavBtnActive(); } 
       #{100% * ($autoplay-duration + $fade-time)/$total-duration}, 
       100% { @include quickNavBtnInactive(); } 
      } 
     } 

     @keyframes slidesAnimation-#{$i} { 
      0% { opacity: 0; } 
      #{100% * $fade-time/$total-duration}, 
      #{100% * $autoplay-duration/$total-duration} { opacity: 1; } 
      #{100% * ($autoplay-duration + $fade-time)/$total-duration}, 
      100% { opacity: 0; } 
     } 
     @if $prefix == true { 
      @-webkit-keyframes slidesAnimation-#{$i} { 
       0% { opacity: 0; } 
       #{100% * $fade-time/$total-duration}, 
       #{100% * $autoplay-duration/$total-duration} { opacity: 1; } 
       #{100% * ($autoplay-duration + $fade-time)/$total-duration}, 
       100% { opacity: 0; } 
      } 
     } 

     [data-am-fadeshow~="autoplay"] { 
      input[type="radio"]:nth-of-type(#{$i}):last-of-type { 

       /* Slide animation */ 
       ~ .fs-slides { 
        .fs-slide { 
         @include fadeshow-animation(slidesAnimation-#{$i} #{$total-duration}s infinite); 
        } 
       } 

       /* Quick navigation animation */ 
       ~ .fs-quick-nav { 
        .fs-quick-btn { 
         @include fadeshow-animation(quickNavAnimation-#{$i} #{$total-duration}s infinite); 
        } 
       } 

       /* Animation Delay */ 
       @for $j from 1 through $i { 
        ~ .fs-slides .fs-slide:nth-child(#{$j}), 
        ~ .fs-quick-nav .fs-quick-btn:nth-child(#{$j}) { 
         $animation-delay: #{($j - 1) * ($autoplay-duration) - $fade-time}s; 
         @include fadeshow-animation-delay(#{$animation-delay}); 
        } 
       } 

      } 
      $i: $i - 1; 
     } 
    } 
} 

/* Base Styling */ 

body { 
    margin: 0; 
} 

.container { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    box-shadow: 0 0 20px rgba(0,0,0,0.1); 
    overflow: hidden; 
}

*兩個鏈接codepen（壞/我的版本），這是相同的

來源

2017-04-08 Alexandru Mihai

+0

對不起，我的英語我不會講這種語言，請大家幫忙我:) –

回答

0

這是因爲造型代碼SCSS而不是CSS。轉換樣式爲CSS並將其包含在你的筆或者簡單地將SCSS prerocessor在你的筆

要編譯到CSS筆

enter image description here

來源

2017-04-08 16:38:58 repzero

+0

如何轉換爲我的索引文件的scss？我是初學者:)） –

+0

在這裏檢查http://beautifytools.com/scss-compiler.php – repzero

+1

其實你不需要這個鏈接。在您的筆的css框中，單擊向下箭頭並編譯爲css .... – repzero

相關問題

 相關問題