Web前端学习笔记（十一）---聚光灯效果

Demo展示

源代码

index.html

<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>编译中梦见未来</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="logo"><!-- 这里增加一个logo --><svg t="1597299759277" class="icon" viewBox="0 0 2241 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2120" data-spm-anchor-id="a313x.7781069.0.i0" width="100" height="100"><path d="M626.875127 734.992893c-32.227411-24.430457-68.613198-41.583756-106.038579-56.657868-76.410152-30.148223-156.458883-41.063959-238.067005-38.984772-19.232487 0-38.464975 1.559391-58.217259 2.598985 0-1.559391-1.559391-3.638579-1.559391-6.237563-5.19797-58.217259-11.435533-116.434518-15.593909-173.612183-3.638579-47.82132-5.19797-95.64264-6.237563-143.463959-1.559391-92.004061-1.559391-183.488325-1.559391-275.492386 0-21.831472-1.559391-19.232487-18.192893-11.95533-51.459898 20.791878-102.4 41.063959-153.859898 60.816244C25.989848 93.563452 23.390863 98.761421 24.430457 101.360406c15.593909 58.217259 27.029442 117.993909 34.826396 177.250761 7.796954 51.459898 14.554315 101.360406 21.831472 151.780711 6.237563 44.182741 10.395939 88.365482 15.593909 133.06802 5.19797 45.222335 11.435533 90.44467 16.633503 136.186802 5.19797 43.662944 10.395939 85.766497 15.593909 129.429442 3.638579 31.187817 6.75736 61.855838 9.356345 93.043655 1.559391 24.430457 3.638579 48.860914 4.158376 72.251777 0 5.19797 1.559391 7.796954 6.75736 7.796954 11.435533 0 21.831472 1.559391 32.747208 0 53.019289-5.19797 106.038579-8.836548 158.018274-16.633503 40.024365-6.237563 79.009137-15.593909 117.474112-28.588832 54.57868-18.192893 101.360406-49.380711 146.582741-85.246701 19.232487-14.554315 34.826396-32.227411 41.583756-54.57868C660.142132 780.215228 653.904569 755.264975 626.875127 734.992893L626.875127 734.992893zM327.472081 908.085279c-7.796954-58.217259-15.593909-114.875127-23.390863-171.013198 30.148223 6.75736 156.97868 57.177665 163.216244 64.974619C421.035533 836.873096 375.293401 872.219289 327.472081 908.085279L327.472081 908.085279zM932.515736 763.061929c-2.598985-30.148223-5.19797-61.855838-8.836548-92.004061-3.638579-41.583756-7.796954-83.167513-11.435533-125.271066-3.638579-38.464975-5.19797-76.410152-7.796954-114.875127-3.638579-53.019289-7.796954-106.038579-11.435533-159.057868l-7.796954-117.474112c-1.039594-14.554315-6.75736-18.192893-21.831472-17.153299-18.192893 1.559391-35.86599 2.598985-54.058883 3.638579-15.593909 1.559391-31.187817 3.638579-46.261929 5.19797 46.781726 248.462944 67.573604 497.445685 92.004061 744.349239 28.588832 2.598985 54.57868 4.158376 81.608122 6.75736 5.19797 1.039594 7.796954 0 7.796954-5.19797l-2.598985-28.588832C939.792893 829.076142 936.154315 795.809137 932.515736 763.061929L932.515736 763.061929zM790.091371 794.249746c-3.638579-31.187817-6.75736-61.855838-10.395939-93.043655-3.638579-35.346193-6.75736-71.212183-11.435533-106.558376-2.598985-21.831472-6.237563-42.62335-9.356345-63.415228-1.039594-7.796954-6.237563-11.435533-14.554315-10.395939-14.554315 1.559391-30.148223 1.559391-45.222335 3.638579-20.791878 2.598985-41.583756 6.237563-63.415228 8.836548 25.989848 135.667005 51.979695 268.215228 79.009137 402.84264 31.187817-4.158376 60.816244-7.796954 90.964467-11.435533-1.039594-10.395939-2.598985-20.791878-3.638579-30.148223C797.888325 860.263959 793.729949 826.996954 790.091371 794.249746L790.091371 794.249746zM1100.929949 933.035533c-1.039594-51.459898-2.598985-101.360406-3.638579-152.820305-1.039594-63.415228 0-127.870051 0-191.285279 0-14.034518-1.039594-27.029442-1.559391-41.063959 0-6.237563-3.638579-11.435533-10.395939-11.435533-27.029442-1.039594-54.57868-1.559391-81.608122-1.559391-10.395939 0-19.752284 1.559391-30.148223 3.638579 1.039594 3.638579 1.039594 6.237563 1.039594 8.836548 3.638579 43.662944 7.796954 86.806091 11.435533 129.429442 3.638579 41.583756 7.796954 84.207107 11.435533 125.790863 4.158376 45.222335 7.796954 90.44467 11.95533 135.667005 0 2.598985 4.158376 6.75736 6.75736 6.75736 27.549239 1.039594 56.657868 0 85.766497 0C1100.929949 939.273096 1100.929949 935.634518 1100.929949 933.035533L1100.929949 933.035533zM750.067005 470.936041c-5.19797-49.380711-9.356345-96.162437-14.034518-143.983756-1.039594-6.237563-3.638579-9.356345-8.836548-9.356345-16.633503 0-33.786802 0-51.459898 1.039594 6.75736 53.019289 12.994924 103.959391 19.752284 156.458883C714.720812 473.535025 731.874112 473.015228 750.067005 470.936041L750.067005 470.936041zM1093.132995 478.732995 1093.132995 346.704569c0-9.356345-3.638579-11.95533-11.435533-11.95533l-45.222335 0 0 151.780711c19.752284 1.039594 38.464975 1.559391 56.657868 2.598985L1093.132995 478.732995 1093.132995 478.732995zM673.656853 477.173604l0-10.395939c-2.598985-27.029442-6.237563-53.019289-8.836548-80.048731-1.559391-17.153299-3.638579-33.786802-5.19797-51.459898-1.039594-4.158376 1.039594-10.395939-6.237563-9.356345-16.633503 1.559391-32.747208 5.19797-49.380711 6.75736 9.356345 51.459898 18.192893 101.360406 27.549239 151.780711L673.656853 477.173604 673.656853 477.173604zM1017.762437 486.010152 1017.762437 407.001015c0-20.791878-1.039594-42.62335 0-63.415228 0-7.796954-2.598985-9.356345-9.356345-9.356345l-46.261929 0c4.158376 54.058883 7.796954 104.998985 11.95533 155.419289C988.13401 488.609137 1002.168528 487.569543 1017.762437 486.010152L1017.762437 486.010152zM1017.762437 486.010152" p-id="2121" fill="#FF6659"></path><path d="M1728.84467 734.992893c-32.227411-24.430457-68.613198-41.583756-106.038579-56.657868-76.410152-30.148223-156.458883-41.063959-238.067005-38.984772-19.232487 0-38.464975 1.559391-58.217259 2.598985 0-1.559391-1.559391-3.638579-1.559391-6.237563-5.19797-58.217259-11.435533-116.434518-15.593909-173.612183-3.638579-47.82132-5.19797-95.64264-6.237563-143.463959-1.559391-92.004061-1.559391-183.488325-1.559391-275.492386 0-21.831472-1.559391-19.232487-18.192893-11.95533-51.459898 20.791878-102.4 41.063959-153.859898 60.816244-1.559391 1.039594-4.158376 6.237563-3.638579 8.836548 15.593909 58.217259 27.029442 117.993909 34.826396 177.250761 7.796954 51.459898 14.554315 101.360406 21.831472 151.780711 6.237563 44.182741 10.395939 88.365482 15.593909 133.06802 5.19797 45.222335 11.435533 90.44467 16.633503 136.186802 5.19797 43.662944 10.395939 85.766497 15.593909 129.429442 3.638579 31.187817 6.75736 61.855838 9.356345 93.043655 1.559391 24.430457 3.638579 48.860914 4.158376 72.251777 0 5.19797 1.559391 7.796954 6.75736 7.796954 11.435533 0 21.831472 1.559391 32.747208 0 53.019289-5.19797 106.038579-8.836548 158.018274-16.633503 40.024365-6.237563 79.009137-15.593909 117.474112-28.588832 54.57868-18.192893 101.360406-49.380711 146.582741-85.246701 19.232487-14.554315 34.826396-32.227411 41.583756-54.57868C1762.111675 780.215228 1755.874112 755.264975 1728.84467 734.992893L1728.84467 734.992893zM1429.441624 908.085279c-7.796954-58.217259-15.593909-114.875127-23.390863-171.013198 30.148223 6.75736 156.97868 57.177665 163.216244 64.974619C1523.005076 836.873096 1477.262944 872.219289 1429.441624 908.085279L1429.441624 908.085279zM2034.485279 763.061929c-2.598985-30.148223-5.19797-61.855838-8.836548-92.004061-3.638579-41.583756-7.796954-83.167513-11.435533-125.271066-3.638579-38.464975-5.19797-76.410152-7.796954-114.875127-3.638579-53.019289-7.796954-106.038579-11.435533-159.057868l-7.796954-117.474112c-1.039594-14.554315-6.75736-18.192893-21.831472-17.153299-18.192893 1.559391-35.86599 2.598985-54.058883 3.638579-15.593909 1.559391-31.187817 3.638579-46.261929 5.19797 46.781726 248.462944 67.573604 497.445685 92.004061 744.349239 28.588832 2.598985 54.57868 4.158376 81.608122 6.75736 5.19797 1.039594 7.796954 0 7.796954-5.19797l-2.598985-28.588832C2041.762437 829.076142 2038.123858 795.809137 2034.485279 763.061929L2034.485279 763.061929zM1892.060914 794.249746c-3.638579-31.187817-6.75736-61.855838-10.395939-93.043655-3.638579-35.346193-6.75736-71.212183-11.435533-106.558376-2.598985-21.831472-6.237563-42.62335-9.356345-63.415228-1.039594-7.796954-6.237563-11.435533-14.554315-10.395939-14.554315 1.559391-30.148223 1.559391-45.222335 3.638579-20.791878 2.598985-41.583756 6.237563-63.415228 8.836548 25.989848 135.667005 51.979695 268.215228 79.009137 402.84264 31.187817-4.158376 60.816244-7.796954 90.964467-11.435533-1.039594-10.395939-2.598985-20.791878-3.638579-30.148223C1899.857868 860.263959 1895.699492 826.996954 1892.060914 794.249746L1892.060914 794.249746zM2202.899492 933.035533c-1.039594-51.459898-2.598985-101.360406-3.638579-152.820305-1.039594-63.415228 0-127.870051 0-191.285279 0-14.034518-1.039594-27.029442-1.559391-41.063959 0-6.237563-3.638579-11.435533-10.395939-11.435533-27.029442-1.039594-54.57868-1.559391-81.608122-1.559391-10.395939 0-19.752284 1.559391-30.148223 3.638579 1.039594 3.638579 1.039594 6.237563 1.039594 8.836548 3.638579 43.662944 7.796954 86.806091 11.435533 129.429442 3.638579 41.583756 7.796954 84.207107 11.435533 125.790863 4.158376 45.222335 7.796954 90.44467 11.95533 135.667005 0 2.598985 4.158376 6.75736 6.75736 6.75736 27.549239 1.039594 56.657868 0 85.766497 0C2202.899492 939.273096 2202.899492 935.634518 2202.899492 933.035533L2202.899492 933.035533zM1852.036548 470.936041c-5.19797-49.380711-9.356345-96.162437-14.034518-143.983756-1.039594-6.237563-3.638579-9.356345-8.836548-9.356345-16.633503 0-33.786802 0-51.459898 1.039594 6.75736 53.019289 12.994924 103.959391 19.752284 156.458883C1816.690355 473.535025 1833.843655 473.015228 1852.036548 470.936041L1852.036548 470.936041zM2195.102538 478.732995 2195.102538 346.704569c0-9.356345-3.638579-11.95533-11.435533-11.95533l-45.222335 0 0 151.780711c19.752284 1.039594 38.464975 1.559391 56.657868 2.598985L2195.102538 478.732995 2195.102538 478.732995zM1775.626396 477.173604l0-10.395939c-2.598985-27.029442-6.237563-53.019289-8.836548-80.048731-1.559391-17.153299-3.638579-33.786802-5.19797-51.459898-1.039594-4.158376 1.039594-10.395939-6.237563-9.356345-16.633503 1.559391-32.747208 5.19797-49.380711 6.75736 9.356345 51.459898 18.192893 101.360406 27.549239 151.780711L1775.626396 477.173604 1775.626396 477.173604zM2119.73198 486.010152 2119.73198 407.001015c0-20.791878-1.039594-42.62335 0-63.415228 0-7.796954-2.598985-9.356345-9.356345-9.356345l-46.261929 0c4.158376 54.058883 7.796954 104.998985 11.95533 155.419289C2090.103553 488.609137 2104.138071 487.569543 2119.73198 486.010152L2119.73198 486.010152zM2119.73198 486.010152" p-id="2122" fill="#FF6659"></path></svg></div><div><h1>编译中梦见未来</h1></div>
</body>
</html>

style.css

* {margin: 0;padding: 0;
}body {width: 100vw;height: 100vh;background-color: #000;display: flex;justify-content: center;align-items: center;/* 布局方式改为列模式 */flex-direction: column;
}.logo {/* 向上偏移100个像素 */margin-top: -100px;/* 增加一个渐显动画 *//* 动画名称为show_logo *//* 持续时间2秒 *//* 动画线性结束放慢 *//* 延迟时间为0秒 *//* 动画循环执行1次 *//* 结束停止在最终帧 *//* 统一使用show动画 */animation: show 2s ease-out 0s 1 forwards;
}/* 定义动画 从开始到结束透明度从0到1 */
/* 统一使用一个动画 */
/* @keyframes show_logo {0% {opacity: 0;}100% {opacity: 1;}
} */h1 {position: relative;font-size: 100px;color: #544E58;/* 默认状态为透明度0，不显示 */opacity: 0;/* 增加动画，显示名字 *//* 动画名称show_name *//* 持续2秒 *//* 线性开始结束放慢 *//* 延迟0.5秒 *//* 执行1次 *//* 结束时停在最后一帧 *//* 统一使用show动画 */animation: show 2s ease-in-out 0.5s 1 forwards;
}/* 创建动画透明度从开始0到结束1  */@keyframes show {0% {opacity: 0;}100% {opacity: 1;}
}h1::before {position: absolute;/* 这里必须是Unicode编码 *//* 注意：转换完毕去掉\后面的U */content: '\7f16\8bd1\4e2d\68a6\89c1\672a\6765';/* 颜色改为透明让背景色显示出来 */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%);/* 增加动画 *//* 动画名称light *//* 持续时间2秒 *//* 延迟0秒执行 *//* 直接方式循环 *//* 延迟2秒执行等待显示 */animation: light 2s 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%);}
}

学习来源

UP：编译中梦见未来
链接：https://space.bilibili.com/432444813/video?tid=0&page=2&keyword=&order=pubdate

Web前端学习笔记（十一）---聚光灯效果相关推荐

Web前端学习6个有效果软件，你值得拥有!
想要让程序猿可以快速有效的工作,辅助工具是非常有必要的,不管是刚学习web前端技术的同学还是已经进入工作的学员,都需要学习和掌握一些Web前端开发工具和软件,Web前端学习6个有效果软件,你值得拥有! ...
web前端学习笔记（最新）
web前端学习笔记大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程. 一:什么是WEB前端? 所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展 ...
web前端学习笔记（2）
文章目录前言二十一.嵌套列表 21.1 嵌套代码 21.2 小练习二十二.表格标签 22.1表格相关标签二十三.表格属性 23.1表格属性二十四.表单input标签 24.1表单标签 24. ...
Web前端学习笔记（1）
文章目录一.第一部分 1.1内容一 Web前端导入二.第二部分 2.1内容一 HTML和CSS的定义三.第三部分 3.1内容一宇宙第一编译器Vs Code 3.2内容二快捷键的使用四.第四 ...
Web前端学习笔记学习路线图
随着互联网的快速发展, web前端行业发展前景较好,虽然web前端薪资高入门门槛低, 但是俗话说的好:入门容易,精通难.web前端开发的知识点繁多,所以,要想真正全部掌握web前端工程师开发技能,并非 ...
web前端学习笔记总页面
学习资料自学视频求知讲堂web前端html+css 参考文档 MDN 书单你不知道JavaScript JavaScript设计模式和开发实践 css世界 css揭秘什么是web前端开发 we ...
极客学院web前端学习笔记（一）概况
终于到暑假啦!暑假开始重新(x)学习web前端,其实html和css早已有所接触,但是js接触较少,直接原因是下学期大概要给学弟学妹们解答一些前端基础相关的问题,所以希望在暑假好好整理归纳一下知识体系 ...
web前端学习笔记（初识HTML）
目录 1.简介 2.Html的历史: 3.常用的工具 4.网页的基本信息: 5.网页的标签: 6.安装我们的idea 7.配置idea 8.特殊符号: 9.链接标签: 10.锚链接: 11.功能性链接 ...
web前端学习笔记——JQuery
web前端开发基础第五章--JQuery 传送门:第一章:HTML | 第二章:CSS | 第三章:html5和CSS3 | 第四章:Javascript(part 1) | 第四章--Javasc ...

Web前端学习笔记（十一）---聚光灯效果

Demo展示

源代码

学习来源

Web前端学习笔记（十一）---聚光灯效果相关推荐

最新文章

热门文章