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

三、另一个实例

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

在这里插入图片描述

移动端的时候如果散射这么严重就会不太好看,所以把因数调小, timer = 0.2 效果如下:
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/585352.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux升级指南:保持系统安全和高效运行

Linux系统的升级是确保系统稳定和安全性的重要步骤。本文将介绍Linux系统升级的基本概念,以及具体的操作步骤和注意事项,以帮助用户顺利升级他们的Linux系统。 Linux操作系统以其稳定性和可定制性而闻名,它经常通过升级来提供新的功能、修复漏…

在使用tcp长连接时,是否还需要再引入重发机制?

一 什么是tcp长连接? 在TCP(Transmission Control Protocol)中,长连接是指在通信过程中保持连接状态的一种方式,相对于短连接而言。长连接通常用于需要频繁通信的场景,以减少连接建立和断开的开销。在长连接…

Java解决正整数和负整数的最大计数

Java解决正整数和负整数的最大计数 01 题目 给你一个按 非递减顺序 排列的数组 nums ,返回正整数数目和负整数数目中的最大值。 换句话讲,如果 nums 中正整数的数目是 pos ,而负整数的数目是 neg ,返回 pos 和 neg二者中的最大…

秒杀系统的设计思路(应对高并发,超卖等问题的解决思路)

首先我们先看一下设计秒杀系统时,我们应该考虑的问题。 解决方案: 一.页面静态化结合CDN内容分发 前端把能提前放入cdn服务器的东西都放进去,反正把所有能提升效率的步骤都做一下,减少真正秒杀时候服务器的压力。 秒杀活动的页面…

达达快送无代码API:电商平台广告推广与客服系统一体化

快速实现高效对接:无代码开发的集成优势 在电商行业竞争日益激烈的现状下,快速对接高效的即时配送服务已成为企业取胜的关键。无代码开发为电商平台与达达快送之间的连接提供了便利,无需深入编程知识,企业即可通过图形化界面轻松…

九州金榜|家庭教育中如何培养优秀的孩子

家庭是孩子心中最大的底气,而家庭的形态也就构成孩子未来的模样。所以给为孩子提供最好的教育,就是为孩子创建一个学习气氛浓厚,成员关系美满的家庭,它会成孩子成长道路上最大的助力,最温暖的港湾。 北京大学校长蔡元培…

Windows Sockets 2 笔记

文章目录 一、Winsock简介二、Windows中Winsock对网络协议支持的情况三、使用Winsock3.1 关于服务器和客户端3.2 创建基本Winsock应用程序3.3 初始化Winscok3.3.1 初始化步骤3.3.2 初始化的核心代码3.3.3 WSAStartup函数的协调3.3.4 WSACleanup函数3.3.5 初始化的完整代码 3.4 …

Spring Boot学习随笔- 集成MyBatis-Plus,第一个MP程序(环境搭建、@TableName、@TableId、@TableField示例)

学习视频:【编程不良人】Mybatis-Plus整合SpringBoot实战教程,提高的你开发效率,后端人员必备! 引言 MyBatis-Plus是一个基于MyBatis的增强工具,旨在简化开发,提高效率。它扩展了MyBatis的功能,提供了许多实用的特性,…

Visual Studio 配置DLL

我们在用Visual Studio进行开发时,如果没有正确配置DLL,就会出现类似“丢失***.dll”的错误。DLL配置有哪些方法? 1、手动复制 将dll文件拷贝到生成的.exe所在的文件夹里 2、配置环境 在右键属性->配置属性->调试->环境&#xf…

Linux之定时任务调度

crond crond是Linux系统中的一个守护进程,主要用于周期性地执行某种任务或等待处理某些事件。而crondtab是配套的工作,用于定时任务的设置。 语法 crontab [选项]常用选项 入门案例 执行crontab -e命令输入任务到调度文件中 */1 * * * * ls -l /et…

鸿蒙原生应用再添新丁!爱奇艺入局鸿蒙

鸿蒙原生应用再添新丁!爱奇艺 入局鸿蒙 来自 HarmonyOS 微博12月29日消息,#爱奇艺完成鸿蒙原生应用Beta版#作为中国头部在线视频平台,爱奇艺 完成鸿蒙原生应用Beta版,将以丰富的正版高清视频资源促进鸿蒙生态的进一步繁荣&#x…

准备用vscode代替sourceinsight

vscode版本1.85.1 有的符号,sourceinsight解析不到。 看网上说vscode内置了ripgrep,但ctrlshiftf在文件里查找的时候,速度特别慢,根本不像ripgrep的速度。ripgrep的速度是很快的。 但今天再查询,速度又很快了&#x…

双击编辑el-table的单元格数据

(1) el-table刷新要求绑定el-table的key要发生变化才会刷新 (2) 单元格双击事件 cell-dblclick (3) 往row里面添加一个属性来唯一标识某一行的数据,双击时使这特殊属性为true,输入框失去焦点时则设置特殊属性为false,并且输入框的显示与隐藏…

SparkStreaming_window_sparksql_reids

1.5 window 滚动窗口滑动窗口 window操作就是窗口函数。Spark Streaming提供了滑动窗口操作的支持,从而让我们可以对一个滑动窗口内的数据执行计算操作。每次掉落在窗口内的RDD的数据,会被聚合起来执行计算操作,然后生成的RDD,会…

m3u8网络视频文件下载方法

在windows下,使用命令行cmd的命令下载m3u8视频文件并保存为mp4文件。 1.下载ffmpeg,访问FFmpeg官方网站:https://www.ffmpeg.org/进行下载 ffmpeg下载,安装,操作说明 https://blog.csdn.net/m0_53157282/article/det…

下载和安装AD14 - Altium Designer 14.3.20.54863

这个版本应该还支持XP 系统[doge],总之就是想安装一下,没什么特别的意义。 下载 资源来自毛子网站:https://rutracker.net/forum/viewtopic.php?t5140739,带上个网页翻译插件就行。要用磁力链接下载,推荐用qbittorr…

RabbitMQ之快速入门、上手

前言 学习一样新技术、新框架,最重要的是学习其思想、原理。即原理性思维。 如果是因为工作原因,需要快速上手RabbitMQ,本篇或许适合你。 核心概念 Connection:publisher/consumer 和 broker 之间的 TCP 连接Channel…

Android 理解Context

文章目录 Android 理解ContextContext是什么Activity能直接new吗? Context结构和源码一个程序有几个ContextContext的作用Context作用域获取ContextgetApplication()和getApplicationContext()区别Context引起的内存泄露错误的单例模式View持有Activity应用正确使用…

Springboot2+mybatisplus+多数据源更换mysql数据库为pgsql

前提:Springboot2+mybatisplus+多数据源mysql,现在需要把数据源2更换为pgsql 一、pom文件修改 增加pgsql驱动 <postgresql.version>42.7.1</postgresql.version> <!-- https://mvnrepository.com/artifact/org.postgresql/postgresql --><dependency&…

八数码问题

八数码问题 在3x3的棋盘&#xff0c;摆有八个棋子&#xff0c;每个棋子上标有1至8的某一数字&#xff0c;不同棋子上标的数 字不相同。棋盘上还有一个空格&#xff0c;与空格相邻的棋子可以移到空格中。要求解决的问题 是:给出一个初始状态和一个目标状态&#xff0c;找出一一种…