当我转录代码时，它出现了白屏

时间：2017-04-08 16:33:09

标签： html css

我尝试在新笔或索引文件https://codepen.io/alexerlandsson/pen/JKyqky中复制此代码，但显示白屏（例如：http s：//codepen.io/GARDFIELD3/pen/WpqYdW）（剪切空格） 白屏照片：whitescreen.. 请帮我解决一下在新笔或网站索引文件中复制代码看起来一样的问题。

*第一个链接代码的代码（好/原始）

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的代码（坏/我的版本）它是相同的

1 个答案:

答案 0 :(得分：0)

这是因为样式是SCSS而不是CSS。将样式转换为css并将其包含在笔中或只是在笔中添加SCSS预处理器

用笔编译成css

enter image description here

相关问题
最新问题