css mix-blend,CSS3 混合模式（mix-blend-mode: difference）使用示例 - 交叉圆

最新推荐文章于 2024-04-14 14:24:58 发布
最新推荐文章于 2024-04-14 14:24:58 发布
阅读量445 收藏
点赞数
文章标签： css mix-blend

CSS

语言：

CSSSCSS

确定

*,

*::before,

*::after {

box-sizing: border-box;

}

html,

body {

height: 100%;

width: 100%;

}

body {

margin: 0;

padding: 0;

position: relative;

}

.container {

padding: 2vh 2vh;

width: 51vh;

height: 51vh;

margin: 0 auto;

}

.shape,

.shape__1,

.shape__2,

.shape__3,

.shape__4,

.shape__5,

.shape__6,

.shape__7,

.shape__8,

.shape__9,

.shape__10,

.shape__11,

.shape__12 {

border-radius: 100%;

width: 49vh;

height: 49vh;

position: absolute;

mix-blend-mode: difference;

-webkit-transform-origin: bottom center;

-ms-transform-origin: bottom center;

transform-origin: bottom center;

}

.shape__1 {

background-color: #ff4000;

-webkit-animation: rotate-1 6s 0.5s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

animation: rotate-1 6s 0.5s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

}

@-webkit-keyframes rotate-1 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotate-1 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

.shape__2 {

background-color: #ff8000;

-webkit-animation: rotate-2 6s 1s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

animation: rotate-2 6s 1s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

}

@-webkit-keyframes rotate-2 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotate-2 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

.shape__3 {

background-color: #ffbf00;

-webkit-animation: rotate-3 6s 1.5s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

animation: rotate-3 6s 1.5s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

}

@-webkit-keyframes rotate-3 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotate-3 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

.shape__4 {

background-color: yellow;

-webkit-animation: rotate-4 6s 2s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

animation: rotate-4 6s 2s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

}

@-webkit-keyframes rotate-4 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotate-4 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

.shape__5 {

background-color: #bfff00;

-webkit-animation: rotate-5 6s 2.5s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

animation: rotate-5 6s 2.5s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

}

@-webkit-keyframes rotate-5 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotate-5 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

.shape__6 {

background-color: #80ff00;

-webkit-animation: rotate-6 6s 3s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

animation: rotate-6 6s 3s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

}

@-webkit-keyframes rotate-6 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotate-6 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

.shape__7 {

background-color: #40ff00;

-webkit-animation: rotate-7 6s 3.5s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

animation: rotate-7 6s 3.5s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

}

@-webkit-keyframes rotate-7 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotate-7 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

.shape__8 {

background-color: lime;

-webkit-animation: rotate-8 6s 4s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

animation: rotate-8 6s 4s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

}

@-webkit-keyframes rotate-8 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotate-8 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

.shape__9 {

background-color: #00ff40;

-webkit-animation: rotate-9 6s 4.5s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

animation: rotate-9 6s 4.5s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

}

@-webkit-keyframes rotate-9 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotate-9 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

.shape__10 {

background-color: #00ff80;

-webkit-animation: rotate-10 6s 5s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

animation: rotate-10 6s 5s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

}

@-webkit-keyframes rotate-10 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotate-10 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

.shape__11 {

background-color: #00ffbf;

-webkit-animation: rotate-11 6s 5.5s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

animation: rotate-11 6s 5.5s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

}

@-webkit-keyframes rotate-11 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotate-11 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

.shape__12 {

background-color: cyan;

-webkit-animation: rotate-12 6s 6s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

animation: rotate-12 6s 6s infinite cubic-bezier(0.8, 0.1, 0.45, 1);

}

@-webkit-keyframes rotate-12 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotate-12 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

痛仰乐队
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3混合模式mix-blend-mode/background-blend-mode简介
11-21
CSS3的混合模式引入了两种新的属性，即`mix-blend-mode`和`background-blend-mode`，它们为网页设计提供了更多的创意可能性。混合模式在图像处理领域并不陌生，如Photoshop、SVG和Canvas中都有应用，它们允许不同...
混合模式：mix-blend-mode: difference
weixin_41897680的博客
04-13 1520
简单的混合模式
神奇的mix-blend-mode: difference
why404
12-15 1490
之前安装过CSDN的浏览器插件，右下角有一个DARK模式切换功能 出于好奇，今天就想了解一下它的原理，结果发现了一个神奇的css属性：mix-blend-mode 切换前 切换后 解析 发现在body标签下多了几个标签： 最后锁定在第二个div标签 原理其实也很简单，在打开模式后，会在标签上多加几个class 其中的.darkmode-layer这个class是这样的： position: fixed; pointer-events: none; background: #fff;..
CSS3 -- mix-blend-mode属性详解
qq_51248309的博客
03-30 4060
mix-blend-mode详细解释
CSS3 mix-blend-mode的使用
热门推荐
想飞的猪的博客
11-27 1万+
CSS3 新增了一个很有意思的属性 -- mix-blend-mode ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。 --> mix-blend-mode 用于多个不同标签间的混合模式 mix-blend-mode 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。我们将 PS ...
mix-blend-mode 利用混合模式让文字智能适配背景颜色
白雾茫茫丶
03-27 511
这篇文章介绍了一种CSS3属性：mix-blend-mode，它可以实现文字智能适配背景颜色和文字镂空效果。通过设置mix-blend-mode为difference，可以在黑色背景中显示白色文字，在白色背景中显示黑色文字。同时，文章还提到了mix-blend-mode的其他属性，如multiply、screen等等，感兴趣的读者可以进一步研究。
2DHEX：基于CSS mix-blend-mode属性的2D色彩转换图像
02-17
标题中的“2DHEX”是一个使用CSS技术创建的2D色彩转换图像工具，它基于“mix-blend-mode”属性来实现颜色的变化效果。这个工具被称为“HEX2D”，其核心功能是允许用户通过调整CSS来改变图像背景的颜色搭配，从而创造...
background-blend-mode:CSS 属性 background-blend-mode 的示例
06-04
【背景混合模式：CSS属性`background-blend-mode`详解】 在网页设计中，CSS（层叠样式表）为我们提供了丰富的工具来控制元素的外观和布局。`background-blend-mode`是一个高级CSS属性，允许我们定义元素背景图像...
tailwindcss-blend-mode:Tailwind CSS的混合模式实用程序
05-13
该插件添加了实用程序，可在Tailwind CSS中使用混合模式。 安装 将此插件添加到您的项目中： # Install using pnpm pnpm install --save-dev tailwindcss-blend-mode # Install using npm npm install --save-dev ...
css中的@mixin的用法
yangpengze的博客
07-07 2698
@mixin指令允许您定义可以在整个样式表中重复使用的样式，而避免了使用无语意的类（class），混入(@mixin)还可以包含所有的 CSS 规则，以及任何其他在 Sass 文档中被允许使用的东西，甚至可以携带 arguments，引入变量等，这就意味着只需少量的混入(@mixin)代码就能输出多样化且不重复的样式。@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。@include 指令可以将混入（mixin）引入到文档中。混入(mixin)通过 @mixin 指令来定义。 @mixin
CSS color-mix() 函数
Yiu的博客
03-22 855
color-mix() 是一个即将推出的 CSS 颜色函数，它能够根据指定的颜色模型（如 RGB、HSL 或 Lab）对两个或多个颜色进行混合。mix-color: 想要混合到背景颜色上的颜色。background-color: 背景色，即混合的基准颜色。[weight]（可选）: 一个介于0到1之间的数字，表示混合色的比例，默认值为 50%（即0.5）。当 weight 更接近 0 时，混合结果更接近 background-color；反之，更接近 mix-color。例如：body {
【CSS】2022新特性
DomCode
12-26 810
CSS 2022 新特性很大一部分是将 HTML 原生能力暴露出来，赋能给业务自定义，不过如果这些状态完全由业务来实现，比如 Antd 组件早已实现自定义下拉选项与样式，既然 HTML 没有提供自定义能力，就按照其交互用 DIV + JS 模拟一套实现出来，定制空间更大。但也有很多能力依赖浏览器实现，或者本身更适合实现在 CSS 侧，比如 @scope、subgrid、对颜色的处理等。
css mix-blend,CSS混合模式mix-blend-mode/background-blend-mode简介
weixin_29817227的博客
08-04 894
一、关于混合模式熟悉PS的人都应该知道混合模式：SVG以及Canvas中也有混合模式，本质上都是一样的。下面是一些常见的混合模式的算法：维基上也有说明。有兴趣可以了解下。本文内容则简单介绍CSS3出现了两个与混合模式有关的属性，mix-blend-mode和background-blend-mode.二、CSS3 mix-blend-mode首先，要知道”blend-mode”就是混合模式的意思。...
css mix-blend,详解CSS3的mix-blend-mode属性
weixin_39630813的博客
08-04 1213
1、相当于加了一个图层mix-blend-mode: multiply;2、相当于加了一个滤镜mix-blend-mode: screen;3、相当于加了一个图层和滤镜mix-blend-mode: overlay;4、会使图片变暗，出现变暗效果mix-blend-mode: darken;5、这个模式与darken相反，* 它的效果取决于源和背景颜色之间更浅的(色彩)。* 即将两像素的RGB值进...
深入探索CSS属性mix-blend-mode：创意叠加效果的艺术之旅
最新发布
艾恩小灰灰的博客
04-14 1740
属性为网页设计师和开发者提供了一种强大的视觉表达手段，通过控制元素间的颜色混合，可以创造出丰富多样的叠加效果，提升网页的视觉吸引力与艺术感。它允许元素的内容与其背后的背景或其他元素内容以特定的方式相互作用，从而实现复杂的叠加效果，提升页面视觉层次与艺术感。混合模式在CSS Paint API中是特有的，它计算元素内容与背景的每个像素颜色分量之和，如果结果小于255，则保留该值；如果等于0，则设为0。属性的原理、用法以及实际应用场景，辅以详尽的代码示例，帮助您掌握这一技术，开启网页设计的创意叠加之旅。
使用 CSS Color-Mix() 简化你的调色板
liuhao9999的博客
06-10 1050
使用 CSS Color-Mix() 简化你的调色板
CSS 颜色处理属性-mix-blend-mode
水水不水啊的博客
06-18 205
mix-blend-mode: 属性名称 描述 normal 默认值，不进行混合 multiply 将两个元素的颜色值进行相乘，产生一种颜色加深的效果 screen 将两个元素的颜色值进行屏幕混合，产生一种亮度增强的效果 overlay 将两个元素的颜色值进行叠加混合，产生一种颜色加深和亮度增强的效果 darken 将两个元素的颜色值进行比较，取较暗的颜色作为混合结果 lighten 将两个元素的颜色值进行比较，取较亮的颜色作为混合结果 color-dodge 将两个
CSS冷门属性 mix-blend-mode 制作文字镂空效果
全栈道路
09-25 1952
CSS冷门属性 mix-blend-mode 制作文字镂空效果 本篇文章为大家带来如何制作文字镂空效果，仅仅使用CSS样式进行处理，借助 mix-blend-mode 属性，将文字的颜色反转，从而实现视觉上镂空。 更多文章在我的 Github 及个人公众号【全栈道路】上，欢迎观赏【一个不知名的足球狗的前端知识点】，如有受益，不要钱，小手点个Star。 阅读本文您将收获 mix-blend-mode 属性介绍 mix-blend-mode 可以实现哪些效果 mix-blend-mode 属性 .
CSS:mix-blend-mode 颜色混合
qq_45820271的博客
03-17 714
CSS的mix-blend-mode 颜色混合属性
js如何修改css得你可以使用CSS的mix-blend-mode
06-02
例如，你可以使用JS来获取一个元素的style属性，然后修改其mix-blend-mode属性。示例代码如下： ```html <div id="myDiv" style="mix-blend-mode: multiply;"> ``` ```javascript var myDiv = document....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值