前端小白的成长之路 前端系列—shadow的尝试

💡项目地址：games.git
🎮开始游戏：start

前言

这篇主要讲讲奇妙的shadow，探究前端脱离img的可能性，实践页面---developers

基础

分析shadow前，咱们先简单的看一下box-shadow的基本属性

boxShadow: 10px 10px 5px 10px #888888 outset;
box-shadow: h-shadow v-shadow blur spread color inset;
复制代码

固然后，box-shadow支持多个阴影以“,”链接。

boxShadow: 10px 10px 5px 10px #888888 outset，
    20px 10px 10px 15px #888888，
    10px 10px 10px 20px #888888;
复制代码

先看一个🌰

大多数状况，相似的场景咱们都是经过一张img作背景，由于夹杂这部分动画，有时候可能还须要几张局部的小图配合实现，今天就稍微尝试一下，借助shadow纯代码实现这种场景！

简单分割一下元素

• 底部大星球（这个小人怎么感受有点眼熟，23333）
• 闪烁小星星
• 用来许愿的流星
• 耀眼大恒星

大背景就是简单的渐变

background: linear-gradient(to bottom, #081d3e, #214f9f);
复制代码

底部大星球

box-shadow: 
    200px -20px 50px #58d1ff, 
    -200px -20px 50px #783be7, 
    0px -2px 5px #ffffff, 
    inset 0px 0px 15px rgba(125, 135, 255, 1);
复制代码

效果：

小星星

小星星比较简单，一个✨实体+白色外阴影

第一次绘制母星，追求完美，绘制出了

background: 
    radial-gradient(circle at top left, transparent 3px, #fff 0) top left,
    radial-gradient(circle at top right, transparent 3px, #fff 0) top right,
    radial-gradient(circle at bottom right, transparent 3px, #fff 0) bottom right,
    radial-gradient(circle at bottom left, transparent 3px, #fff 0) bottom left;
复制代码

可是，发现用shadow复制出的子星，没法还原母体形状，实际上母星元素形状并无发生改变，咱们只是改变了背景颜色

那仍是回到原点，咱们只作一个菱形（旋转45deg）代替，借助less或者sass循环建立随机位置的子星，注意，每次循环须要建立两个相同位置的shadow，一个作小星星实体，另外一个作背景泛光

@width: 500;
@hight: 650;
@count: 12;
@random: `Math.random() `;
@0px: 0px;
.getShadow(@top, @left) {
  box-shadow+: @left @top #fff, @left @top 8px 1px #fff;
}

.loopShadow(@i) when (@i < @count) {
  @top: floor(@random* @hight) + @0px;
  @left: floor(@random* @width) + @0px;
  .getShadow(@top, @left);
    // box-shadow+: @left @top #fff, @left @top 8px 1px #fff;
  .loopShadow(@i+1);
}
复制代码

开始尝试的时候用的是注释的那行代码，按常理，一次循环中两次用到的@left和@top应该是一样的值，但实际两个@left是不一样的，致使星体和发光背景位置分离了，不过借助函数再构造一个独立做用域倒也能实现，
交替闪烁的效果，能够复制两个元素 效果以下

流星

流星头部背景渐变+shadow泛光，流星尾巴用伪类的border模拟，这里样式稍微多一点，咱们赚到codepen看看 codepen--shooting-star-demo

大恒星

辐射出的光，原本想尝试用shadow模拟，但屡次尝试没有达到较好的效果，用了多个元素渐变色模拟

codepen--star-demo ，样式不算很复杂。值得一提的是中间的耀斑，灵感来自 codepen--Fire，虽然最后没有达到很完美的效果，勉强能看，后面再看看有什么更好的模拟方式

看下最后效果(暂时没有适配pc端)

能够看到除了色值和那个耀斑的一点小差异外，整体实现效果仍是差强人意的

shadow动画

• 简单版本烟花，先看效果

  思路，在原点建立至关数量的shadow，再在动画里中同等数量的shadow，只是改变了位置，这样就有了从一点散射出来了效果，再加上开始弹出和和最后坠落的动画修饰一下，done！

• 加上一点点数学，对烟花散射的位置作一点控制，学笛卡尔向心动❤️的女神表白（不存在的）

codepen--LOVE

最后还有一点小小的瑕疵，烟花在落点在曲线上并非均匀分布的，在斜率大的地方更稀疏，缘由是咱们的构造函数在一个坐标轴上均匀，并无在变化率上作文章，有兴趣的同窗，运用微积分作细致的控制

总结

最后总结一下shadow的能力吧！ 除了字面意思上，能够制造内外阴影外，实际咱们还能建立任意（位置，大小， 颜色，失焦距离）的元素，此外结合动画，在上述这些属性上做出渐变更画，
在性能上，远远优于使用js来建立一样效果的dom动画，毕竟shadow的渲染实际没有多余建立dom元素，打开chrome控制台咱们能够看到，浏览器将整个建立了shadow的范围做为一个GraphicsLayer交给GPU，至于渲染的具体细节暂时不作深挖，后续再经过专题探讨。

占位符

前端小白的成长之路(序)
前端小白的成长之路 前端系列---项目搭建
前端小白的成长之路 前端系列---项目组织