分享一个关于长投影的demo

Posted 2021-02-06 its-me

 

前段时间，网上看的，分享一下

 

body中就写了这一行

<h1>Long Shadow</h1>

css用的是sass编译，如下

@function longShadow($color_a,$color_b,$stepnum, $opacity: 1){
    $gradient_steps: null;
    @for $i from 1 through $stepnum {
        $weight: ( ( $i - 1 ) / $stepnum ) * 100;
        $colour_mix: mix($color_b, rgba($color_a, $opacity), $weight);
        $seperator: null;
        @if($i != $stepnum){
            $seperator: #{‘,‘};
        }
        $gradient_steps: append( #{$gradient_steps}, #{$i}px #{$i}px $colour_mix $seperator );
    }
    @return $gradient_steps;
}
$bg: #3498db;
body{
    background-color: $bg;
    font-family: ‘Passion One‘, ‘arial‘;
}
h1 {
    text-align: center;
    font-size: 6rem;
    color: #fff;
    text-shadow: longShadow(darken($bg, 30%), $bg, 50, 0.5);
}

效果图，如下，是不是很简单