纯CSS实现四种方式文本反差色效果
如上图所示,文字随着界面的交互变化会修改文字的颜色形成反差色,让平平无奇的文字产生了眼前一亮的效果。如果你关注设计和动画效果,这样的效果肯定见过不少,在一些比较注重设计的网站都有类似的交互效果出现。本文将详细解读有哪些方案可以实现文本反差色效果。
动画效果一
文字蓝色背景颜色从左往右延伸至整个元素,文字背景颜色伴随着背景颜色覆盖过程中发生颜色的变化,且两段文字有着不同的颜色。
实现过程
如图所示两个颜色的背景是两个元素,一个绿色盒子,一个蓝色盒子,其中绿色盒子使用定位的层级z-index
高于蓝色盒子;通过改变蓝色盒子的宽度覆盖绿色盒子;盒子里面的文字内容宽度固定,否则两段文本不能刚好重叠。
核心代码如下:
<div id="left-side" class="side"><h2 class="title">前端开发<span class="fancy">南城FE</span> </h2>
</div>
<div id="right-side" class="side"><h2 class="title">前端开发<span class="fancy">南城FE</span> </h2>
</div>
.side {display: grid;height: 100vh;overflow: hidden;place-items: center;position: absolute;width: 100%;
}.side .title {font-size: 2vw;margin: 0px 10vw;text-align: center;width: 80vw;
}#left-side {width: 50%;z-index: 2;
}
动画效果二
随着页面的滚动,灰色区域逐渐变大,原效果出处灰色区域是一张图片,为了GIF的加载速度,改成了灰色背景。图片变大的同时,文字在逐渐变小,且逐渐融入到盒子的内部,文字颜色从在盒子外部的黑色变更成为盒子内部的白色,形成文字反差色效果。
实现过程
此效果相比较本文动画效果一更为复杂,不再只是由一个维度的变化形成反差色,而是多个维度同时在变化。大体原理和效果一相差不大,略微有些区别。
整体还是两个盒子,中间灰色区域的元素层级
z-index
高于纯文本元素两个元素中的文本内容尺寸大小固定不变
灰色元素使用
clip-path
裁剪元素背景,该属性可以裁剪多种图形,示例中使用inset()
裁剪矩形,同理其他的形状也是可以的。
核心代码如下:
<div class="out"><div class="warpper"><div class="text-wrapper">南 城 F E</div></div><div class="bg-wrapper"><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dae42da0ace3424d84b3bdc58c922296~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?"/><div class="text-wrapper">南 城 F E</div></div>
</div>
.out {position: relative;
}
.warpper {position: absolute;
}
.bg-wrapper {position: absolute;z-index: 0;animation: run 2s infinite alternate-reverse;
}@keyframes run {0% {clip-path: inset(47.5px 150px); }100% {clip-path: inset(147.5px 350px); }
}
源码在线预览: https://code.juejin.cn/pen/7117913609337831455
动画效果三
按钮的鼠标悬停动画效果,悬停时,按钮背景区域从左往右出现黑色背景,且黑色背景内的文字颜色从默认的黑色变更为白色,形成反差色。这种效果主要借助于background-clip: text
,该属性主要的功能是将背景裁剪成文字的前景色,该属性目前还不是所有浏览器都完全支持,谷歌浏览器还需要设置-webkit-
前缀支持。
![](/assets/blank.gif)
实现过程
类似形成反差色的悬停动画效果种类还有很多,如背景动画的运动方向不同,或者将背景区域分成多个区域进行不同的动画等。先不考虑动画的情况下,先看以下图片分析代码实现。
背景黑色区域文字颜色形成反差,设置
background-clip: text, padding-box;
背景黑色区域呈平行四边形,其实就是正常的黑色矩形被旋转角度了,只不过这里因为黑色背景之外的效果还是正常的,所以这个被旋转的背景是由白色黑色白色多段颜色组成,这里使用
linear-gradient
实现,需要主要的是这里使用了background-clip: text
,所以最终的背景色值是体现在文字的颜色上设置
background-position
让黑色背景区域在元素可视区之外,hover
时再改变background-position
即可产生动画效果
核心代码如下:
.inverted-8 {background:linear-gradient(-45deg, #000 40%, #fff 0 60%, #000 0) right/300% 100% no-repeat,linear-gradient(-45deg, #0000 40%, #000 0 60%, #0000 0) right/300% 100% no-repeat;-webkit-background-clip: text, padding-box;background-clip: text, padding-box;
}
.inverted-8:hover {background-position: left;transition: 0.8s
}
多种悬停效果源码在线预览: https://code.juejin.cn/pen/7118274756322787341
动画效果四
此效果类似效果一,文本在两个不同的背景颜色中移动,文字产生反差色效果
实现过程
该效果看似和效果一类似,但是代码实现大不一样,不再需要创建多个DOM元素,背景颜色使用linear-gradient
渐变生成。文本元素使用mix-blend-mode: difference
,就可实现反差色的效果。看着是不是太简单了,主要就是用到了mix-blend-mode
,通常称之为混合模式,而difference
意为差值模式,该模式下会检查每个通道中的颜色信息,比较底色和绘图色,用较亮的像素点的像素值减去较暗的像素点的像素值。由于黑色的亮度值为0,白色的亮度值为255,因此用黑色着色不会产生任何影响,用白色着色则产生被着色的原始像素颜色的反相。
核心代码如下:
div {height: 100vh;font-size: 30px;background: linear-gradient(90deg, rgb(0, 0, 0) 50%, #fff 50%);display: flex;justify-content: center;align-items: center;span {position: absolute;top: 50%;left: 50%;color: #fff;transform: translate(-50%, -50%);animation: move 2s infinite linear alternate;mix-blend-mode: difference;}
}
@keyframes move {0% {transform: translate(-30%, -50%);}100% {transform: translate(-70%, -50%);}
}
纯色模式下黑白色的反差效果是最好的,因为其反差颜色是自动生成的,不能像效果一完全自定义CSS颜色,如果是其他的颜色在实际使用的时候还是需要多加取舍。但如果是在图片背景中应用此模式的效果相对不错,因为会自动计算反差色,在遇到不同的像素会形成不同的反差。
源码在线预览: https://code.juejin.cn/pen/7118362939152662535
总结
本文列举了CSS中文字形成反差色的几种效果及不同的实现方式,每种方式都有对应的优缺点,有实际的业务使用场景需多加参考选择最合适的方案使用。如效果一对颜色的使用很灵活,但是需要创建重复的DOM,而效果四代码简洁明了,但是遇到非黑白色时需要斟酌使用。现代的CSS十分强大,除此之外如果你有其他的方案欢迎留言交流。看到最后如果觉得有用,记得点个赞收藏起来,说不定哪天就用上啦。
「专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)」
参考链接
Super Header Slider
css-hover-effects-background-masks-3d
神奇的 CSS,让文字智能适配背景颜色
mozilla-clip-path
纯CSS实现四种方式文本反差色效果相关推荐
- 引入css的方式的四种方式,引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 style. ...
- 【转载】HTML导入css的四种方式
原始链接 在HTML中引2113入CSS的方法主要有四种5261,它们分别是行内式.内嵌式.链4102接式和导入式.1653 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体 ...
- CSS——在HTML中引入CSS的四种方式
1.HTML标签内联样式 2.style标签内写css 3.link标签导入css样式 <link rel="stylesheet" type="text/css& ...
- 引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 <li ...
- 添加CSS的四种方式
1.直接添加在HTML的标识符(标签)里: <p style="color: blue;font-size: 12pt">样式</p> 2.添加在HTML ...
- js 复制文本的四种方式
一.总结 一句话总结:js文本复制主流方法:document的execCommand方法 二.js 复制文本的四种方式 纯 转载复制,非原创 原地址:http://www.cnblogs.com/xh ...
- css样式引入形式php,引入css样式表的四种方式介绍
一.使用STYLE属性: 将STYLE属性直接加在个别的元件标签里. 这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STYLE标签: 将样式规则写在标签之 ...
- HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...
- css设置子盒子水平垂直居中(四种方式)
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
- P21-前端基础-CSS颜色四种表示方式
P21-前端基础-CSS颜色四种表示方式 1.概述 颜色单位: 在CSS中可以直接使用颜色名来设置各种颜色 比如:red.orange.yellow.blue.green - - 但是在css中直接使 ...
最新文章
- Services(服务)
- 接收率25.9%,ICCV 2021接收论文列表放出,你中了吗?
- Opencv 使用cv2改变视频分辨率和尺寸
- eclipse下拉框里的选项怎么鼠标单击表判断_领导让我预测下一年销量,怎么办?...
- 【02】把 Elasticsearch 当数据库使:过滤和排序
- 数模国赛要点与注意事项全分享!
- oracle中创建表的自增ID
- Ubuntu16.04使用时的一些问题总结
- sping加载bean都发生了些什么
- 【AD封装】贴片插件晶振(带3D)
- Yolov5+Resnet+Flask实现唇语识别系统
- 2016年我的学习记录与搜索到的网站,将持续更新,主要介绍我在公司应用ecshop的学习记录...
- 【读书笔记】掌控习惯_詹姆斯克里尔
- MER 音乐情感识别-论文笔记7
- 【计算机网络】网关和路由器功能的有哪些不同
- 全球及中国光电传感器行业商业模式分析及投资风险预测2022年版
- HART475艾默生手操器维修注意事项及指标特点
- EduCoder-程序设计技术R-函数-(第1关:求和)(第2关:回文数计算)(第3关: 编写函数求表达式的值)(第4关:阶乘数列)(第5关:亲密数)(第6关:公约公倍数)
- 【职场 菜鸟→老鸟】你应该知道的一些规则
- 360优化开机速度后慢了_为什么我用360开机优化以后开机速度变得更慢
热门文章
- A Game of Thrones(97)
- crontab 问号_Spring - Quartz - cronExpression中问号(?)的解释
- 下载jar源码时,出现:cannt not download source Sources not found for
- 洛谷 P1357 花园
- curly怎么读(curly怎么读音发音英语怎么说)
- 《天长地久》写照真实生活为何被影迷埋没不被欣赏
- 微信接口昵称在服务器乱码,微信网页开发获取用户昵称乱码 微信昵称包含emoji表情乱码的解决方案...
- Windows10 关闭传递优化
- Unity笔记-29-ARPG游戏项目-12-完善弓箭
- linux系统时间编程(2) 各种时间标准GMT、UTC、世界时、TAI