css两张图片怎么合在一起_web前端入门到实战:纯CSS实现两个球相交的粘粘效果...
这是一个纯粹利用CSS所做出来的效果,这个效果说穿了就是一个图像处理的原理,做法跟Photoshop里头的几乎一模一样,只是一个用图层和色版来制作,一个则是用CSS(把div当成图层思考就好了)。
从PhotoShop开始
一开始我们来玩Photoshop,会比直接写CSS来得容易理解(没有Photoshop的人也没关系,看完说明也就懂了),首先我们新增两个图层,一个里头放上红色的小球,另外一个里头放上黑色的大球。
接着我们使用高斯模糊的滤镜,分别把小红球和大黑球模糊。
再来我们新增一个“亮度与对比”的调整图层,勾选使用旧版,然后把对比数值往上拉,你就会看到神奇的现象。
拉到边缘不再模糊之后,你就可以用鼠标尝试着把红球移动,就会发现红球与黑球交界的地方变成粘粘的效果心,这就是我们要做的效果!
就这样,你已经知道如何用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(数值)。
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,比较需要注意的地方是我让蓝色球合体之后会变大一些,分开的时候也会拉长。
.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前端实战操作,学习指导,学习资源,点:前端技术分享
css两张图片怎么合在一起_web前端入门到实战:纯CSS实现两个球相交的粘粘效果...相关推荐
- css文字向右对齐_web前端入门到实战:css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
- after不显示_web前端入门到实战:css实现单行、多行文本超出显示省略号
前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line {border: ...
- html设置样式不继承_web前端入门到实战:css的核心原理分为优先级原则与继承原则两大部分...
css原理:1.优先原则=>后解析的内容会覆盖之前解析的内容(所谓解析就是读取的css样式)2.继承原则=>嵌套里面的标签拥有外部标签的某些样式,子元素可以继承父元素的属性 1>优先 ...
- css 高度塌陷_web前端入门到实战:CSS 负边距的行为表现
CSS 中的负边距 margin 是可以设置为负值的,这会帮你实现靠近顶部/左边相邻元素的效果,或者实现靠近底部/右边相邻元素的效果. 先介绍下我们的测试元素:一个简单的包含三个段落的容器元素.注意, ...
- 前端背景图放置_web前端入门到实战:css 中的背景图片小技巧和存在的坑
body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...
- button按钮的属性设置_web前端入门到实战:CSS实现8种炫酷按钮
今天给大家分享8种炫酷按钮的CSS实现. 1. 3D按钮1 现在的主流是扁平化的设计,拟物化的设计比较少见了,所以我们仅从技术角度去分析如何实现这个3D按钮 该按钮的立体效果主要由按钮多出的左.下两个 ...
- css实现快速抖动效果_web前端入门到实战:CSS实现照片堆叠效果
实现效果 步骤 1.初始index.html 为了建立第一张照片,也就是最上面的那张.我们只需要添加一个div,里面包含照片的img.就这么多,剩下的效果都是通过CSS来实现的.确保div的class ...
- 前端悬浮窗效果_web前端入门到实战:css过渡和动画解析文
一.transition 过渡 过渡效果一般由浏览器直接改变元素的CSS属性实现,从一种状态过渡到另一种状态. 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 第一.在默认样式中声明元素的初始 ...
- css 横线_web前端入门到实战:CSS 搞怪的 text-decoration
一个莫名其妙的属性:text-decoration,这个属性,其实就只是用来把一段文字加上上横线.删除线或底线的属性罢了,通常会用在移除超链接的底线.或一些特殊强调的效果里头,但是这么容易的属性,为什 ...
最新文章
- 40个多线程问题总结
- Android开源框架——图片加载与缓存库 Picasso
- fiddler过滤特定资源
- python判断几个数最大最小_python 找出list中最大或者最小几个数的索引方法
- mapper同时添加数据只能添加一条_springcloud项目搭建第二节:eureka+数据库
- 简析LIVE555中的延时队列
- redis安装、配置和启动
- CSS中可以让文字在水平和垂直方向上重叠的两个属性
- 图标缩排和悬浮突显的简单实现
- Axure 9.0激活码亲测可用
- C语言--16进制转字符串
- 97、锐捷交换机常用配置命令汇总
- 设置屏幕亮度,并且监听屏幕亮度变化
- 局域网https安全证书解决方案mkcert
- 免证书发布ipa文件真机测试
- 电影评论分类:二分类问题(IMDB数据集)
- NFT 的潜力:扩展的艺术品鉴定证书
- context.write
- 程序员赚外快到底有哪些途径?干货篇
- 小心做好个人隐私保护!别让笔记本电脑成为隐私泄露的“间谍”
热门文章
- [P2P技术]如何配置JXTA Shell(airclh)
- python读取mysql数据库_Python操作MySQL数据库9个实用实例
- redis java 遍历key_java遍历读取整个redis数据库实例
- 程序代码错误检测_错误检测代码
- Java Calendar toString()方法与示例
- mysql 视图 字典_MySQL深入01-SQL语言-数据字典-服务器变量-数据操作DML-视图
- 格力电器Java面试题_JAVA设计模式学习--工厂模式
- stm32 ucosii消息队列 串口_STM32F1的UART4串口配置
- ronald aai_AAI的完整形式是什么?
- chroot函数使用_PHP chroot()函数与示例