css两张图片怎么合在一起_web前端入门到实战:纯CSS实现两个球相交的粘粘效果...

6c4c957bde1946d0634e2bedf48d9dcd.png

这是一个纯粹利用CSS所做出来的效果,这个效果说穿了就是一个图像处理的原理,做法跟Photoshop里头的几乎一模一样,只是一个用图层和色版来制作,一个则是用CSS(把div当成图层思考就好了)。

从PhotoShop开始

一开始我们来玩Photoshop,会比直接写CSS来得容易理解(没有Photoshop的人也没关系,看完说明也就懂了),首先我们新增两个图层,一个里头放上红色的小球,另外一个里头放上黑色的大球。

108c9081215620f00699c9608b93d2d2.png

接着我们使用高斯模糊的滤镜,分别把小红球和大黑球模糊。

c2ffd4bcf145ae9dc99d0697558bd9ab.png

77c9159fc3a6f61363df59b584fc770f.png

再来我们新增一个“亮度与对比”的调整图层,勾选使用旧版,然后把对比数值往上拉,你就会看到神奇的现象。

2e92670b37a56f09748ce08938491de9.png

拉到边缘不再模糊之后,你就可以用鼠标尝试着把红球移动,就会发现红球与黑球交界的地方变成粘粘的效果心,这就是我们要做的效果!

2c3f2ce9c545c58a94b0d80fe358112b.gif

就这样,你已经知道如何用Photoshop来制作,同理,CSS也是用同样的方法,只是把图层换成了div而已,就这么简单。

CSS效果

首先我在HTML里头,放上一个class为redball的div当作红球,class为blackball的是黑球,这就是刚刚在PhotoShop里头的两个图层,接着在最外围放上一个class为effect的div,这就是我们的调整图层,完成后HTML代码的长相应该是这样:

<div class="effect"><div class="blackball"></div><div class="redball"></div>
</div>

只要对blackball和redball加入模糊的滤镜,对effect加入对比的滤镜,就能够达到Photoshop里面的特效,而模糊的滤镜必须使用filter:blur(数值),对比则使用filter:contrast(数值)。

56e1150e8dacbc979b1af2073748a7b3.gif

CSS的长相会长这样:

.effect{width:100%;height:100%;padding-top:50px;filter:contrast(10);background:#fff;
}
.blackball{width:100px;height:100px;background:black;padding:10px;border-radius:50%;margin:0 auto;z-index:1;filter:blur(5px);
}
.redball{width:60px;height:60px;background:#f00;padding:10px;border-radius:50%;position:absolute;top:70px;left:50px;z-index:2;filter:blur(5px) ;animation:rball 6s infinite;
}

忽略CSS里头那些定位数值,里头blur的数值设为5px,contrast的数值设为10,就可以看到红求黑球粘在一起了,至于该怎么让他们动起来呢?就要使用CSS3的animation,animation的程序如下:

@keyframes rball{0%,100%{left:35px;width:60px;height:60px;}4%,54%{width:60px;height:60px;}10%,60%{width:50px;height:70px;}20%,70%{width:60px;height:60px;}34%,90%{width:70px;height:50px;}41%{width:60px;height:60px;}50%{left:calc(100% - 95px);width:60px;height:60px;}
}

这里的keyframe写了很多,因为要让红球进入黑球时,水平方向会被压缩一下,然后再离开黑球的时候,水平方向会被拉长,如此一来才会更像有粘性的感觉,为了测试这个效果,可真是煞费我的苦心呀!(不过这里有个要注意的地方,由于位置上会自动去计算,所以要测试的话,最外层的effect宽度记得设为320px)

完成红球之后,要让两颗蓝色球合在一起再分开,也是同样的原理,下方列出两颗蓝色球的CSS,比较需要注意的地方是我让蓝色球合体之后会变大一些,分开的时候也会拉长。

1832c827afbc63e390dfef5cca0c6765.gif
.blueball1{width:80px;height:80px;background:#00f;padding:10px;border-radius:50%;position:absolute;top:230px;left:0;z-index:2;filter:blur(8px) ;animation:bball1 6s infinite;
}
.blueball2{width:80px;height:80px;background:#00f;padding:10px;border-radius:50%;position:absolute;top:230px;left:240px;z-index:2;filter:blur(8px) ;animation:bball2 6s infinite;
}
@keyframes bball1{0%,100%{left:0;top:230px;width:80px;height:80px;}20%{top:230px;width:80px;height:80px;}85%{top:230px;left:75px;width:90px;height:70px;}90%{top:228px;width:75px;height:85px;}50%{top:215px;left:110px;width:110px;height:110px;}
}
@keyframes bball2{0%,100%{left:240px;top:230px;width:80px;height:80px;}20%{top:230px;width:80px;height:80px;}85%{top:230px;left:165px;width:90px;height:70px;}90%{top:228px;width:75px;height:85px;}50%{left:110px;top:215px;width:110px;height:110px;}
}

就这样,单纯利用CSS就完成了一个粘粘的效果,坦白说我也不太清楚这个效果可以用在哪里,不过如果用在水底世界或一些loading的特效,应该是相当不赖的!

实战操作代码解析,更多web前端实战操作,学习指导,学习资源,点:前端技术分享

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/552164.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java 位运算取8位_Java 9 AOT 试用:仅支持 64 位 Linux和java.base 模块编译

Java 9 引入了 aot 编译方式&#xff0c;能够将 class 文件直接编译成可执行二进制文件。目前 Java 9 的 early access 版本已经提供了编译工具&#xff0c;让我们来看看它的功能吧。注意&#xff1a;按照 JEP 295 描述&#xff0c;目前版本的 AOT&#xff0c;仅支持 64 位 Lin…

mysql semisync 恢复_mysql半同步复制(semi_sync_replication)搭建及使用

mysql半同步复制(semi_sync_replication)搭建及使用google为mysql开发了一个补丁一个基于半同步的补丁&#xff0c;应用与mysql5.0。回来mysql打上了该补丁&#xff0c;并在5.5版本中使用。半同步复制的理念是什么呢&#xff1f;在数据库更改操作执行前&#xff0c;确保更改操作…

python怎么做回归分析_如何在Python中进行二维回归分析?

这是使用scipy.optimize.curve_fit拟合表面的示例Python代码,它使原始数据生成3D散点图,对错误进行3D散点图绘制,绘制表面图和轮廓图.更改它以使用您自己的数据和功能,您应该已完成. import numpy, scipy import scipy.optimize import matplotlib from mpl_toolkits.mplot3d i…

友元关系可以继承_私生子也有继承权!非婚生子女的继承关系如何认定?

阅读本文前&#xff0c;请您先点击上面的“蓝色字体”&#xff0c;再点击“关注”&#xff0c;这样您就可以继续免费收到文章了。每天都会有分享&#xff0c;都是免费订阅&#xff0c;请您放心关注。注&#xff1a;本文转载自网络&#xff0c;不代表本平台立场&#xff0c;仅供…

mysql100多个字段如何优化_MySQL 调优/优化的 100 个建议

MySQL是一个强大的开源数据库。随着MySQL上的应用越来越多&#xff0c;MySQL逐渐遇到了瓶颈。这里提供 101 条优化 MySQL 的建议。有些技巧适合特定的安装环境&#xff0c;但是思路是相通的。我已经将它们分成了几类以帮助你理解。MySQL监控MySQL服务器硬件和OS(操作系统)调优&…

python时间序列预测不连续怎么办_python – 不连续的时间序列在x轴上绘制日期

我获得了几个月的数据,但在几个月之间缺失了.如果我将整个数据集绘制在一个绘图中(其间有很多空白空间),这看起来很奇怪. 我写了一个小例子脚本来展示它是如何工作的(基于&#xff1a; Python/Matplotlib – Is there a way to make a discontinuous axis?) 问题&#xff1a;我…

普罗米修斯监控java项目_java学到什么程度可以出去实习?

把基础的知识学完&#xff0c;然后再学个框架&#xff0c;比如常见的SSH&#xff0c;SSM之类的&#xff0c;自己能用这个框架做个简单的项目&#xff0c;就可以了简单的来说就是把下方的视频教程学完就可以找工作了&#xff08;需要完整的资料可以找up&#xff09;Java零基础初…

mysql中 唯一约束的关键字是_mysql的约束

在mysql设计表中,有个概念叫做约束什么是约束约束英文&#xff1a;constraint约束实际上就是表中数据的限制条件约束种类mysql的约束大概分为以下几种:非空约束(not null)唯一性约束(unique)主键约束(primary key) PK外键约束(foreign key) FK检查约束(目前MySQL不支持、Oracle…

python 容器类型_Python容器类型公共方法总结

以下公共方法支持列表&#xff0c;元组&#xff0c;字典&#xff0c;字符串。 内置函数 Python 包含了以下内置函数&#xff1a; 函数 描述 备注 len(item) 计算容器中元素个数 del(item) 删除变量 del 有两种方式 max(item) 返回容器中元素最大值 如果是字典&#xff0c;只针对…

叉乘点乘混合运算公式_小学36年级必须掌握的数学公式和概念口诀,替孩子收藏一下!...

小学数学需要记住的知识点还是比较多的&#xff0c;看到这些知识点&#xff0c;很多孩子都觉得枯燥&#xff0c;不愿意用心去记。如果我们把一种新的、有趣的记忆方法教给孩子&#xff0c;孩子也会变得有兴趣&#xff0c;因为兴趣是最好的老师。一、20以内进位加法看大数&#…

python图像数独_Python图像识别+KNN求解数独的实现

Python-opencvKNN求解数独最近一直在玩数独&#xff0c;突发奇想实现图像识别求解数独&#xff0c;输入到输出平均需要0.5s。整体思路大概就是识别出图中数字生成list&#xff0c;然后求解。输入输出demo数独采用的是微软自带的Microsoft sudoku软件随便截取的图像&#xff0c;…

上位机与1200组态步骤_西门子1200的HSC的应用实例!

高速计数器寻址CPU 将每个高速计数器的测量值&#xff0c;存储在输入过程映像区内&#xff0c;数据类型为 32 位双整型有符号数&#xff0c;用户可以在设备组态中修改这些存储地址&#xff0c;在程序中可直接访问这些地址&#xff0c;但由于过程映像区受扫描周期影响&#xff0…

cmd代码表白_手把手教你把Python代码转成exe

【文末有福利】很多刚入门的盆友都有疑惑怎么把Python代码转成可执行的exe&#xff1f;&#xff0c;这里行哥统一解决一下这个问题1.在cmd里安装pyintsaller包2.在cmd里输入打包成exe的命令3.问题总结4. pyintsaller --help5. end1.在cmd里安装pyintsaller包第一步安装将Python…

searchview 点击后被覆盖_03实战Jacoco统计代码覆盖

本篇内容主要介绍&#xff1a;在gradle项目中添加jacoco来了解工程的代码覆盖情况。自动化的统计代码覆盖情况&#xff0c;有助于将焦点问题可视化&#xff0c;从而决定什么时候采取什么动作进行改进。Jacoco可以方面的添加在测试执结束&#xff0c;进行代码覆盖率的统计。如果…

电脑功耗软件_台式电脑配置详解!

近期有许多做设计的朋友问我&#xff0c;怎么配一台工作用的电脑&#xff0c;今天就给大家介绍一下电脑的各个组成部分。电脑核心配置&#xff0c;一般指CPU、主板、显卡三大件&#xff0c;一般笔记本电脑不需要考虑主板&#xff0c;只需考虑CPU和显卡两大件。1.CPU的选择现在的…

docker mysql优势_前端使用docker有什么优势呢?

那么如果使用docker有什么优势呢&#xff1f;你觉得docker没啥用&#xff0c;自然是因为你没遇到这样的场景&#xff0c;所以就算强行上了docker&#xff0c;也会觉得非常别扭。想了想前端用docker好像确实不是非常必要&#xff0c;npm build以后出来一堆静态文件&#xff0c;扔…

ios python3.0编程软件_ios编程软件-7款学习Python编程的iPhone/iPad应用

Python部落组织翻译&#xff0c;禁止转载&#xff0c;欢迎转发 Python是一种极受欢迎的编程语言&#xff0c;无论你是为机器人还是树霉派编码&#xff0c;都可以使用Python&#xff0e;想学习这门语言&#xff1f;这&#xff17;个APP会对你有帮助&#xff1a; Pythonista 3: 这…

spring定时器突然不执行了_非标自动化设备之PLC定时器的时间和程序扫描周期

扫描周期是PLC本身执行指令时的周转时间。PLC执行指令按梯形图是从左向右&#xff0c;从上到下执行。每执行一遍就顺便扫描一遍所有元件状态并按指令执行相应动作。这个是需要时间吧&#xff0c;把这个时间叫扫描周期。并如此无限循环下去。当然扫描周期越短&#xff0c;PLC性能…

python 中arange函数_浅谈Python中range与Numpy中arange的比较

本文先比较range与arange的异同点&#xff0c;再详细介绍各自的用法&#xff0c;然后列举了几个简单的示例&#xff0c;最后对xrange进行了简单的说明。1. range与arange的比较(1)相同点&#xff1a;A、参数的可选性、默认缺省值是一样的&#xff1b;B、结果均包括开始值&#…

python入门小游戏之跳一跳_从零基础开始,用python手把手教你玩跳一跳小游戏,直接打出高分...

这对于很多人来说&#xff0c;可能是已经过时的游戏&#xff0c;但是对于python入门来说&#xff0c;却是一个非常值得学习的项目。TONOW收集了很多有关python入门的项目案例&#xff0c;包含了相应的教程和源码&#xff0c;哪怕你从未接触编程&#xff0c;也通过这些教程&…