当青训营遇上码上掘金

前言

据说世界上两个陌生人相遇且相识的概率是 0.0000005，相遇，是一个多么动人的名词。于这茫茫人海中，于这网海茫茫中，每天有多少的相遇擦肩而过，每天又有多少的匆匆擦肩而过。在寒假的这段时间里，我遇见了青训营，在这段时间学习的前端技术，来表达我们的相遇

实现原理之HTML

通过学习的HTML技术，使用了img标签和div标签来实现页面基本内容的展示，相遇的两个img标签。

                <div class="en">
                        <p class="p1">感</p>
                        <p class="p1">谢</p>
                        <p class="p1">相</p>
                        <p class="p1">遇</p>
                </div>
                <img src= class="p2" >
                    <img src= class="p3" >

主要元素内容的展示：

实现原理之CSS

在跳转后展示了感谢相遇，在P标签的背景上加入了渐变色彩，宛如跑马灯般美丽，这是一场美丽的相遇，也是一场缘分的到来。

            *{
                            margin: 0;
                            padding: 0;
                    }
                    body{
                            background-color: black;
                    }
                    .en{
                            width: 800px;
                            height: 200px;
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%,-50%);
                            display: none;
                            justify-content: space-around;
                            align-items: center;
                            flex-direction: row;
                            border-radius: 100px;
                            animation: s 8s infinite;
                    }
                    .en::before{
                            content: "";
                            position: absolute;
                            top: -5px;
                            right: -5px;
                            left: -5px;
                            bottom: -5px;
                            `background: linear-gradient(90deg,#b403f4,#9d41f4,#583bff,#03d8f4);`
                            background-size: 400%;
                            border-radius: 100px;
                            filter: blur(40px);
                            z-index: -1;
                            animation: s 8s infinite;
                    }
    

效果展示：

实现原理之JS

通过学习的JS技术，采用了定时器setTimeout，来实现页面跳转的展示。

        setTimeout(function() {
                        s.style.display='flex';
                }, 6000);
                setTimeout(function() {
                        p2.style.display='none';
                        p3.style.display='none';
                }, 6000);
                

总结

走在大街上,看着忙碌的行人。我迷茫着,是否通过不懈的努力,前方就一定能花开成海。而所有的一切却落地成冢。人生的每一场相遇，都是缘分。人生的每一个清晨，都该努力，不能拖延。每一次的相遇，就像一树树花开，在岁月的长廊芬芳，沉香萦绕，葱茏了秀丽风景，让心间盈一抹暖香，明媚了笑颜，婉约了美好的期待。就让我们相遇在青训营。

成果展示