CSS实现好看的聚光灯效果
发布时间：2024-02-27 16:19:25 作者：设计师工作日常 
我要评论
我要评论这篇文章主要为大家详细介绍了CSS中如何使用 -webkit-background-clip 和 clip-path ，并配合 animation 属性实现一个好看聚光灯效果,感兴趣的小伙伴可以跟随小编一起学习一下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
整体效果
使用 -webkit-background-clip 和 clip-path ，并配合 animation 属性，实现一个好看聚光灯效果。
可适用于页面加载或展示页面大标题内容。
核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。
核心代码
html 代码
<div?class="spotlight18"?data-cont="spotlight">spotlight</div>
主体部分一个 div 标签。
css 部分代码
.spotlight18{
??color:?#eaeaea;
??font-size:?40px;
??font-weight:?900;
??text-transform:?uppercase;
??position:?relative;
}
.spotlight18:before{
??width:?inherit;
??height:?inherit;
??content:?attr(data-cont);
??clip-path:?ellipse(32px?32px?at?0?50%);
??color:?transparent;
??background-image:?linear-gradient(90deg,?#4158D0?0%,?#C850C0?30%,?#FFCC70?66%,?#56e28d?100%);
??-webkit-background-clip:?text;
??position:?absolute;
??top:?0;
??left:?0;
??animation:?spotlight18?8s?linear?infinite;
}
@keyframes?spotlight18{
??0%{
????clip-path:?ellipse(32px?32px?at?0?50%);
??}
??50%{
????clip-path:?ellipse(32px?32px?at?100%?50%);
??}
??100%{
????clip-path:?ellipse(32px?32px?at?0?50%);
??}
}用 background-image 的 linear-gradient 拉出渐变背景，让文字颜色透明 color: transparent ，然后配合 -webkit-background-clip: text 给文字实现渐变效果，最后加上动画属性 animation 并设置 clip-path 参数就可以啦。
注意：这里使用的是 -webkit-background-clip ，而不是 background-clip 。
完整代码如下
html 页面
<!DOCTYPE?html> <html?lang="zh"> ??<head> ????<meta?charset="utf-8"> ????<link?rel="stylesheet"?href="style.css"> ????<title>聚光灯效果</title> ??</head> ??<body> ????<div?class="app"> ??????<div?class="spotlight18"?data-cont="spotlight">spotlight</div> ????</div> ??</body> </html>
css 样式
/**?style.css?**/
.app{
??width:?100%;
??height:?100vh;
??background-color:?#ffffff;
??position:?relative;
??display:?flex;
??justify-content:?center;
??align-items:?center;
}
.spotlight18{
??color:?#eaeaea;
??font-size:?40px;
??font-weight:?900;
??text-transform:?uppercase;
??position:?relative;
}
.spotlight18:before{
??width:?inherit;
??height:?inherit;
??content:?attr(data-cont);
??color:?transparent;
??background-image:?linear-gradient(90deg,?#4158D0?0%,?#C850C0?30%,?#FFCC70?66%,?#56e28d?100%);
??-webkit-background-clip:?text;
??position:?absolute;
??top:?0;
??left:?0;
??animation:?spotlight18?8s?linear?infinite;
}
@keyframes?spotlight18{
??0%{
????clip-path:?ellipse(32px?32px?at?0?50%);
??}
??50%{
????clip-path:?ellipse(32px?32px?at?100%?50%);
??}
??100%{
????clip-path:?ellipse(32px?32px?at?0?50%);
??}
}页面渲染效果
到此这篇关于CSS实现好看的聚光灯效果的文章就介绍到这了,更多相关CSS聚光灯内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
本篇文章主要介绍了css自定义属性和聚光灯效果的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-02
箭头动画是一种常见的交互式元素,可以在网页中用于引导用户，本文主要介绍了CSS实现菜单箭头动画效果，具有一定的参考价值，感兴趣的可以了解一下2024-02-23
今天来实现一个多行文本擦除的效果，有种经典咏流传节目中表演开始前阅读诗句的一些既视感，在工作中其实也遇到过这样的需求当时是用的其他方法来实现的，需要的朋友可以参2024-02-18
这篇文章主要为大家详细介绍了如何使用CSS实现一个雨滴滑落效果，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
在现代前端开发中，为网站添加吸引人的动画效果是提高用户体验的一种常见方式,其中，呼吸灯效果是一种简单而又引人注目的动画，下面就跟随小编一起深入学习一下如何利用CSS2023-12-25
为了良好的用户体验，需要在容器顶部可滚动的情况下增加一个阴影条，提示用户可向上滚动，本文主要为大家详细介绍了如何使用CSS实现简单的滚动阴影效果，有需要的小伙伴可2023-12-12
彩虹是一种美丽而多彩的自然现象，通过使用CSS，我们可以在网页上实现类似的彩虹效果,本文给大家介绍了一个简单的示例，展示了如何使用CSS实现彩虹的效果,需要的朋友可以参2023-11-01
实现打字机效果的关键是两个动画效果，文字出现的动画，和光标闪烁出现的动画,本文小编给大家介绍了如何使用CSS实现打字机效果，文章通过代码示例介绍的非常详细,需要的朋2023-10-23
要在文本中实现渐变色效果，我们可以使用CSS中的background-clip属性和CSS渐变来实现,本文给大家分享一个代码示例，展示如何创建文本渐变色效果，感兴趣的同学可以自己动手2023-10-16
最新评论