CSS 如何做一个比较真实有感觉的阴影效果

效果如图：

阴影：你需要了解的：

box-shadow 这个样式可以同时添加多个阴影，以 , 间隔即可
本例中的阴影有两个，一个向左偏移一个向右偏移

box-shadow: 12px 25px 5px rgb(0 0 0 / 10%), -2px 20px 5px rgb(0 0 0 / 10%)

过渡动画

能看到效果图中的阴影是动画进动画出的，而不是直接从没阴影到有阴影。这里用到的是 transition。
仔细看能看到这个过渡是有讲究的，鼠标悬停的时候，阴影变化的比较快，鼠标离开的时候变化比较稍微慢点。这样的感觉会比较好，如果进出的变化是同等时间，就差点意思。

SCSS

.icon {transition: all 0.5s; // 表示从 hover 进入普通状态时，0.5s 内完成变换box-shadow: 0 0 0 rgba(0,0,0,0);&:hover{transition: all 0.2s; // 表示进入 hover 状态时，0.2s 内完成变换box-shadow: 12px 25px 5px rgb(0 0 0 / 10%), -2px 20px 5px rgb(0 0 0 / 10%);}
}

在线实例：

https://kylebing.cn

CSS 如何做一个比较真实有感觉的阴影效果相关推荐

html与css编程证书,利用CSS布局做一个简单的荣誉证书（代码示例）
本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助! 那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性: backgr ...
CSS/SCSS 做一个心跳的动画：keyframe
CSS/SCSS 做一个心跳的动画一.心电图数据化做动画,需要动画曲线,心跳的曲线自然是心电图,网上随便找一个差不多的,选取完整的一部分 1. 横向10等分找到基线,横向10等分. 整个图是一个 ...
html+css+js 做一个加解密小网页
孩子第一次做网页,比较菜,勿喷本来是想做一个ctf的知识站和加解密站当作业交上去,但是时间太短了,又要准备高数和大雾简直人都要没了,就只写了base64,凯撒,和栅栏密码 html <!DOC ...
HTML+CSS+JavaScript做一个简约的浏览器主页
文章目录前言一.页面效果二.实现方式具体代码总结前言感觉之前的浏览器主页乱七八糟,我个人比较喜欢简约卡通的.所以做了这个权游主题的简约版.整体代码也不难.最后是把写好的html文件地址作 ...
用CSS来做一个动画案例
今天来做这么一个案例添加一个动画实现上下渐变滚动的效果首先还是我们HTML部分,一个大盒子装着五个子元素下面别在意,之前写的时候看到有个网站有这么个注解我就复制了下来哈哈哈 <div cl ...
如何用css只做一个div鼠标点击变色
先写一个html文件 <!DOCTYPE html> <html> <head><meta charset="utf-8">< ...
用HTML+CSS来做一个渐变色几何花朵
近几年前端设计界的风潮又由纯色大色块转变到了渐变风格.借由鲜艳活泼的色彩能够在第一时间引起访问者的注意.合理的渐变配比也能让设计品更有质感. 本期「数字艺界」前端设计馆为大家带来一个基于渐变色彩的几何 ...
用HTML+CSS+JS做一个简单的个人网页
暑假在家闲的没事,写了一个简单的小网页,从网上找了些图片和视频拼起来的,由于经验不足的关系,没有将想添加的东西放进去. 先来看看整个网页效果的视频吧效果的图片如下(最右边空出来的其实是滑动条,截长屏 ...
【HTML+CSS】做一个简易的立体小模型
学完css基础的朋友们赶紧给自己做个小玩具"奖励"一下自己吧学习的过程中一定要记得多奖励自己废话不多说直接撸代码 <!DOCTYPE html> <html& ...

CSS 如何做一个比较真实有感觉的阴影效果

CSS 如何做一个比较真实有感觉的阴影效果

阴影：你需要了解的：

过渡动画

CSS 如何做一个比较真实有感觉的阴影效果相关推荐

最新文章

热门文章