- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
假设,我们有这样一张 Gif 图:
利用 CSS,我们尝试来搞一些事情.
在这篇文章中 -- CSS 故障艺术 ,我们介绍了利用混合模式制作一种晕眩感觉的视觉效果。有点类似于抖音的 LOGO.
像是这样:
假设,我们有这样一张图:
只需要一个标签即可 。
<div class="mix"></div>
给两张同样的图片,叠加上 青色 #0ff 和 红色 #f00 ,并且错开一定的距离,两张图都要加上 background-blend-mode: lighten ,其中一张再加上 mix-blend-mode: darken :
.mix {
width: 400px;
height: 400px;
background: url($img), #0ff;
background-blend-mode: lighten;
&::after {
content: '';
position: absolute;
margin-left: 10px;
width: 400px;
height: 400px;
background: url($img), #f00;
background-blend-mode: lighten;
mix-blend-mode: darken;
}
}
得到如下效果:
简单解释下:
因为图片本身不是红色和青色的,所以需要通过 background-image 叠加上这两种颜色,并通过 background-blend-mode: lighten 让其表现出来 。
为了保持中间叠加部分的原色,需要再叠加一个 mix-blend-mode: darken 反向处理一下。(不理解的同学可以打开调试,手动关掉几个混合模式,自己感受感受即可) 。
完整的 DEMO:
图片的类抖音 LOGO Glitch 效果 。
当然,这里使用 Gif 图也是完全可以的,我们替换下我们的 Gif 图,看看会得到什么样的一种效果:
有点意思,完整的代码你可以戳这里: iKUN - 使用background-blend-mode | mix-blend-mode 实现类抖音LOGO晕眩效果 。
混合模式当然不止是这样.
我们再来实现一个有趣的效果.
首先,找一张地球图,可能像是这样(是不是有点眼熟):
把我们的人物放上去,得到这样一种效果:
神奇的事情在于,如果,我们给叠加在上面的动图,添加一个混合模式,会发生什么呢?尝试一下:
通过混合模式 mix-blend-mode: multiply ,巧妙的消除了大部分非人物的背景,再通过 filter: contrast(3) 加深这个效果,彻底去掉动图背景,融入了我们的地球背景中.
这样,我们巧妙的将两张图,融合成了一张图.
当然,多调试调试,还能有不一样的效果,这里我实现了两种不一样的效果,完整的代码如下:
<div></div>
<div class="white"></div>
div {
position: relative;
margin: auto;
width: 400px;
height: 500px;
flex-shrink: 0;
background: url(earth.jpg);
background-size: cover;
background-position: 0 -150px;
background-repeat: no-repeat;
&::before {
content: "";
position: absolute;
top: 240px;
left: 160px;
width: 70px;
height: 90px;
background: var(cxk.gif);
background-size: cover;
background-position: -30px 0;
mix-blend-mode: multiply;
filter: contrast(3);
}
}
.white {
&::before {
mix-blend-mode: color-dodge;
filter: invert(1) contrast(3);
}
}
.black {
&::before {
background: var(--bgUrl), #000;
background-size: cover;
background-position: -70px 0;
mix-blend-mode: multiply;
filter: contrast(3);
}
}
这样,我们就得到了两种不一样的效果:
完整的 Demo,你可以戳这里: CodePen Demo -- CSS iKUN Animation 。
上面的效果不错,但是,还远远不够.
有的时候,我们只想更突出主题,不想过多的看到背景元素.
怎么办呢?
这里,我介绍两种还不错的小技巧,当然,这个技巧对图片本身可能会有一点点要求.
第一个技巧,是我在这篇文章中,曾经介绍过的一个技巧 -- 巧用 background-clip 实现超强的文字动效 .
这里的核心在于,借助 background-clip: text 能够只在文字部分展示图片内容的特性,结合滤镜和混合模式的处理,实现一种文字动图效果。达到有效的去除一些背景的干扰.
我们一起来看看.
还是这张 Gif 图:
我们首先通过滤镜 filter: grayscale(1) ,将他从彩色的,处理成黑白灰的:
p {
background: url(xxx);
filter: grayscale(1);
}
处理后的图片,大概会是这样:
基于一张黑白底色的图片,我们再运用 background-clip: text ,再通过混合模式 mix-blend-mode: hard-light ,并且,很重要的一点,我们把这个效果放在黑色的背景之上:
body {
background: #000;
}
p {
color: transparent;
background: url(xxx) center/cover;
background-clip: text;
filter: grayscale(1);
mix-blend-mode: hard-light;
}
将会得到这样一种神奇的效果,通过 混合模式的叠加处理 ,文字的亮部将会保留,而暗部则会与黑色背景融合:
当然,我们更希望的是,人的部分展示保留,而 Gif 图片中的背景部分被隐藏,就完美了! 。
这里,我们继续优化下代码,我们希望能把被 grayscale() 处理过的原图的明暗部分置换,刚好,在 filter 中,存在一个 invert() 函数,能够反转输入图像的色值.
因此,在 grayscale() 之后,再配合一次 invert(1) 函数:
body {
background: #000;
}
p {
color: transparent;
background: url(xxx) center/cover;
background-clip: text;
filter: grayscale(1) invert(1);
mix-blend-mode: hard-light;
}
OK,至此,我们利用纯 CSS 实现了这样一种 unbelievable 的文字效果:
合理添加混合模式 mix-blend-mode ,能够更好的去除背景的干扰,实际使用的时候根据不同图片的颜色需要进行一定的调试.
CodePen Demo - iKUN Animation 。
那是不是只有上述的方式可以干掉图片的背景,保留主体人物部分呢?
当然不止,还有其他方式。下面,我们不借助 background-clip: text ,通过另外一种借助混合模式和滤镜的方式去掉背景干扰.
我们借助 Demo 1 的例子继续,就是如下这个效果:
在这个例子的基础上,我们直接加上 filter: grayscale(1) invert(1) 和 mix-blend-mode: hard-light ,像是这样:
.mix {
background: url($img), #0ff;
background-blend-mode: lighten;
filter: grayscale(1) invert(1);
mix-blend-mode: hard-light;
&::after {
content: '';
position: absolute;
margin-left: 10px;
background: url($img), #f00;
background-blend-mode: lighten;
mix-blend-mode: darken;
}
}
看看效果:
Wow,怎么做到的呢?我们来调试一些,你就能更好的 Get 到其中的奥妙:
这里,核心发挥作用的还是 filter: grayscale(1) invert(1) ,而 mix-blend-mode: hard-light 的意义是让一些不那么明显的背景直接比较被干掉.
完整的代码,你可以戳: CodePen Demo -- iKUN Animation 。
有点意思,但还不够。我们再回到 background-clip: text 的效果中.
背景图在动,我们能不能让文字也动起来呢?这样,整个动画就处于一种 Gif 在图,我们的内容也在动的双重动效之下.
尝试一下,这里为了尝试更多的效果,我借助了 CSS-doodle 这个库,这里我们核心要做的事情是:
background-clip: text
只展示文字部分的背景图的特性,首先设置多个重叠在一起的 DIV filter: grayscale(1) invert(1)
,只展示人的部分 background-clip: text
animation-delay
上面其实只是最核心的一些流程介绍,可以结合代码一起看看,完整的 CSS-doodle 代码如下:
<css-doodle grid="10x10">
:doodle {
@size: 70vmin 70vmin;
}
:container {
position: relative;
filter: grayscale(1) invert(1);
}
position: absolute;
inset: 0;
:after {
position: absolute;
content:"---------";
inset: 0;
font-size: 24px;
line-height: 0;
color: transparent;
background: url(xxx)
center/cover;
background-clip: text;
padding-top: @r(69vmin);
animation: move .5s @r(-0.99s) infinite linear;
}
@keyframes move {
0% {
padding-left: 0
}
100% {
padding-left: 70vmin;
}
}
</css-doodle>
html,
body {
position: relative;
margin: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #000;
cursor: pointer;
}
这样,我们就得到了一种图在动,内容也在动的效果:
当然,这个效果可能会有一点绕!实际上你可以想象一下,把图片固定,通过 background-clip: text 透出图片内容,同时,让文本内容动起来,就是如此。如果去掉 background-clip: text 看看下图,可能你会更好理解一点:
当然,实际上如果去掉 background-clip: text 并不会如上图所示,因为这里每一层会使用一张背景图, background-clip 无法引用于它的子元素,只能应用于本身,所以这个动画也有一个缺陷,如果图层数量太多,效果会比较卡顿.
CodePen Demo -- CSS Doodle - iKUN Animation 。
修改每个 DIV 的文本内容,得到的效果也不相同,像是把内容替换成 .。. ,可以得到这样的效果:
CodePen Demo -- CSS Doodle - iKUN Animation 。
OK,最后我们再来尝试下 3D 视角.
使用 CSS,我们可以非常轻松的实现 3D 多面体,像是这样:
如果我们把每边的图片,替换成上述的效果,再把我们的视角放置于中间,会发生什么呢?看看,八面体的图片墙:
再尝试把视角,放进 3D 照片墙的中间:
Wow,是不是挺有意思的,完整的 Demo,你可以戳这里: iKUN Animation 。
不断改变 perspective ,还可以得到不一样的观感体验,感兴趣的,可以自己调试调试.
总结一下,本文通过一张 Gif 图,介绍了一些利用 CSS 来实现的有趣例子.
当然,CSS 的强大远不止这样,本文仅仅是挖掘了一个方向,从将人物凸显的方向,列出了一些我认为比较有意思的动效.
核心用到了混合模式、滤镜、 background-clip 、CSS-Doodle 以及配合了一些动画,这些日常中大家可能用的不太多的属性,如果你对这些属性还不是特别了解,希望进阶一下,不妨再看看我的这些文章:
好了,本文到此结束,希望本文对你有所帮助 😃 。
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏.
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知.
想 Get 到最有意思的 CSS 资讯,千万不要错过我的 iCSS 公众号 😄 :
最后此篇关于开局一张图,构建神奇的CSS效果的文章就讲到这里了,如果你想了解更多关于开局一张图,构建神奇的CSS效果的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点? .someClass { //apply rules to
在更新我的 css 之前,我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。 但是,如果元素中的某个属性弄乱了特定页面,而我不想只使用内联 CSS 在该页面中使用它怎么办
我刚刚发现了 initial-scale 元属性。 以前,我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素),以便它们在桌面计算机的屏幕上显示得很好。然后,如果您使用的是
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。 现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗?我不想使用脚本
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页,我可以手动完成。但是有100页。有人有想法吗? 最佳答案 就像有人说的那样,“
当我想从 Styled Components 迁移到 CSS Modules 时,出现了以下问题。 假设我有以下样式组件,它接受动态参数 offset和一个动态 CSS 字符串 theme : con
有没有办法将 CSS 类定义为与另一个类相等?例如,如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
我正在尝试制作一组按钮,这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据,然后我用它来显示按钮。 我的问题在于让按
浏览器是否在加载 CSS 文件时解析 CSS?还是在整个 CSS 文件被浏览器下载后才进行解析?不同浏览器的做法有区别吗?我在哪里可以找到这种底层信息? 这个问题不是 Load and executi
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。 标题有点乱,我给大家看一下。假
我遇到了最奇怪的问题...... 在最简单的形式中,我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中,我已经大大减少了它) 当我查看页面的源代码时,我得到以下信息:
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间,min 文件不会与系统的其余部分一起发布。 我有很多 css
请告诉我 CSS 框架和 CSS 网格之间的区别。 最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途,例如 Hartija
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
我以前使用 bootstrap css import 很好。 但是我正在尝试使用 CSS 模块,所以我添加了几行。 { test: /\.css$/, use:
有没有办法在 css 选择器中创建一个 css 组。 例如: .SectionHeader { include: .foo; include: .bar; include: .
今天我学习了 CSS 中的两个概念,一个是 CSS 定位(静态、相对、绝对、固定),另一个是 CSS Margin,它定义了元素之间的空间。 假设我想移动一个元素,这是最好的方法吗?因为这两个概念似乎
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /
我是一名优秀的程序员,十分优秀!