前端小demo_day02_聚光灯(CSS)实现
写在前面
前端练习的第三天,今天实现了一个聚光灯的效果,看到这个效果的第一眼的时候,就感觉会用到我们第一天学习到的一个新属性clip-path
,一起来实现以下吧
效果展示
需求来源
前端常用css样式实现,作为练习使用
所用到的组件以及知识储备
- 如何修改字体颜色渐变
/*设置背景颜色渐变*/ background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%); /*背景切片:按照div的文字来裁剪背景*/ -webkit-background-clip: text; /*字体颜色更改为透明,字体透明之后才能显示出现背景的颜色,以此来作用到文字上*/ color: transparent;
- 切割图片
clip-path
属性- 表示用圆形去分割组件,达到隐藏和显示的效果,例如开始的时候我们设置在最左边,那么在比例之外的其它部分都将被隐藏
/*0%表示全部隐藏,用圆形切割的半径大小是总站比的0%,20%和50%是用来定位的,20%定位圆心的x坐标,50%定位圆心的y坐标*/ clip-path: circle(0% at 20% 50%);
- 表示用圆形去分割组件,达到隐藏和显示的效果,例如开始的时候我们设置在最左边,那么在比例之外的其它部分都将被隐藏
实现思路
首先放置一个盒子,使其背景是灰色,用来表示当前是没有灯光照射的部分,刚开始肯定就是全部无灯光照射啦!
其次就是利用这个盒子的::before
或者::after
,设置一个相同的背景,是彩色渐变的,
默认是隐藏的,然后就是添加我们的clip-path
了,用圆形切片来模拟灯光部分,有了思路就来实现以下试试吧!
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day_003_聚光灯</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
align-items: center;
justify-content: center;
display: flex;
min-height: 100vh;
}
#main{
position: relative;
font-size: 80px;
/*增加字体间距*/
/*letter-spacing: 5px;*/
color: gray;
}
#main::after{
position: absolute;
top: 0;
left: 0;
border-radius: 20px;
content: "Hello World";
background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
-webkit-background-clip: text;
color: transparent;
clip-path: circle(10% at 0% 50%);
animation: spotlight 4s infinite;
}
@keyframes spotlight {
0%{
clip-path: circle(10% at 0% 50%);
}
50%{
clip-path: circle(10% at 100% 50%);
}
100%{
clip-path: circle(10% at 0% 50%);
}
}
</style>
</head>
<body>
<h1 id="main">
Hello World
</h1>
</body>
</html>