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

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),);}
}