博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一个前端小白的成长之路 前端系列—shadow的尝试
阅读量:5746 次
发布时间:2019-06-18

本文共 2449 字,大约阅读时间需要 8 分钟。

?项目地址:

?开始游戏:

前言

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

基础

分析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看看

大恒星

辐射出的光,本来想尝试用shadow模拟,但多次尝试没有达到较好的效果,用了多个元素渐变色模拟
,样式不算很复杂。值得一提的是中间的耀斑,灵感来自 ,虽然最后没有达到很完美的效果,勉强能看,后面再看看有什么更好的模拟方式

看下(暂时没有适配pc端)

可以看到除了色值和那个耀斑的一点小差别外,总体实现效果还是差强人意的

shadow动画

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

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

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

最后还有一点小小的瑕疵,烟花在落点在曲线上并不是均匀分布的,在斜率大的地方更稀疏,原因是我们的构造函数在一个坐标轴上均匀,并没有在变化率上做文章,有兴趣的同学,运用微积分做细致的控制

总结

最后总结一下shadow的能力吧! 除了字面意思上,可以制造内外阴影外,实际我们还能创建任意(位置,大小, 颜色,失焦距离)的元素,此外结合动画,在上述这些属性上作出渐变动画,

在性能上,远远优于使用js来创建同样效果的dom动画,毕竟shadow的渲染实际没有多余创建dom元素,打开chrome控制台我们可以看到,浏览器将整个创建了shadow的范围作为一个GraphicsLayer交给GPU,至于渲染的具体细节暂时不做深挖,后续再通过专题探讨。

占位符

转载地址:http://npozx.baihongyu.com/

你可能感兴趣的文章
工作中如何做好技术积累
查看>>
怎么用sysLinux做U盘双PE+DOS??
查看>>
Spring Transactional
查看>>
shell脚本实例
查看>>
我的友情链接
查看>>
Windows Phone 7 隔离存储空间资源管理器
查看>>
Microsoft Excel 2000/2003修复工具
查看>>
apache安装报错undefined reference ssl
查看>>
关于爱情只有一句忠告
查看>>
CentOS 7下安装部署Oracle11g图文教程
查看>>
F#初学笔记06
查看>>
实战:将企业域名解析委派给企业DNS服务器
查看>>
在Lync 2013环境部署Office Web Apps
查看>>
微软大会Ignite,你准备好了么?
查看>>
读书笔记-高标管事 低调管人
查看>>
Master带给世界的思考:是“失控”还是进化
查看>>
用户和开发者不满苹果iCloud问题多多
查看>>
java.lang.UnsatisfiedLinkError:no dll in java.library.path终极解决之道
查看>>
我的工具:文本转音频文件
查看>>
【许晓笛】从零开始运行EOS系统
查看>>