"The only way to get rid of a temptation[...]"
摘要：邻边投影双侧投影用两块投影每边各一块来实现不规则投影解决办法是使用滤镜效果，。滤镜，它会给图片增加一种降饱和度的橙黄色染色效果。实现方式毛玻璃效果折角效果折角的解决方案增加一个暗色的三角形来实现翻折效果。
投影
1.单侧投影
思路是box-shadow 的第四个长度参数。它排在模糊半径参数之后，称作扩张半径。这个参数会根据你指定的值去扩大或当指定负值时，缩小投影的尺寸。例如，一个-5px 的扩张半径会把投影的宽度和高度各减少10px（即每边各5px）。
box-shadow: 0 5px 4px -4px black;
2.邻边投影
box-shadow: 3px 3px 6px -3px black;
3.双侧投影
用两块投影（每边各一块）来实现
box-shadow: 5px 0 5px -5px black,
-5px 0 5px -5px black;
不规则投影
解决办法是使用滤镜效果，filter。值有很多，比如blur()、grayscale() 以及drop-shadow()等。
实现不规则投影使用的是drop-shadow
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
注：drop-shadow会给任何非透明的部分打上投影，包括文本。如果文本设置了text-shadow，就是投影的投影。
染色效果方案一：
为了解决给图片加一层统一的渲染风格，使用filter滤镜，并且需要将一些滤镜的值叠加使用。
sepia滤镜，它会给图片增加一种降饱和度的橙黄色染色效果。
saturate滤镜，给每个像素提升饱和度
hue-rotate滤镜，把每个像素的色相以指定的度数进行偏移
filter: sepia(1) saturate(4) hue-rotate(295deg);
原图：
方案二：
基于混合模式的方案。mix-blendmode可以为整个元素设置混合模式。background-blend-mode 可以为每层背景多带带指定混合模式。
实现方式：
a {
background: hsl(335, 100%, 50%);
}
img {
mix-blend-mode: luminosity;
}
毛玻璃效果
.bg {
width: 500px;
height: 300px;
background: url("dog.jpg");
background-size: cover;
}
main {
position: relative;
background: hsla(0, 0%, 100%, .3);
overflow: hidden;
}
main::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: blur(20px);
margin: -30px;
}
折角效果
45°折角的解决方案
增加一个暗色的三角形来实现翻折效果。实现方法是增加另一层渐变来生成这个三角形并将其定位在右上角，这样就可以通过background-size 来控制折角的大小。
div {
background: #58a; /* 回退样式 */
background:
linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
linear-gradient(-135deg, transparent 1.5em, #58a 0);
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112030.html
摘要：通过剖析一个跑男动画实例，来把中动画相关的知识点抽丝剥茧，一网打尽。跑男的动画其实可以拆分为两个一个是交替摆腿另一个是位置移动。在使用改变雪碧图时，得到效果这样的平滑过度显然不是我们想要的。所以，在切换雪碧图背景的方案下，就要派上用场了。 作为一名真正的前端开发者，我们不能只关注前端逻辑部分。毕竟水银泄地般的页面设计和炫酷逼真的动画效果，是我们区别于其他程序员所特有的优势之一。 尽量百...
摘要：通过剖析一个跑男动画实例，来把中动画相关的知识点抽丝剥茧，一网打尽。跑男的动画其实可以拆分为两个一个是交替摆腿另一个是位置移动。在使用改变雪碧图时，得到效果这样的平滑过度显然不是我们想要的。所以，在切换雪碧图背景的方案下，就要派上用场了。 作为一名真正的前端开发者，我们不能只关注前端逻辑部分。毕竟水银泄地般的页面设计和炫酷逼真的动画效果，是我们区别于其他程序员所特有的优势之一。 尽量百...
摘要：通过剖析一个跑男动画实例，来把中动画相关的知识点抽丝剥茧，一网打尽。跑男的动画其实可以拆分为两个一个是交替摆腿另一个是位置移动。在使用改变雪碧图时，得到效果这样的平滑过度显然不是我们想要的。所以，在切换雪碧图背景的方案下，就要派上用场了。 作为一名真正的前端开发者，我们不能只关注前端逻辑部分。毕竟水银泄地般的页面设计和炫酷逼真的动画效果，是我们区别于其他程序员所特有的优势之一。 尽量百...
摘要：样式声明通过一个称为级联的过程来解释和决定。级联级联可能是中最容易被弄错的属性之一。因此很容易认为元素的视觉边界等于其宽度，但情况并非如此。 如果你在日常工作中使用CSS，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。 你可能还没有意识到，但CSS的视觉效果通常是操纵隐藏属性的间接结...
阅读 3136·2021-11-24 09:39
阅读 2867·2021-11-23 09:51
阅读 850·2021-11-18 10:07
阅读 3528·2021-10-11 10:57
阅读 2721·2021-10-08 10:04
阅读 2984·2021-09-26 10:11
阅读 1011·2021-09-23 11:21
阅读 2723·2019-08-29 17:28
