标签搜索
隐藏侧边栏

学以致用,boxshadow实现手风琴悬停效果

搞前端的半夏
2022-04-23 / 0 评论 / 0 点赞 / 58 阅读 / 2,120 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

前言

学以致用 [xué yǐ zhì yòng]

学以致用,汉语成语,拼音是xué yǐ zhì yòng,意思是为了实际应用而学习。出自《为有源头活水来》。

学习一门编程语言,不仅仅是学习他的语法,而是要将它应用到具体的场景中去。只有这样才能更好的从入门到精通。

对于CSS来说,由于CSS的特殊性,导致它的学习不能局限于眼观,而是要放到真是的DOM中才能更好的体会具体属性的具体价值。

在之前的文章box-shadow我们学习了box-shadow的用法,今天我们就用这个属性来编写一个小小的例子,实现一个手风琴悬停的效果。

在开始之前我们先再简单的回忆一下box-shadow的用法.

box-shadow:offset-x offset-y blur spread color position;

x-offset 在 x 轴上的位置。正值将阴影向右移动,负值将阴影向左移动。(必需的)

y-offset y 轴上的位置。正值将阴影移动到底部,负值将阴影移动到顶部。(必需的)

blur 阴影应该有多少模糊。值越高,阴影越柔和。默认情况下,该值设置为 0px,表示没有模糊。(可选的)

spread 指定阴影的延伸尺寸,值越大,增加的越多。(可选的)

color阴影应该有什么颜色。默认值为文本颜色。(可选)

inset 阴影的位置。默认情况下,阴影在框外。设置插图将其移至内部。(可选的)

使用variables定义颜色

为啥会考虑使用变量:

1.因为同一颜色会被多次使用

2.因为之前学习过CSS变,这里就是要学以致用。

这里为了更清晰我们定义在:root上:
红 橙 黄 绿 蓝 背景白

--background:#fff;
--red: #e74c3c;
--orange: #ff9c55;
--yellow:#f1c40f;
--green: #1fc11b;
--blue: #22d2a0;

下面具体的开始:

创建卡片

创建一个div

<div class="card">
  <p>手风琴悬停效果</p>
</div>

这里我给他加了一个border的边框。

border: 3px solid var(--red);

添加shadow

最终的效果是这样子的,看上去是加了4个shadow,但是大家仔细考虑一下,仅仅是4个够用吗。

先来看一下仅仅4个阴影的效果:

box-shadow: 10px -10px var(--orange), 20px -20px var(--yellow),、30px -30px var(--green), 40px -40px var(--blue);

可以清除的看到,阴影之间并没有白色的部分,所以,再整个里面外围,我们是需要8个阴影的。

我们是在每个阴影之间加上了一个白色的阴影,并且使用了spread属性,将阴影回撤3px,这样看上去就有4个3px的阴影了!

 box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--orange),
          20px -20px 0 -3px var(--background), 20px -20px var(--yellow),
          30px -30px 0 -3px var(--background), 30px -30px var(--green),
          40px -40px 0 -3px var(--background), 40px -40px var(--blue);

添加hover效果

hover的时候我们需要做的是啥呢,是不是需要把所有的阴影收回。怎么收回呢,很简单,把所有的阴影都去掉不就了。
并且为了动画的连续性,我们使用

transition: box-shadow 1s;

这样有人就会考虑了:直接将box去掉就可以了。

 .card:hover {
  box-shadow:none;
}
    transition: box-shadow 1s, top 1s, left 1s;

大家可以看下下图的效果,在回收的时候是不是阴影越来越淡。并不符合手风琴的效果的。

boxshadownone.gif

这里我们其实主要把偏移变成0就可以了。

box-shadow: 0 0 0 -3px var(--background), 0 0 0 0 var(--orange),0 0 0 -3px var(--background), 0 0 0 0 var(--yellow),
0 0 0 -3px var(--background), 0 0 0 0 var(--green),
0 0 0 -3px var(--background), 0 0 0 0 var(--blue);

这里我们可以看到手风琴的阴影在回收的时候一直都是存在的。
并且是往最前面的红色回收的,如果我们想要往最里面的蓝色回收呢,大家看可以思考一下,文末会放出答案

boxshadow.gif

往里回收

transition: box-shadow 1s, top 1s, left 1s;
position: relative;
top: 0;
left: 0;

.card:hover {
  top: -40px;
  left: 40px;
}

boxshadow2.gif

完整代码

image.png

0

评论区