[100天挑战100个前端效果]第二十天---聚光灯效果

最新推荐文章于 2022-09-16 14:40:10 发布
最新推荐文章于 2022-09-16 14:40:10 发布
阅读量216 收藏 1
点赞数
分类专栏： 100天挑战100个前端效果 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42136832/article/details/116146394
版权

聚光灯效果

我们先来看看实现的效果

在这里插入图片描述

html代码

<!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>第二十天</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <h1>人工智能技术作业</h1>
    </div>
</body>
</html>

css代码

*{
    margin: 0;
    padding: 0;
}
body{
    width: 100vw;
    height: 100vh;
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
h1{
    position: relative;
    font-size: 100px;
    color:#544e58
}
h1:before{
    position: absolute;
    /* 这里必须是Unicode编码 */
    content: '\4eba\5de5\667a\80fd\6280\672f\4f5c\4e1a';
    /* 颜色改为透明让背景色显示出来 */
    color:transparent;
    /* 使用linear-gradient函数生成一个渐变图片做背景 */
    background-image: linear-gradient(to right, #bed742, #f8aba6, #585eaa, #ed1941, #7fb80e, #f26522, #ffc20e, #7c8577, #009ad6, #65c294, #f47920, #f15b6c, #2e3a1f);
    /* 这个谷歌浏览器不起作用 */
    background-clip: text;
    /* 谷歌浏览器适配 */
    -webkit-background-clip: text;

    /* 制作一个斜矩形遮罩 使用polygon方法 */
    /* 矩形需要定义四个角的坐标，顺时针方向定义
    分别位左上，右上，右下，左下  单位为百分比*/
    clip-path:polygon(-20% 0%,0% 0%, -10% 100%,-30% 100%);
    /* 增加动画 */
    animation:light 2s infinite;

}

@keyframes light{
    0%{
        clip-path:polygon(-20% 0%,0% 0%, -10% 100%,-30% 100%);
    }
    50%{
        clip-path:polygon(100% 0%,120% 0%, 110% 100%,90% 100%);
    }
    100%{
        
        clip-path:polygon(-20% 0%,0% 0%, -10% 100%,-30% 100%);
    }
}

设计思路与今日份知识总结

中文转unicode地址
记得要去掉u
设计思路很简单，首先是背景色只影响文字，用到了-webkit-background-clip: text;
之后我们用clip-path来构建了一个菱形，这样配合前者就完成了一个矩形范围内的文字高亮了！
直接再写一个动画即可
基本也没用到什么新知识，但是效果还是比较惊艳吧！

标签作用
-webkit-background-clip:text背景控制只作用与文字(谷歌适配方法)
polygon此函数接受两个参数百分比或长度，用于保留多边形大小的值
钧桐
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
100DaysCSS-day6挑战
qq_62089165的博客
01-17 294
本挑战主题：你们谁知道你已经创建了多少个社交媒体资料？为了获得令人耳目一新的转折，您也可以自己创建一个。
100DaysCSS-day5挑战
最新发布
qq_62089165的博客
01-14 148
在数字世界中，能够正确解释它们很重要。漂亮的统计数据有助于捕获这些数据。
前端-聚光灯效果
ssswujunjie的博客
08-18 241
编辑器：vscode 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
[100天挑战100个前端效果]第一天---闪光按钮
あなたの可愛い41
03-20 283
闪光按钮我们先来看看效果的实现html代码css代码新学到的知识总结 我们先来看看效果的实现 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de
[100天挑战100个前端效果]第三天---实现导航条
あなたの可愛い41
03-22 123
导航条的实现我们先来看看效果的实现html代码css代码新学到的知识总结复习知识 我们先来看看效果的实现 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
100-days-css-challenge
03-31
100天CSS挑战 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
前端小demo_day02_聚光灯(CSS)实现
miao-miao-zi
09-16 192
聚光灯（CSS）实现
100天CSS
03-04
100天CSS
[100天挑战100个前端效果]第十八天---动态搜索框
あなたの可愛い41
04-12 231
动态搜索框先让我们来看看实现的效果html代码css代码今日份知识总结 先让我们来看看实现的效果 html代码 <!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第十八天
WebGL实践篇（十）—— 光照：聚光灯
weixin_44207506的博客
05-09 622
1.聚光灯的实现 光线从某个点照亮所有方向，而聚光灯只选择其中一个方向，将其他光线方向与所选方向点乘并选择限定范围，判断光线是否在限定范围内，如果不在则不照亮。 首先给定一个点乘限定，如果与选定聚光灯方向的点乘大于这个点乘限定，则照亮，否则不照亮。 片段着色器： <script id="fragment-shader-3D" type="x-shader/x-fragment"> precision mediump float; varying vec3 v.
#100DaysOfMLCode Challenge: 100天机器学习挑战（持续更新）
大羚羊的学习博客
08-05 2652
这是一个由Youtuber Siraj Raval发起的机器学习挑战活动，旨在号召大家每天至少花1个小时的时间在Machine Learning的学习上，内容涵盖了机器学习，深度学习等很多方面。 活动有Github链接，在量子位公众号的一篇文章里有对这个活动的详细描述。 截止到我写这篇文章的时候这项活动已经开始了25天了。虽然有些迟了，但是还是准备参加，觉得坚持学习下来这100天可以巩固一下...
在vuepress博客添加樱花特效(vue樱花组件源码)
あなたの可愛い41
08-03 1113
vuepress博客还没有樱花？支棱起来！
[100天挑战100个前端效果]第六天---icon图标hover填充效果(如此染色甚好！)
あなたの可愛い41
03-25 749
icon图标hover填充效果让我们先来看看实现的效果html代码iconfont.css代码style.css代码今天份知识总结 让我们先来看看实现的效果 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
[100天挑战100个前端效果]第二十一天---switch切换按钮
あなたの可愛い41
04-30 358
switch切换按钮让我们先来看看实现的效果html(包含js)代码css代码设计思路与今日份知识总结设计思路今日份知识总结 让我们先来看看实现的效果 html(包含js)代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met
[100天挑战100个前端效果]第二十二天---荧光色旋边框
あなたの可愛い41
05-12 284
荧光色旋边框让我们先来看看实现的效果html代码css代码设计思路与今日份知识总结设计思路知识总结 让我们先来看看实现的效果 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c
[100天挑战100个前端效果]第十九天---人物介绍卡片效果(猜猜是哪三个大佬？)
あなたの可愛い41
04-14 272
人物介绍卡片效果让我们先来看看实现的效果html代码css代码今日份知识总结 让我们先来看看实现的效果 html代码 <!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第
[100天挑战100个前端效果]第十五天---3d堆叠图片UI布局特效(深夜打开,图片效果超级加倍！)
あなたの可愛い41
04-07 265
3d堆叠图片UI布局特效让我们先来看看实现的效果html代码css代码今日的知识总结和设计分析 让我们先来看看实现的效果 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
[100天挑战100个前端效果]第十三天---跳动的爱心(有详细的思路分析！)
あなたの可愛い41
04-01 264
跳动的爱心先让我们来看看实现的效果html代码css代码代码思路分析和知识总结 先让我们来看看实现的效果 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
[100天挑战100个前端效果]第二天---流光按钮
あなたの可愛い41
03-21 217
流光按钮我们先来看看效果的实现html代码css代码新学到的知识总结 我们先来看看效果的实现 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值