css3阴影效果,css高亮效果
背景
你有没有想过如何打造一个继承了前景元素部分色彩的阴影效果？阅读这篇文章，了解如何实现它！
前几天路过家得宝(美国家得宝公司，全球领先的家居建材零售商)，他们正在大规模展出正在销售的智能灯。其中一个是位于电视后面的一系列灯泡，它们会投射出与电视前景屏幕上显示的颜色相似的光，类似于下图所示。
注意电视机后面发生的事情。电视屏幕前景中显示的颜色被灯投射到彩色阴影背景中。当屏幕上的颜色改变时，背景投影颜色也会改变。真的很酷，对吧？
看到这里之后，很自然的，我的第一个想法就是，我能不能利用web开发技术，创建一个足够智能的，可以模拟前景色的彩色阴影？事实证明，只有使用CSS才能达到这种效果。在本文中，我们将研究如何实现它。
操！
令其成真
在下面的段落中，你会发现，乍一看，仅使用CSS来创建智能颜色阴影似乎是一项艰巨的任务。当我们按部就班，把难的部分拆分成更小的部分，你会发现，一切都会变得容易理解和消化。在下一章中，我们将创建如下示例：
你看到的是一张寿司的图片，阴影与前景中的颜色相对应。为了强调我们所做的是动态的，一个脉动的动画效果被添加到阴影中。通过这个有效的例子，让我们深入探讨如何只使用HTML和CSS就能让一切活起来。
展示图片
用于显示寿司的HTML没有什么特别之处，如下所示：
Div class= parent div class= colorfullshadowsushi /div/div我们有一个父div元素。parent，包含一个子元素。苏驰供展示。我们用背景图片的形式来实例化它。的特定样式规则。寿司元素如下：寿司{边距：100px宽度：150px高度：150px背景-图片：URL( https://www . ki rupa . com/icon/1f 363 . SVG )；背景-重复：不重复；背景-大小：包含；}在上面的样式规则中，我们将div设置为150 * 150宽高像素，并设置了background-image和相关属性。如果把现在已经取得的成果展示出来，可以看到下图所示的内容。
创建阴影
现在我们已经展示了我们的寿司图片，更有趣的部分是定义阴影。我们将通过指定一个子伪元素：after来定义阴影，这将做3件事：
直接在图片所在的div后面；继承与父元素相同的背景图像；彩色投影效果是由滤镜产生的。以上三个功能是通过以下两个样式规则实现的：colorful shadow { position:relative；}.colorfulShadow:在{ content:“”之后；宽度：100%；身高：100%；位置：绝对；背景：继承；背景-位置：中心居中；滤镜：落影(0px 0px 10px rgba(0，0，0，0.50))模糊(20px)；z索引：-1；}花点时间浏览一下这里的实现，密切注意每个属性和对应的值。最值得注意的是背景属性和过滤器属性。背景的值是inherit，这意味着它将继承父元素的背景值：
背景：继承；filter属性定义了两个滤镜值：投影和模糊。
滤镜：落影(0px 0px 10px rgba(0，0，0，0.50))模糊(20px)；我们的投影滤镜设置一个50%透明度的黑色阴影。模糊滤镜为元素设置20px的模糊效果。这两种滤镜的结合，最终可以创造出多彩的阴影。当这两个样式规则生效时，我们可以看到寿司图像后面出现的彩色阴影，如下所示：
到目前为止，我们已经取得了很大成就。为了完整起见，如果您希望彩色阴影具有放大和缩小的动画效果，下面的附加CSS可以帮助您实现：colorful shadow { position:relative；}.colorfulShadow:在{ content:“”之后；宽度：100%；身高：100%；位置：绝对；背景：继承；背景-位置：中心居中；滤镜：落影(0px 0px 10px rgba(0，0，0，0.50))模糊(20px)；z索引：-1；/*动画时间！*/动画：振荡1s三次-贝塞尔(. 17， 67， 45，1.32)无限交替；} @关键帧振荡{ from { transform: scale(1，1)；}到{ transform: scale(1.3，1.3)；}}如果想在不使用圆形动画效果的情况下增强交互性，也可以使用CSS transition来改变阴影的行为，比如在悬停操作的情况下。需要强调的难点是，伪元素只需要像HTML或JavaScript动态创建的元素一样对待。唯一不同的是，这个元素完全只由CSS创建！
结论
伪元素允许我们使用CSS创建通常在HTML和JavaScript领域中完成的元素创建任务。对于我们的多彩智能阴影，我们依赖于父元素有一个背景图像集，这便于我们定义一个子元素，它可以继承父元素的背景细节，并设置模糊效果和投影效果。虽然这一切都很好，减少了大量的复制和粘贴工作，但这种方法不是很灵活。
如果我想将这样的阴影应用到一个不仅仅是背景图像的空元素上呢？如果我有一个HTML元素，如按钮或组合框，我想应用这种阴影效果怎么办？一种解决方案是依靠JavaScript来复制DOM中相应的元素，将它们放在前景元素的底部，并应用过滤器。这也是一种方法。虽然这样可以达到效果，但是一想到这种多少有些重复DOM元素的繁重过程，我就不寒而栗。更糟糕的是，JavaScript没有能力将您想要提供的任何视觉意图转换为呈现目标位图！
这篇文章是翻译。原地址请访问：https://www.kirupa.com/HTML5/creating _多彩_智能_ shadows.htm。
地址：https://www.cnblogs.com/dragonir/p/14758359.html作者：dragonir
这就是这篇关于css实现多彩智能阴影的文章。关于CSS实现阴影的更多信息，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。