当前位置：首页 > Web前端 > HTML

纯CSS实现四种方式的文字对比色效果

时间：2023-03-28 12:26:08 HTML

如上图，文字会随着界面的交互变化修改文字的颜色，形成对比色，让普通的文字产生醒目的效果.如果你关注设计和动画效果，你一定见过很多这样的效果，类似的交互效果出现在一些更注重设计的网站上。本文将详细讲解哪些方案可以实现文字对比色效果。动画效果1.文字的蓝色底色从左到右延伸到整个元素。文字底色随底色覆盖过程而变化，两段文字颜色不同。实现过程如图所示。两种颜色的背景是两个元素，一个绿色框和一个蓝色框，其中绿色框使用比蓝色框更高的z-index；通过改变蓝色框Box的宽度来覆盖绿色；框中文字内容的宽度是固定的，否则两段文字不能刚好重叠。核心代码如下：前端开发南城FE

前端开发南城FE

.side{显示：网格；高度：100vh；溢出：隐藏；放置项目：中心；位置：绝对；宽度：100%；}.side.title{字体大小：2vw；边距：0px10vw；文本对齐：居中；宽度：80vw；}#left-side{宽度：50%；z-index:2;}动画效果2随着页面滚动，灰色区域逐渐变大。原效果来自灰色区域的一张图片，为了GIF的加载速度，改为灰色背景。图片变大的同时，文字也变小，逐渐融入到方框内部。文字颜色由框外黑色变为框内白色，形成文字对比效果。实现过程这个效果比本文的动画效果1要复杂一些。不再只是一个维度的变化形成对比色，而是多个维度同时发生变化。大体原理和效果差别不大，只是略有不同。整体还是两个框，中间灰色区域的元素级z-index高于纯文本元素。两个元素中文本内容的大小是固定的。灰色元素使用clip-path来裁剪元素背景。示例中使用了inset()来裁剪矩形，其他形状也可以。核心代码如下：

南城FE

南城FE.out{position:relative;}.warpper{position:absolute;}.bg-wrapper{位置：绝对；z-索引：0；animation:run2sinfinitealternate-reverse;}@keyframesrun{0%{clip-path:inset(47.5px150px);}100%{剪辑路径：插图（147.5px350px）；}}源码在线预览：https://code.juejin.cn/pen/71...动画效果三个按钮的鼠标悬停动画效果，悬停时，背景区域出现黑色背景按钮从左到右，黑色背景里面的文字颜色由默认的黑色变成了白色，以对比。这个效果主要是基于background-clip:text。该属性的主要作用是将背景裁剪成文本的前景色。并非所有浏览器都完全支持此属性。谷歌浏览器也需要设置-webkit-前缀支持。悬停动画效果的种类很多，类似于形成对比色的实现过程，比如背景动画的不同运动方向，或者将背景区域分成多个区域进行不同的动画等等。先不考虑动画，先看下图分析代码实现??。黑色背景区域的文字颜色形成对比，设置background-clip:text,padding-box;黑色背景区域是一个平行四边形，其实就是旋转了正常的黑色矩形，但是因为是黑色背景所以效果是正常的，所以旋转后的背景是由白、黑、白多段色组成的。这里使用linear-gradient来实现。主要是这里使用了background-clip:text，所以最终的背景色值体现在文字的颜色上。background-position允许黑色背景区域在元素可见区域之外，然后在悬停时改变background-position产生动画效果。核心代码如下：.inverted-8{background:linear-gradient(-45deg,#00040%,#fff060%,#0000)right/300%100%no-repeat,linear-gradient(-45deg,#000040%,#000060%,#00000)right/300%100%no-repeat;-webkit-background-clip：文本，填充框；background-clip:text,padding-box;}.??inverted-8:hover{background-position:left;transition:0.8s}各种悬停效果源码在线预览：https://code.juejin.cn/pen/71...动画效果4这个效果和效果1类似，文字移动有两种不同的背景色，并且文本产生对比色效果。这个效果的实现过程看起来和第一个效果差不多，但是代码实现还是有很大区别的。不再需要创建多个DOM元素，背景颜色使用linear-gradient渐变生成。文本元素使用mix-blend-mode:difference来达到对比色的效果。看看是不是太简单了，主要还是用mix-blend-mode，也就是通常所说的混合模式，difference就是差异模式。在这种模式下，会检查每个通道中的颜色信息，并将背景颜色和背景颜色进行比较。绘制颜色，用较亮像素的像素值减去较暗像素的像素值。由于黑色的亮度值为0，而白色的亮度值为255，因此用黑色着色没有任何效果，用白色着色会产生原始像素颜色的反色。核心代码如下：div{height:100vh;字体大小：30px；背景：线性渐变（90deg，rgb（0、0、0）50%，#fff50%）；显示：弹性；证明内容：居中；对齐项目：居中；跨度{位置：绝对；顶部：50%；左：50%；颜色：#fff；转换：翻译（-50%，-50%）；动画：移动2s无限线性交替；mix-混合模式：差异；}}@keyframes移动{0%{变换：翻译（-30%，-50%）；}100%{转换：翻译（-70%，-50%）；}}纯色模式黑白对比效果最好，因为对比色是自动生成的，不能像效果1那样完全自定义css颜色，如果是其他颜色，还是要多权衡-offs在实际使用中。但是如果在图片背景中应用这种模式，效果还是比较不错的，因为对比色会自动计算出来，遇到不同的像素就会形成不同的对比。源码在线预览：https://code.juejin.cn/pen/71...总结本文列举了CSS中文本对比色的几种效果和不同的实现方法。每种方法都有自己的优点和缺点。有实际的业务使用场景需要更多的参考来选择最合适的方案。比如效果双色的使用非常灵活，但是需要创建一个重复的DOM，而效果四的代码简洁明了，但是遇到非黑的时候需要谨慎使用白色的。现代CSS非常强大。另外，如果大家有其他解决方案，欢迎留言交流。如果最后觉得有用，记得点赞收藏，说不定哪天你会用到。专注前端开发，分享前端相关技术干货，公众号：南城大学前端（ID：nanchengfe）参考链接SuperHeaderSlidercss-hover-effects-background-masks-3dmagicCSS，让文本智能适应背景颜色mozilla-clip-path

上一篇：一键部署开箱即用的代理服务器，解决SAPUI5应用开发中访问远程OData服务的跨域问题

下一篇：8.9W播放量的TS动画进阶教程合集来了！

纯CSS实现四种方式的文字对比色效果相关文章

最新推荐

猜你喜欢