第一点，就是要顺其自然。情侣两个人最好不要分开，尽量在同一个城市工作，这样感情比较容易保持下去。但是如果因为客观原因异地恋不可避免，那么顺其自然这件事情就变得尤为重要。

如果两人异地后恋爱温度迅速冷却下来，就意味着你们原来的相爱只是因为天天待在一起造成的假象，并不是真正“两情若是久长时，又岂在朝朝暮暮”的情感。如果情况是这样，我觉得这段感情结束了，其实对俩人并没有太大的伤害。

两个人应该享受一段各自独处的时光，加深对对方的思念，深刻挖掘对方的优点，这样的经历实际上对未来两人更好相处是有很大好处的。如果经受了异地恋的考验，两人仍然还能愉快相处，我认为这个感情就会比较长久和牢固。

第二点，要做好感情的交流和沟通工作。现在的通讯工具非常发达，我们可以每天通过微信、视频和语音进行交流，更可以互相赠送鲜花，这些都是比较好的感情维持方式。另外就是一定要常见面，最长一两个月就要在一起聚一下，见面的时间可长可短，两个人面对面的接触，对两人维持感情是特别重要的。现在交通工具也很发达，我认为在国内范围内，两人经常见面这件事情原则上应该不成问题。

第三点，两人都必须保持共同且持续进步的心态。如果一方在外努力工作、学习和进取，而另外一方却悠闲潇洒，不学习、不进取，只是等待着双方见面重聚，这种情况后果往往比较严重。

随着时间推移，其中一方的眼界会明显高过另外一方，到时候两人相聚在一起，很容易产生无法沟通交流的情况。所以我建议情侣双方一定要保持同步且持续的进步状态，多进行心灵上的交流，这样两人最后走到一起的可能性才会更大。

异地恋其实是对情侣双方感情的一种考验，如果最后仍旧在一起，相信你们两人会产生终生的、深刻的依恋，任何困难也不能把你们分开。

CSS3 流动边框（仿王者荣耀等待效果）的三种实现方式

累的。

腾讯在成都的部门算是挺多的了、天美（王者荣耀）、WXG、PCG 。薪酬福利：腾讯在成都的薪资体系是和总部对齐的参考去年校招，给的工资是17k，18.5k，20k，21.5k、23k五档。成都的 offer 给你工资的定档会稍微低一些。有租房补贴有食堂，全额住房公积金。

美团在成都主要是闪购、企业平台、餐饮生态、外卖。在成都这边的美团部门都比较边缘。薪酬福利：成都美团的薪资会在北京美团薪资基础上打个八五折，住房公积金8%。

:root {

--border-anim-size: 10em;

--border-anim-width: calc(var(--border-anim-size) / 20);

--border-anim-width-double: calc(var(--border-anim-width)*2);

--border-anim-duration: 5s;

--border-anim-border-color: gray;

--border-anim-hover-color: LightCoral;

}

body {

display: flex;

}

.border-anim {

width: var(--border-anim-size);

height: var(--border-anim-size);

position: relative;

border: 1px solid? var(--border-anim-border-color);

}

.border-anim::before, .border-anim::after {

content: '';

position: absolute;

border: var(--border-anim-width) solid var(--border-anim-border-color);

/* 让边框在内容区域内绘制 */

box-sizing: border-box;

transition: background-color 1s;

}

.border-anim::before {

animation: anim-border-run calc(var(--border-anim-duration) * 2) linear infinite;

}

.border-anim::after {

animation: anim-border-run calc(var(--border-anim-duration) * 2) calc(var(--border-anim-duration) / -1) linear infinite;

}

.border-anim:hover::before, .border-anim:hover::after {

background-color: var(--border-anim-hover-color);

}

.border-anim-content {

width: calc(100% - var(--border-anim-width-double));

height: calc(100% - var(--border-anim-width-double));

margin: var(--border-anim-width);

border: 1px solid var(--border-anim-border-color);

}

@keyframes anim-border-run {

/* 这里将动画分成了4步；也可以改为2步，这时before和after用的就要是两套keyframes了 */

from, to {

width: var(--border-anim-width-double);

height: 100%;

top: 0;

left: 0;

}

25% {

width: 100%;

height: var(--border-anim-width-double);

top: calc(100% - var(--border-anim-width-double));

left: 0;

}

50% {

width: var(--border-anim-width-double);

height: 100%;

top: 0;

left: calc(100% - var(--border-anim-width-double));

}

75% {

width: 100%;

height: var(--border-anim-width-double);

top: 0%;

left: 0%;

}

/* 需要设置临界效果，否则会渐变 */

from, to, 24.9% {

border-left-color: var(--border-anim-border-color);

border-top-color: transparent;

border-right-color: transparent;

border-bottom-color: var(--border-anim-border-color);

}

25%, 49.9% {

border-left-color: transparent;

border-top-color: transparent;

border-right-color: var(--border-anim-border-color);

border-bottom-color: var(--border-anim-border-color);

}

50%, 74.9% {

border-left-color: transparent;

border-top-color: var(--border-anim-border-color);

border-right-color: var(--border-anim-border-color);

border-bottom-color: transparent;

}

75%, 99.9% {

border-left-color: var(--border-anim-border-color);

border-top-color: var(--border-anim-border-color);

border-right-color: transparent;

border-bottom-color: transparent;

}

}

.border-anim2 {

width: var(--border-anim-size);

height: var(--border-anim-size);

position: relative;

border: 1px solid var(--border-anim-border-color);

}

.border-anim2-edge {

position: absolute;

/* 必须把其他边框置0，否则有默认值存在 */

border: 0px solid var(--border-anim-border-color);

box-sizing: border-box;

}

/*

注意：CSS中不能前向选择，而只能后向选择！

因为如果CSS支持了父选择器，那就必须要页面所有子元素加载完毕才能渲染HTML文档，

因为所谓“父选择器”，就是后代元素影响祖先元素，如果后代元素还没加载处理，如何影响祖先元素的样式？

于是，网页渲染呈现速度就会大大减慢，浏览器会出现长时间的白板。

*/

/* 波浪号和加号都是选择其后的元素，区别是加号只取一个，波浪取所有

.border-anim-content:hover ~ .border-anim2-edge { */

.border-anim2:hover > .border-anim2-edge {

background-color: var(--border-anim-hover-color);

}

.border-anim2-left {

width: var(--border-anim-width-double);

height: 100%;

left: 0;

border-left-width: var(--border-anim-width);

animation: anim2-border-run-left var(--border-anim-duration) calc(var(--border-anim-duration) / -2) linear infinite;

}

.border-anim2-top {

height: var(--border-anim-width-double);

width: 100%;

top: 0;

border-top-width: var(--border-anim-width);

animation: anim2-border-run-top var(--border-anim-duration) linear infinite;

}

.border-anim2-right {

width: var(--border-anim-width-double);

height: 100%;

right: 0;

border-right-width: var(--border-anim-width);

animation: anim2-border-run-right var(--border-anim-duration) calc(var(--border-anim-duration) / -2) linear infinite;

}

.border-anim2-bottom {

height: var(--border-anim-width-double);

width: 100%;

bottom: 0;

border-bottom-width: var(--border-anim-width);

animation: anim2-border-run-bottom var(--border-anim-duration) linear infinite;

}

@keyframes anim2-border-run-left {

from, to {

height: 0;

}

50% {

height: 100%;

}

from, to, 49.9% {

top: 0;

bottom: auto;

}

50%, 99.9% {

top: auto;

bottom: 0;

}

}

@keyframes anim2-border-run-top {

from, to {

width: 0;

}

50% {

width: 100%;

}

from, to, 49.9% {

left: auto;

right: 0;

}

50%, 99.9% {

left: 0;

right: auto;

}

}

@keyframes anim2-border-run-right {

from, to {

height: 0;

}

50% {

height: 100%;

}

from, to, 49.9% {

top: auto;

bottom: 0;

}

50%, 99.9% {

top: 0;

bottom: auto;

}

}

@keyframes anim2-border-run-bottom {

from, to {

width: 0;

}

50% {

width: 100%;

}

from, to, 49.9% {

left: 0;

right: auto;

}

50%, 99.9% {

left: auto;

right: 0;

}

}

.border-anim3 {

width: var(--border-anim-size);

height: var(--border-anim-size);

position: relative;

border: 1px solid var(--border-anim-border-color);

box-sizing: border-box;

}

.border-anim3::before, .border-anim3::after {

content: '';

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

}

.border-anim3::before {

box-shadow: 0 0 0 var(--border-anim-width) var(--border-anim-border-color) inset;

animation: anim3-border-run calc(var(--border-anim-duration) * 2) calc(var(--border-anim-duration) / -1) linear infinite;

}

.border-anim3::after {

box-shadow: 0 0 0 var(--border-anim-width) var(--border-anim-border-color) inset;

animation: anim3-border-run calc(var(--border-anim-duration) * 2) linear infinite;

}

.border-anim3:hover::before, .border-anim3:hover::after {

/* 如果只在hover的时候设置transition，那么进入有效，但是退出无效(即退出时不会有缓动) */

transition: background-color 1s;

background-color: var(--border-anim-hover-color);

}

@keyframes anim3-border-run {

/*

clip通过对元素进行剪切来控制元素的可显示区域(clip的区域显示，其他隐藏)

clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用

shape函数声明：rect(top right bottom left)

rect()和和指定偏移量是从元素盒子顶部边缘算起；和指定的偏移量是从元素盒子左边边缘算起（包括边框）。

如果和设置为auto时，他们就相当于元素的宽度（这个宽度包括元素的border、padding和width），或者简单的理解为100%

注意：1.值不能设置为百分比。 2.在动画设置过程里不能使用auto，使用auto没有动画效果（因此建议使用SCSS或者LESS之类的预处理器）

*/

/*

clip动画有3种方案，但是都有点小瑕疵（在线条粗的时候明显，线条细的情况下完全看不出来）

(1)使用如下的1和9作为边界，当拐弯的时候，尾部多余的边界会跟着动

(2)将下面的1和9替换为0和10，当拐弯的时候，线条宽度会变为0

(3)在每个状态后面一步立即重置它，但是会出现抖动

*/

from, to {

clip: rect(0, 1em, 10em, 0);

}

1% {

clip: rect(1em, 1em, 10em, 0);

}

25% {

clip: rect(9em, 10em, 10em, 0);

}

25.1% {

clip: rect(9em, 10em, 10em, 1em);

}

50% {

clip: rect(0, 10em, 10em, 9em);

}

50.1% {

clip: rect(0, 10em, 9em, 9em);

}

75% {

clip: rect(0, 10em, 1em, 0);

}

75.1% {

clip: rect(0, 9em, 1em, 0);

}

}

(1)通过两矩形的移动来制作动画

(2)通过四个边框的长度来控制动画

(3)通过clip的裁剪来显示动画

对web开发技术感兴趣的同学，欢迎私信我加群，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。

最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰

百科狗 baikegou.com