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

最新推荐文章于 2022-09-16 14:40:10 发布

海轰Pro

最新推荐文章于 2022-09-16 14:40:10 发布

阅读量2.4k

点赞数 1

分类专栏： Web前端文章标签： web前端聚光灯效果 css html

原文链接：https://space.bilibili.com/432444813/video?tid=0&page=2&keyword=&order=pubdate

版权

Web前端专栏收录该内容

107 篇文章 29 订阅

订阅专栏

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

海轰Pro

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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 r
复制链接

扫一扫