当青训营遇上码上掘金

前言

据说世界上两个陌生人相遇且相识的概率是 0.0000005 ，茫茫人海中相遇不易，我决定通过我学习过的前端开发技术来实现，两个人相遇后，感谢相遇的简单页面制作。

实现思路

HTML 篇

页面设计

在页面中实现img 图片页面展示，两个人相遇。使用内部div，使用图片相遇，叠加后默认跳转。

<img src="https://img1.baidu.com/it/u=2749307608,2678600364&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1678173497&t=dfa4b1a6642d410cf4f8a38375221f95" 
class="p2">
<img src="https://img1.baidu.com/it/u=3283533630,843850067&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1678173545&t=c45f6fa908d37a6af4a9549ef9901254"
class="p3">


	<div class="me">
		<p class="p1">感</p>
		<p class="p1">谢</p>
		<p class="p1">相</p>
		<p class="p1">遇</p>
	</div>
            
            

实现效果

CSS篇

效果设计

两个人相遇后，展现感谢相遇，实现炫酷的跑马灯展示，在文字底部展现，颜色变换

部分代码：

         .me::before{
		content: "";
		position: absolute;
		top: -5px;
		right: -5px;
		left: -5px;
		bottom: -5px;
		background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
		background-size: 400%;
		border-radius: 100px;
		filter: blur(40px);
		z-index: -1;
		animation: s 8s infinite;
	}
            
            

实现效果

JS篇

通过获取标签中元素，进行默认跳转

代码如下:

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

完整代码

总结

相遇 ，是人生中浪漫的邂逅，是情感的惊喜，带给我们生命的美好，带来爱情的美妙。相遇，皆是天意，有缘天涯咫尺，无缘咫尺天涯。生命中的所有相遇，皆有天意，是命中的安排，是前世的缘分，好好珍惜，每一份缘分，每一次遇见。 你不知道在什么时候会遇到一个什么样的人，但是每一场相遇都是有意义的，哪怕最后是告别。 有人说，生命本就是一场又一场的相遇，每一次相遇，都值得我们铭记。