css 光影掠过文字效果

光影:通过渐变背景图产生
文字上有光影:background-clip:text;属性

效果图:
文字上白色的光影是会移动的

代码示例:

html, body {width: 100%;height: 100%;background-image: radial-gradient(ellipse farthest-side at 40% 0%, #455A64 0%, #263238 60%, #1a2327 100%);display: flex;
}p {    //没啥用处position: relative;margin: auto;font-size: 5rem;word-spacing: 0.2em;display: inline-block;line-height: 1;white-space: nowrap;color: transparent;background-color: #E8A95B;background-clip: text;
}p::after { //这里开始实现效果content: attr(data-text);position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 5;//生成的光影渐变背景background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);background-clip: text;background-size: 150% 100%;background-repeat: no-repeat;animation: shine 5s infinite linear;   //这里光影通过背景位置改变产生,也能使用@property产生过渡
}@keyframes shine {0% {background-position: 50% 0;}100% {background-position: -190% 0;}
}

css 光影掠过文字效果相关推荐

css 光影掠过文字显现动画
思路:整体背景为黑色,文字所在背景使用渐变色设置为黑白渐变,使用背景剪裁到文字上,然后控制背景size,移动背景位置,即可实现当背景为白色时,显现文字效果图: 代码示例: <!DOCTYPE ...
jQuery和CSS制作霓虹灯文字效果
原文:jQuery和CSS制作霓虹灯文字效果源代码下载地址:http://www.zuidaima.com/share/1607121521200128.htm
html鼠标悬停效果_【开发小技巧】023—如何使用HTML和CSS实现3D文字效果
来源 | https://www.geeksforgeeks.org/create-a-3d-text-effect-using-html-and-css/3D文字效果是网页设计领域中最常用的文字效果 ...
纯CSS实现的文字效果还可以这么酷炫
大家好,我是前端实验室的大师兄! 前言 CSS是一门很特殊的语言,你认为CSS只能用来控制网页的结构与样式,但只要你有丰富的想象力,就能创造无限可能. 本文中大师兄为你精选了5个使用纯CSS实现的文字 ...
纯CSS实现的文字效果
大家好,我是前端实验室的大师兄! 前言 CSS是一门很特殊的语言,你认为CSS只能用来控制网页的结构与样式,但只要你有丰富的想象力,就能创造无限可能. 本文中大师兄为你精选了10个使用纯CSS实现的文 ...
css实现空心文字效果
在日常开发中大家很有可能会遇到需要手动实现空心文字效果实现方式一 (空心字体) <style> .text{-webkit-text-stroke: 1px black; // 根据需求 ...
记录-css实现交融文字效果
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 CSS是有魔法的,我们今天来实现一个CSS的动画效果,只需要几行代码就可以搞定. 第一步.我们要将一行文字从中间展开 <!DOCTY ...
css实现立体投影文字效果
非常立体的字,偶然在某个系统看到的,扒下来以备日后使用.原始页面上还有鼠标移动到某个字上就会有"点亮"的效果,不知道怎么实现的,我仔细查看了它的css代码以及事件,发现都没有.实在 ...
CSS ::selection 选中文字效果
::selection伪元素,用来定义用户鼠标已选择内容的样式测试代码: p::selection{ background: #45caaf; color: #fff; } p::-moz-sele ...

css 光影掠过文字效果

css 光影掠过文字效果相关推荐

最新文章

热门文章