开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

一、前端基础三件套的总结

大家好，我又菜又爱玩的前端小白-翼，刚刚折腾明白前端的基础部分知识，费曼技巧的核心就是究极的凝练和简化，以下用一张图总结前端的基础知识。

信息图表——金字塔图.png 前端体系里面藏龙卧虎，昨天在前端交流群里有人给我推荐了Blender，结合WebGL和Three.js能做出来很棒的视觉效果，我在阿B上也发现1个Spline的工具，做交互非常棒，后面学习完成后，把这些整理成3D交互的东西，搞成GIF，并且可以直接复用到前端项目中，非常的有意思。

二、怎么样去巩固学习的前端知识

众所周知，作为一名产品汪，掌握一点点格斗也是必备的求生技能，是一个很合理的事情，学习格斗又是从挨打和无数次的刻意练习开始，这种经验同样适用于平移到前端知识的学习，任何知识体系的构建和技能的实用化道理也是一样，光是学习知识和整理笔记，不做案例不直接撸代码，不产出作品一样无法将知识进行内化，并在做的过程中发现知识掌握的盲点，并有针对性进行往复的循环和迭代。

毒打爱好者的日常

三、结合实际案例的练习，兴趣和富有成就感的正向反馈循环

大量的练习是枯燥和繁琐的，通过产品设计的思维，如何将案例和训练模式变得更加有趣，富有成就感以及合适的难度设计，运用正向循环体系就显的非常重要了,结合本次的学习打卡，对前端基础动效做一个梳理和复习，结合实际业务场景，对常见的CSS动效做一个应用练习，将知识梳理并关联起来，夯实自己的知识树。
通过最基本的应用练习，通过掌握的知识点组合形成比较好的视觉和交互方案，给予客户较好的视觉和体感，同时在于前端沟通和方案评估以及工作量评估上面，也有可以量化的实际体验和指导思路：

第一天，从较为简单的聚光灯效果开始：

代码如下：

<!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>
    <style>
        * {
            /* 取消页面的内外边距 */
            margin: 0;
            padding: 0;
        }
        body {
            /* 设置背景图，不重复，设置填充满屏幕 */
           background-image: url(https://i0.hdslb.com/bfs/article/8c24ce0ec150adaaa3d5c60d5fd59d9d942c8e02.png@1256w_708h_progressive.webp); 
           background-repeat:no-repeat;
           background-size:100% 100%;
            /* 弹性布局，水平垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 100%的窗口高度 */
            height: 100vh;
        }
        h1 {
            color: #333;
            font-size: 80px;
            /*  开启相对定位 */
            position: relative;
        }
        h1::after {
            content: "孤独站在这舞台,听到掌声响起来";
            /* 颜色透明 */
            color: transparent;
            position: absolute;
            top: 0;
            left: 0;
            background: linear-gradient(to right,#ff59b3,#fe0000,#ffff01,#40e1d2,#410098,#9400d3);
            /* 以文字的范围裁剪背景图片 */
            background-clip: text;
            -webkit-background-clip: text; 
            /* 将元素裁剪为一个圆形（100px表示园的直径，0% 50%表示圆心的位置） */
            clip-path: circle(100px at 0% 50%);
            /* 执行动画  动画  时长  infinite表示无限次播放      */
            animation: light 15s infinite;
        }
            /* 定义动画，改变圆心的位置 */
        @keyframes light{
                 /* 分成5段平滑过渡 */
            0%{
                clip-path: circle(100px at 0% 25%);
            }
           25%{
                clip-path: circle(100px at 25% 50%);
            }
            50%{
                clip-path: circle(100px at 100% 75%);
            }
            75%{
                clip-path: circle(100px at 75% 50%);
            }
            100%{
                clip-path: circle(100px at 0% 50%);
            }
        }

    </style>
</head>
<body>
    <h1>孤独站在这舞台,听到掌声响起来</h1>
</body>
</html>

所对应的知识点复习：

前端菜鸟成长-三件套练习1

一、前端基础三件套的总结

二、怎么样去巩固学习的前端知识

三、结合实际案例的练习，兴趣和富有成就感的正向反馈循环