前端小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>

前端小demo_day02_聚光灯(CSS)实现相关推荐

【前端小点】CSS之background背景属性详解
本篇文章我们将一起展开来看css的background背景属性. 一.结构创建DIV <div class="div1">1 </div> 样式 widt ...
代码变油画，精细到毛发，这个前端小姐姐只用HTML+CSS，让美术设计也惊叹丨GitHub热榜...
晓查郭一璞发自凹非寺量子位报道 | 公众号 QbitAI HTML不是编程语言,但这并不妨碍精通它的大佬玩出花来. 普通的前端,用HTML+CSS制作网页,元素简单,工具丰富. 大佬级前端 ...
前端小项目（一）| 电影院座位预定（html，css，js）
前端小项目(一)| 电影院座位预定前言开始好好学习前端啦.学紫色爱心记录一波!! 初步学了html,css,js,在github上找了几个前端小项目模仿着练练手.第一个就是电影院座位预定页面,主要 ...
代码变油画，精细到毛发，这个前端小姐姐只用HTML+CSS，让美术设计也惊叹丨GitHub热榜
HTML不是编程语言,但这并不妨碍精通它的大佬玩出花来. 普通的前端,用HTML+CSS制作网页,元素简单,工具丰富. 大佬级前端,用HTML+CSS绘画,全程不用PS.AI这种图形化的图片编辑器,单 ...
【我的前端】前端项目小练习：CSS创建3D圆柱旋转效果
前端项目小练习:CSS创建3D圆柱旋转效果文章目录前端项目小练习:CSS创建3D圆柱旋转效果 HTML标记样式化 CSS 3D 圆柱体动画圆柱体
css清除浮动的几种方法_web前端学习路线分享CSS浮动-清除浮动篇
web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响.那么到底会有什么影响呢? 1．高度塌陷举个例子我们看一下. 我们在 ...
前端基础知识总结---CSS篇
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出! 目录 1.介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的? 2.CSS 选 ...
前端总结·基础篇·CSS
前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;} /* IE8+ */body {margin:0;} ...
（简单课设）前端小白刚做的一个简单的移动端项目的分享和总结
前端小白刚做的一个简单的移动端项目的分享和总结所用技术为简单的div+css 直接上图片代码部分小滴服务接下来是企业项目部分接下来是我的小滴部分 (另外两个部分内容非常简单,没必要粘贴代码了 ...

前端小demo_day02_聚光灯(CSS)实现

前端小demo_day02_聚光灯(CSS)实现

写在前面

效果展示

需求来源

所用到的组件以及知识储备

实现思路

代码展示

前端小demo_day02_聚光灯(CSS)实现相关推荐

最新文章

热门文章