我需要创建一个svg多边形元素,其点基于动画元素。

HTML

很基本。 现在,我将创建一个空的Div,它将在背景中保留多边形。
甜。 到目前为止看起来不错。 接下来,我需要为每个链接设置动画。 我经历了几种可能性来实现这一目标。 最初,我开始计算屏幕/窗口大小,然后根据当前窗口尺寸在JavaScript中移动元素。 那条路进展不顺利。 最后,我遇到了一篇有关使用贝塞尔曲线的文章。 在进行过渡之前,我曾使用过贝塞尔曲线,但从未在CSS中使用keyFrame动画,但是看起来很有希望。 弹出代码后,很容易快速看到一些动画,但是对我来说,因为这是我第一次来,所以花了很多技巧才能使动画看起来像我对它们的设想。 因为我希望每个元素的浮动都不同于其他元素,所以我为每个元素创建了一个不同的keyFrame动画,并分别调整了每个元素。 这是我用于CSS关键帧动画的boilerPlate代码:
div#site1.site1 {
z-index: 2;
position: static;
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transition-duration: 1s;
height: 10%;
display: flex;
align-items: center;
-webkit-animation: xAxis1 80.5s infinite cubic-bezier(40.9, 0.9, 20.1, 50.0);
animation: yAxis1 70.5s infinite cubic-bezier(0.7, 0.27, 0.57, 0.1);
-webkit-animation: yAxis1 50.5s infinite cubic-bezier(40.7, 0.27, 20.57, 50.64);
animation: xAxis1 80.5s infinite cubic-bezier(.002, 0.004, 0.1, 0.1);
}
div#site1.site1::after {
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transition-duration: 1s;
font-family: 'Sedgwick Ave Display', cursive;
background-size: cover;
object-fit: cover;
object-position: top;
cursor: pointer;
border: solid black;
border-left-width: 2.2px;
border-top-width: 1.8px;
border-right-width: 1.5px;
border-bottom-width: 1.2px;
z-index: 2;
font-size: 20px;
font-weight: bold;
padding: 10px;
width: 250px;
color: white;
text-shadow: rgb(11, 16, 18) 2px 0px 0px, rgb(11, 16, 18) 1.75517px 0.958851px 0px, rgb(11, 16, 18) 1.0806px 1.68294px 0px, rgb(11, 16, 18) 0.141474px 1.99499px 0px, rgb(11, 16, 18) -0.832294px 1.81859px 0px, rgb(11, 16, 18) -1.60229px 1.19694px 0px, rgb(11, 16, 18) -1.97998px 0.28224px 0px, rgb(11, 16, 18) -1.87291px -0.701566px 0px, rgb(11, 16, 18) -1.30729px -1.5136px 0px, rgb(11, 16, 18) -0.421592px -1.95506px 0px, rgb(11, 16, 18) 0.567324px -1.91785px 0px, rgb(11, 16, 18) 1.41734px -1.41108px 0px, rgb(11, 16, 18) 1.92034px -0.558831px 0px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
content: attr(value);
display: block;
-webkit-animation: xAxis1 80.5s infinite cubic-bezier(40.9, 0.9, 20.1, 50.0);
animation: xAxis1 80.5s infinite cubic-bezier(.002, 0.004, 0.1, 0.1);
animation: yAxis1 70.5s infinite cubic-bezier(0.7, 0.27, 0.57, 0.1);
-webkit-animation: yAxis1 50.5s infinite cubic-bezier(40.7, 0.27, 20.57, 50.64);
}
div#site1.site1:hover::after {
background-image:url('trump.png');
z-index: 2;
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transition-duration: 1s;
transform: scale(1.2);
filter: contrast(150%) brightness(140%);
}
div#site1.site1:hover{
flex-basis:0;
flex-grow: 2;
}
@-webkit-keyframes yAxis1 {
50% {
z-index: 2;
-webkit-animation-timing-function: cubic-bezier(200.02, 200.01, 200.21, 400);
animation-timing-function: cubic-bezier(200.02, 200.01, 200.21, 400);
-webkit-transform: translateY(80vh);
transform: translateY(80vh);
}
}
@-webkit-keyframes xAxis1 {
50% {
z-index: 2;
-webkit-animation-timing-function: cubic-bezier(200.3, 100.27, 400.07, 0.01);
animation-timing-function: cubic-bezier(200.3, 100.27, 400.07, 0.01);
-webkit-transform: translateX(80vw);
transform: translateX(80vw);
}
}