css 用多个阴影做出光斑投影的效果 box-shadow

你首先需要知道的一点是 box-shadow 可以接收多个值，也就是可以设置多个阴影，这样就可以做一个类似光斑投影的效果。

一、效果

二、代码

里面用到了我一些 scss 工具方法，不过不影响，如果你只想用 css，可以把它改写成 css 的值就好了，区别不大。

SCSS

// 工具方法

// box-shadow
@mixin box-shadow($value ...){
    -webkit-box-shadow:  $value;
    -moz-box-shadow:  $value;
    box-shadow:  $value;
}

// border-radius
@mixin border-radius($corner: 5px){
    -webkit-border-radius: $corner;
    -moz-border-radius: $corner;
    border-radius: $corner;
}
@mixin transition($value){
    -webkit-transition: $value;
    -moz-transition: $value;
    -ms-transition: $value;
    -o-transition: $value;
    transition: $value;
}

// Colors
$green        : #4CD964;
$cyan         : #5AC8FA;
$blue         : #007AFF;
$purple       : #5856D6;
$magenta      : #FF2D70;
$red          : #FF3B30;
$orange       : #FF9500;
$yellow       : #FFCC00;
$gray         : #8E8E93;
$grass        : #8BC34A;
$sky-blue     : #1BADF8;
$light-purple : #CC73E1;
$brown        : #A2845E;
$color-main: #FFCC00;


.avatar{
    margin: 0 auto;
    width: 60px;
    height: 60px;
    @include border-radius(50px);
    outline-width: 1px;
    overflow: hidden;
    img{
        width: 100%;
        display: block;
    }
    @include box-shadow(0px 0px 0 transparentize(black, 0.6));
    @include transition(all 0.3s);
    &:hover{
        $timer: 1;  // 控制散开的距离大小，倍率
        @include transition(all 0.3s);
        @include box-shadow(
                3px*$timer 3px*$timer 0 transparentize(black, 0.6),
                -5px*$timer -8px*$timer 3px*$timer transparentize($color-main, 0.3),
                -15px*$timer 13px*$timer 4px*$timer transparentize($green, 0.3),
                -45px*$timer 8px*$timer 10px*$timer transparentize($cyan, 0.5),
                15px*$timer -15px*$timer 10px*$timer transparentize($blue, 0.1),
                65px*$timer 65px*$timer 30px*$timer transparentize($yellow, 0.6),
                20px*$timer 45px*$timer 15px*$timer transparentize($magenta, 0.2),
                -20px*$timer -45px*$timer 15px*$timer transparentize($red, 0.6),
                -105px*$timer 38px*$timer 20px*$timer transparentize($green, 0.5),
                15px*$timer -105px*$timer 10px*$timer transparentize($blue, 0.6),
                140px*$timer 45px*$timer 15px*$timer transparentize($magenta, 0.6),
                -20px*$timer -145px*$timer 40px*$timer transparentize($yellow, 0.6),
                60px*$timer -65px*$timer 40px*$timer transparentize($magenta, 0.2),
        );
    }
}

三、另一个实例

实例： https://kylebing.cn/diary/ 点 试用演示账户 就能看到。

移动端的时候如果散射这么严重就会不太好看，所以把因数调小， timer = 0.2 效果如下：