css 光影掠过文字显现动画

思路：整体背景为黑色，文字所在背景使用渐变色设置为黑白渐变，使用背景剪裁到文字上，然后控制背景size，移动背景位置，即可实现当背景为白色时，显现文字

效果图：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{height: 100vh;display: flex;background-color: black;}.f{margin: auto;}.n{font-size: 60px;color: transparent; //文字不能设置颜色，否则剪裁文字背景无法显示letter-spacing: 5px;background-image:linear-gradient(to right,#000,#fff,#000);-webkit-background-clip: text;background-size: 40%;background-repeat: no-repeat;background-position: center;animation: move linear 3s infinite;}@keyframes move{from{background-position: -100%;}to{background-position: 100%;}}</style>
</head>
<body><div class="f"><h1 class="n">hello world,hello everyone!</h1></div><script src="./1.js"></script>
</body>
</html>

css 光影掠过文字显现动画相关推荐

css 光影掠过文字效果
光影:通过渐变背景图产生文字上有光影:background-clip:text;属性效果图: 文字上白色的光影是会移动的代码示例: html, body {width: 100%;height: ...
纯CSS实现beautiful的3D动画
大家好,我是"前端点线面",一位新生代农民工,欢迎关注我获取最新前端知识和大量思维导图("百题斩"获取<前端百题斩>pdf版:分别回复"g ...
【前端第四课】CSS值和单位；CSS文字排版；CSS变换，过渡，动画；CSS定位
目标了解掌握CSS值和单位了解掌握CSS文字排版了解掌握CSS变换,过渡,动画了解掌握CSS定位 CSS的值和单位 https://developer.mozilla.org/zh-CN/do ...
HTML+CSS实现彩虹文字与聚光灯动画（background-clip和clip-path相关属性）
前端相较于后端等领域,能够在短时间内拥有可视化的成果,对于刚起步的小伙伴而言,这是不断努力学习提高的巨大动力,本篇博客抛砖引玉,利用HTML+CSS实现彩虹文字以及聚光灯动画效果,首先向大家介绍应用的 ...
css文字图片动画_文字图像互动动画
css文字图片动画 Following on from last week's issue (and inspired a bit by receiving the latest Type Direc ...
css 文字颜色渐变 animation,css3文字渐变动画
这次给大家带来css3文字渐变动画,实现css3文字渐变动画的注意事项有哪些,下面就是实战案例,一起来看一下. 利用css3这个属性(背景剪裁): background-clip: border-bo ...
html语言鼠标悬停特效,CSS3鼠标悬停文字幻影动画特效
这是一款CSS3鼠标悬停文字幻影动画特效.该特效利用before和after伪元素来制作当鼠标悬停在超链接文本上的时候的幻影效果. 使用方法在页面中引入bootstrap.css.jquery和ph ...
html文字抖动效果,CSS实现TikTok文字抖动效果示例
前端同学在日常开发中精彩会因为一些动效和设计争的面红耳赤,设计希望用代码实现,前端要设计出gif图,最后谁也不让谁,设计走了,留下了前端独自加班...... CSS技术是前端必须掌握的一项技能,不仅要 ...
HTML文字样式显示闪烁,怎么纯用css代码使文字展示闪动效果？（代码示例）
在网页中,通常设计师们为了凸显自己的产品主题,总会让文字或者加点特效,比如使文字不停的闪动,或有规律的变色.以便达到吸引人关注的目的.那么除了用ps制作的gif动画外,还有哪些方法可以实现这样的功能特 ...

css 光影掠过文字显现动画

css 光影掠过文字显现动画相关推荐

最新文章

热门文章