css实现文字绕美女李环绕动画效果代码
代码语言：html
所属分类：三维
代码描述：css实现文字绕美女李环绕动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@font-face {
font-family: 'Big Shoulders Inline Text';
font-style: normal;
font-weight: 900;
font-display: swap;
src: local('Big Shoulders Inline Text Black'), local('BigShouldersInlineText-Black'), url(https://fonts.gstatic.com/s/bigshouldersinlinetext/v1/vm8hdQDmVECV5-vm5dJ-Tp-6WDeRjL4RV7dP8u-NEa7XO1o.ttf) format('truetype');
}
div {
height: 70vh;
width: 46.17801047vh;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-perspective: 1000px;
perspective: 1000px;
}
div img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div img#fg {
-webkit-clip-path: polygon(53.9% 51%, 57.9% 45%, 58.9% 44.4%, 63.9% 43%, 66.3% 42.7%, 67.9% 40.7%, 66.3% 37%, 64.9% 36.4%, 64.9% 35%, 63.3% 33.7%, 63.3% 31%, 57.9% 28.7%, 57.9% 28%, 57.9% 27.7%, 55.9% 24.4%, 46.3% 20.4%, 42.3% 18.4%, 32.6% 18.7%, 25.3% 21.7%, 21.3% 24.7%, 15.9% 34%, 16.6% 39%, 12.3% 46.7%, 12.6% 55.4%, 11.6% 60.4%, 7.6% 67%, 6.9% 74.4%, 8.9% 77.7%, 8.9% 80.4%, 11.9% 83.7%, 10.9% 90.7%, 12.9% 92.4%, 11.6% 98.7%, 79.6% 99.4%, 64.9% 95%, 69.9% 88.4%, 68.9% 84%, 67.9% 78%, 66.3% 74.4%, 63.6% 71%, 62.6% 68.4%, 62.6% 64.7%, 59.3% 57.7%, 55.6% 52.7%, 53.9% 52%);
clip-path: polygon(53.9% 51%, 57.9% 45%, 58.9% 44.4%, 63.9% 43%, 66.3% 42.7%, 67.9% 40.7%, 66.3% 37%, 64.9% 36.4%, 64.9% 35%, 63.3% 33.7%, 63.3% 31%, 57.9% 28.7%, 57.9% 28%, 57.9% 27.7%, 55.9% 24.4%, 46.3% 20.4%, 42.3% 18.4%, 32.6% 18.7%, 25.3% 21.7%, 21.3% 24.7%, 15.9% 34%, 16.6% 39%, 12.3% 46.7%, 12.6% 55.4%, 11.6% 60.4%, 7.6% 67%, 6.9% 74.4%, 8.9% 77.7%, 8.9% 80.4%, 11.9% 83.7%, 10.9% 90.7%, 12.9% 92.4%, 11.6% 98.7%, 79.6% 99.4%, 64.9% 95%, 69.9% 88.4%, 68.9% 84%, 67.9% 78%, 66.3% 74.4%, 63.6% 71%, 62.6% 68.4%, 62.6% 64.7%, 59.3% 57.7%, 55.6% 52.7%, 53.9% 52%);
}
div img#bg {
-webkit-transform: translatez(-200px) scale(1.2);
transform: translatez(-200px) scale(1.2);
}
div span {
position: absolute;
top: 50%;
left: 42%;
color: cornsilk;
text-shadow: 0 0 2px black;
font: 10vh 'Big Shoulders Inline Text', cursive;
}
div span:nth-of-type(15) {
-webkit-animation: 4s an15 infinite steps(100);
animation: 4s an15 infinite steps(100);
}
@-webkit-keyframes an15 {
100% {
-webkit-transform: translate3d(0vh, 0, 18.47120419vh);
transform: translate3d(0vh, 0, 18.47120419vh);
}
90% {
-webkit-transform: translate3d(10.85710141vh, 0, 14.9435181vh);
transform: translate3d(10.85710141vh, 0, 14.9435181vh);
}
80% {
-webkit-transform: translate3d(17.56715911vh, 0, 5.707916vh);
transform: translate3d(17.56715911vh, 0, 5.707916vh);
}
70% {
-webkit-transform: translate3d(17.56715911vh, 0, -5.707916vh);
transform: translate3d(17.56715911vh, 0, -5.707916vh);
}
60% {
-webkit-transform: translate3d(10.85710141vh, 0, -14.9435181vh);
transform: translate3d(10.85710141vh, 0, -14.9435181vh);
}
50% {
-webkit-transform: translate3d(0vh, 0, -18.47120419vh);
transform: translate3d(0vh, 0, -18.47120419vh);
}
40% {
-webkit-transform: translate3d(-10.85710141vh, 0, -14.9435181vh);
transform: translate3d(-10.85710141vh, 0, -14.9435181vh);
}
30% {
-webkit-transform: translate3d(-17.56715911vh, 0, -5.707916vh);
transform: translate3d(-17.56715911vh, 0, -5.707916vh);
}
20% {
-webkit-transform: translate3d(-17.56715911vh, 0, 5.707916vh);
transform: translate3d(-17.56715911vh, 0, 5.707916vh);
}
10% {
-webkit-transform: translate3d(-10.85710141vh, 0, 14.9435181vh);
transform: translate3d(-10.85710141vh, 0, 14.9435181vh);
}
0% {
-webkit-transform: translate3d(0vh, 0, 18.47120419vh);
transform: translate3d(0vh, 0, 18.47120419vh);
}
}
@keyframes an15 {
100% {
-webkit-transform: translate3d(0vh, 0, 18.47120419vh);
transform: translate3d(0vh, 0, 18.47120419vh);
}
90% {
-webkit-transform: translate3d(10.85710141vh, 0, 14.9435181vh);
transform: translate3d(10.85710141vh, 0, 14.9435181vh);
}
80% {
-webkit-transform: translate3d(17.56715911vh, 0, 5.707916vh);
transform: translate3d(17.56715911vh, 0, 5.707916vh);
}
70% {
-webkit-transform: translate3d(17.56715911vh, 0, -5.707916vh);
transform: translate3d(17.56715911vh, 0, -5.707916vh);
}
60% {
-webkit-transform: translate3d(10.85710141vh, 0, -14.9435181vh);
transform: translate3d(10.85710141vh, 0, -14.9435181vh);
}
50% {
-webkit-transform: translate3d(0vh, 0, -18.47120419vh);
transform: translate3d(0vh, 0, -18.47120419vh);
}
40% {
-webkit-transform: translate3d(-10.85710141vh, 0, -14.9435181vh);
transform: translate3d(-10.85710141vh, 0, -14.9435181vh);
}
30% {
-webkit-transform: translate3d(-17.56715911vh, 0, -5.707916vh);
transform: translate3d(-17.56715911vh, 0, -5.707916vh);
}
20% {
-webkit-transform: translate3d(-17.56715911vh, 0, 5.707916vh);
transform: translate3d(-17.56715911vh, 0, 5.707916vh);
}
10% {
-webkit-transform: translate3d(-10.85710141vh, 0, 14.9435181vh);
transform: translate3d(-10.85710141vh, 0, 14.9435181vh);
}
0% {
-webkit-transform: translate3d(0vh, 0, 18.47120419vh);
transform: translate3d(0vh, 0, 18.47120419vh);
}
}
div span:nth-of-type(14) {
-webkit-animation: 4s an14 infinite steps(100);
animation: 4s an14 infinite steps(100);
}
@-webkit-keyframes an14 {
100% {
-webkit-transform: translate3d(-7.51291559vh, 0, 16.87428468vh);
transform: translate3d(-7.51291559vh, 0, 16.87428468vh);
}
90% {
-webkit-transform: translate3d(3.84037929vh, 0, 18.06756406vh);
transform: translate3d(3.84037929vh, 0, 18.06756406vh);
}
80% {
-webkit-transform: translate3d(13.72677981vh, 0, 12.35964806vh);
transform: translate3d(13.72677981vh, 0, 12.35964806vh);
}
70% {
-webkit-transform: translate3d(18.370017vh, 0, 1.93076659vh);
transform: translate3d(18.370017vh, 0, 1.93076659vh);
}
60% {
-webkit-transform: translate3d(15.99653207vh, 0, -9.23560209vh);
transform: translate3d(15.99653207vh, 0, -9.23560209vh);
}
50% {
-webkit-transform: translate3d(7.51291559vh, 0, -16.87428468vh);
transform: translate3d(7.51291559vh, 0, -16.87428468vh);
}
40% {
-webkit-transform: translate3d(-3.84037929vh, 0, -18.06756406vh);
transform: translate3d(-3.84037929vh, 0, -18.06756406vh);
}
30% {
-webkit-transform: translate3d(-13.72677981vh, 0, -12.35964806vh);
transform: translate3d(-13.72677981vh, 0, -12.35964806vh);
}
20% {
-webkit-transform: translate3d(-18.370017vh, 0, -1.93076659vh);
transform: translate3d(-18.370017vh, 0, -1.93076659vh);
}
10% {
-webkit-transform: translate3d(-15.99653207vh, 0, 9.23560209vh);
transform: translate3d(-15.99653207vh, 0, 9.23560209vh);
}
0% {
-webkit-transform: translate3d(-7.51291559vh, 0, 16.87428468vh);
transform: translate3d(-7.51291559vh, 0, 16.87428468vh);
}
}
@keyframes an14 {
100% {
-webkit-transform: translate3d(-7.51291559vh, 0, 16.87428468vh);
transform: translate3d(-7.51291559vh, 0, 16.87428468vh);
}
90% {
-webkit-transform: translate3d(3.84037929vh, 0, 18.06756406vh);
transform: translate3d(3.84037929vh, 0, 18.06756406vh);
}
80% {
-webkit-transform: translate3d(13.72677981vh, 0, 12.35964806vh);
transform: translate3d(13.72677981vh, 0, 12.35964806vh);
}
70% {
-webkit-transform: translate3d(18.370017vh, 0, 1.93076659vh);
transform: translate3d(18.370017vh, 0, 1.93076659vh);
}
60% {
-webkit-transform: translate3d(15.99653207vh, 0, -9.23560209vh);
transform: translate3d(15.99653207vh, 0, -9.23560209vh);
}
50% {
-webkit-transform: translate3d(7.51291559vh, 0, -16.87428468vh);
transform: translate3d(7.51291559vh, 0, -16.87428468vh);
}
40% {
-webkit-transform: translate3d(-3.84037929vh, 0, -18.06756406vh);
transform: translate3d(-3.84037929vh, 0, -18.06756406vh);
}
30% {
-webkit-transform: translate3d(-13.72677981vh, 0, -12.35964806vh);
transform: translate3d(-13.72677981vh, 0, -12.35964806vh);
}
20% {
-webkit-transform: translate3d(-18.370017vh, 0, -1.93076659vh);
transform: translate3d(-18.370017vh, 0, -1.93076659vh);
}
10% {
-webkit-transform: translate3d(-15.99653207vh, 0, 9.23560209vh);
transform: translate3d(-15.99653207vh, 0, 9.23560209vh);
}
0% {
-webkit-transform: translate3d(-7.51291559vh, 0, 16.87428468vh);
transform: translate3d(-7.51291559vh, 0, 16.87428468vh);
}
}
div span:nth-of-type(13) {
-webkit-animation: 4s an13 infinite steps(100);
animation: 4s an13 infinite steps(100);
}
@-webkit-keyframes an13 {
100% {
-webkit-transform: translate3d(-13.72677981vh, 0, 12.35964806vh);
transform: translate3d(-13.72677981vh, 0, 12.35964806vh);
}
90% {
-webkit-transform: translate3d(-3.84037929vh, 0, 18.06756406vh);
transform: translate3d(-3.84037929vh, 0, 18.06756406vh);
}
80% {
-webkit-transform: translate3d(7.51291559vh, 0, 16.87428468vh);
transform: translate3d(7.51291559vh, 0, 16.87428468vh);
}
70% {
-webkit-transform: translate3d(15.99653207vh, 0, 9.23560209vh);
transform: translate3d(15.99653207vh, 0, 9.23560209vh);
}
60% {
-webkit-transform: translate3d(18.370017vh, 0, -1.93076659vh);
transform: translate3d(18.370017vh, 0, -1.93076659vh);
}
50% {
-webkit-transform: translate3d(13.72677981vh, 0, -12.35964806vh);
transform: translate3d(13.72677981vh, 0, -12.35964806vh);
}
40% {
-webkit-transform: translate3d(3.84037929vh, 0, -18.06756406vh);
transform: translate3d(3.84037929vh, 0, -18.06756406vh);
}
30% {
-webkit-transform: translate3d(-7.51291559vh, 0, -16.87428468vh);
transform: translate3d(-7.51291559vh, 0, -16.87428468vh);
}
20% {
-webkit-transform: translate3d(-15.99653207vh, 0, -9.23560209vh);
transform: translate3d(-15.99653207vh, 0, -9.23560209vh);
}
10% {
-webkit-transform: translate3d(-18.370017vh, 0, 1.93076659vh);
transform: translate3d(-18.370017vh, 0, 1.93076659vh);
}
0% {
-webkit-transform: translate3d(-13.72677981vh, 0, 12.35964806vh);
transform: translate3d(-13.72677981vh, 0, 12.35964806vh);
}
}
@keyframes an13 {
100% {
-webkit-transform: translate3d(-13.72677981vh, 0, 12.35964806vh);
transform: translate3d(-13.72677981vh, 0, 12.35964806vh);
}
90% {
-webkit-transform: translate3d(-3.84037929vh, 0, 18.06756406vh);
transform: translate3d(-3.84037929vh, 0, 18.06756406vh);
}
80% {
-webkit-transform: translate3d(7.51291559vh, 0, 16.87428468vh);
transform: translate3d(7.51291559vh, 0, 16.87428468vh);
}
70% {
-webkit-transform: translate3d(15.99653207vh, 0, 9.23560209vh);
transform: translate3d(15.99653207vh, 0, 9.23560209vh);
}
60% {
-webkit-transform: translate3d(18.370017vh, 0, -1.93076659vh);
transform: translate3d(18.370017vh, 0, -1.93076659vh);
}
50% {
-webkit-transform: translate3d(13.72677981vh, 0, -12.35964806vh);
transform: translate3d(13.72677981vh, 0, -12.35964806vh);
}
40% {
-webkit-transform: translate3d(3.84037929vh, 0, -18.06756406vh);
transform: translate3d(3.84037929vh, 0, -18.06756406vh);
}
30% {
-webkit-transform: translate3d(-7.51291559vh, 0, -16.87428468vh);
transform: translate3d(-7.51291559vh, 0, -16.87428468vh);
}
20% {
-webkit-transform: translate3d(-15.99653207vh, 0, -9.23560209vh);
transform: translate3d(-15.99653207vh, 0, -9.23560209vh);
}
10% {
-webkit-transform: translate3d(-18.370017vh, 0, 1.93076659vh);
transform: translate3d(-18.370017vh, 0, 1.93076659vh);
}
0% {
-webkit-transform: translate3d(-13.72677981vh, 0, 12.35964806vh);
transform: translate3d(-13.72677981vh, 0, 12.35964806vh);
}
}
div span:nth-of-type(12) {
-webkit-animation: 4s an12 infinite steps(100);
animation: 4s an12 infinite steps(100);
}
@-webkit-keyframes an12 {
100% {
-webkit-transform: translate3d(-17.56715911vh, 0, 5.707916vh);
transform: translate3d(-17.56715911vh, 0, 5.707916vh);
}
90% {
-webkit-transform: translate3d(-10.85710141vh, 0, 14.9435181vh);
transform: translate3d(-10.85710141vh, 0, 14.9435181vh);
}
80% {
-webkit-transform: translate3d(0vh, 0, 18.47120419vh);
transform: translate3d(0vh, 0, 18.47120419vh);
}
70% {
-webkit-transform: translate3d(10.85710141vh, 0, 14.9435181vh);
transform: translate3d(10.85710141vh, 0, 14.9435181vh);
}
60% {
-webkit-transform: translate3d(17.56715911vh, 0, 5.707916vh);
transform: translate3d(17.56715911vh, 0, 5.707916vh);
}
50% {
-webkit-transform: translate3d(17.56715911vh, 0, -5.707916vh);
transform: translate3d(17.56715911vh, 0, -5.707916vh);
}
40% {
-webkit-transform: translate3d(10.85710141vh, 0, -14.9435181vh);
transform: translate3d(10.85710141vh, 0, -14.9435181vh);
}
30% {
-webkit-transform: translate3d(0vh, 0, -18.47120419vh);
transform: translate3d(0vh, 0, -18.47120419vh);
}
20% {
-webkit-transform: translate3d(-10.85710141vh, 0, -14.9435181vh);
transform: translate3d(-10.85710141vh, 0, -14.9435181vh);
}
10% {
-webkit-transform: translate3d(-17.56715911vh, 0, -5.707916vh);
transform: translate3d(-17.56715911vh, 0, -5.707916vh);
}
0% {
-webkit-transform: translate3d(-17.56715911vh, 0, 5.707916vh);
transform: translate3d(-17.56715911vh, 0, 5.707916vh);
}
}
@keyframes an12 {
100% {
-webkit-transform: translate3d(-17.56715911vh, 0, 5.707916vh);
transform: translate3d(-17.56715911vh, 0, 5.707916vh);
}
90% {
-webkit-transform: translate3d(-10.85710141vh, 0, 14.9435181vh);
transform: translate3d(-10.85710141vh, 0, 14.9435181vh);
}
80% {
-webkit-transform: translate3d(0vh, 0, 18.47120419vh);
transform: translate3d(0vh, 0, 18.47120419vh);
}
70% {
-webkit-transform: translate3d(10.85710141vh, 0, 14.9435181vh);
transform: translate3d(10.85710141vh, 0, 14.9435181vh);
}
60% {
-webkit-transform: translate3d(17.56715911vh, 0, 5.707916vh);
transform: translate3d(17.56715911vh, 0, 5.707916vh);
}
50% {
-webkit-transform: translate3d(17.56715911vh, 0, -5.707916vh);
transform: translate3d(17.56715911vh, 0, -5.707916vh);
}
40% {
-webkit-transform: translate3d(10.85710141vh, 0, -14.9435181vh);
transform: translate3d(10.85710141vh, 0, -14.9435181vh);
}
30% {
-webkit-transform: translate3d(0vh, 0, -18.47120419vh);
transform: translate3d(0vh, 0, -18.47120419vh);
}
20% {
-webkit-transform: translate3d(-10.85710141vh, 0, -14.9435181vh);
transform: translate3d(-10.85710141vh, 0, -14.9435181vh);
}
10% {
-webkit-transform: translate3d(-17.56715911vh, 0, -5.707916vh);
transform: translate3d(-17.56715911vh, 0, -5.707916vh);
}
0% {
-webkit-transform: translate3d(-17.56715911vh, 0, 5.707916vh);
transform: translate3d(-17.56715911vh, 0, 5.707916vh);
}
}
div span:nth-of-type(11) {
-webkit-animation: 4s an11 infinite steps(100);
animation: 4s an11 infinite steps(100);
}
@-webkit-keyframes an11 {
100% {
-webkit-transform: translate3d(-18.370017vh, 0, -1.93076659vh);
transform: translate3d(-18.370017vh, 0, -1.93076659vh);
}
90% {
-webkit-transform: translate3d(-15.99653207vh, 0, 9.23560209vh);
transform: translate3d(-15.99653207vh, 0, 9.23560209vh);
}
80% {
-webkit-transform: translate3d(-7.51291559vh, 0, 16.87428468vh);
transform: translate3d(-7.51291559vh, 0, 16.87428468vh);
}
70% {
-webkit-transform: translate3d(3.84037929vh, 0, 18.06756406vh);
transform: translate3d(3.84037929vh, 0, 18.06756406vh);
}
60% {
-webkit-transform: translate3d(13.72677981vh, 0, 12.35964806vh);
transform: translate3d(13.72677981vh, 0, 12.35964806vh);
}
50% {
-webkit-transform: translate3d(18.370017vh, 0, 1.93076659vh);
transform: translate3d(18.370017vh, 0, 1.93076659vh);
}
40% {
-webkit-transform: translate3d(15.99653207vh, 0, -9.23560209vh);
transform: translate3d(15.99653207vh, 0, -9.23560209vh);
}
30% {
-webkit-transform: translate3d(7.51291559vh, 0, -16.87428468vh);
transform: translate3d(7.51291559vh, 0, -16.87428468vh);
}
20% {
-webkit-transform: translate3d(-3.84037929vh, 0, -18.06756406vh);
transform: translate3d(-3.84037929vh, 0, -18.06756406vh);
}
10% {
-webkit-transform: translate3d(-13.72677981vh, 0, -12.35964806vh);
transform: translate3d(-13.72677981vh, 0, -12.35964806vh);
}
0% {
-webkit-transform: translate3d(-18.370017vh, 0, -1.93076659vh);
transform: translate3d(-18.370017vh, 0, -1.93076659vh);
}
}
@keyframes an11 {
100% {
-webkit-transform: translate3d(-18.370017vh, 0, -1.93076659vh);
transform: translate3d(-18.370017vh, 0, -1.93076659vh);
}
90% {
-webkit-transform: translate3d(-15.99653207vh, 0, 9.23560209vh);
transform: translate3d(-15.99653207vh, 0, 9.23560209vh);
}
80% {
-webkit-transform: translate3d(-7.51291559vh, 0, 16.87428468vh);
transform: translate3d(-7.51291559vh, 0, 16.87428468vh);
}
70% {
-webkit-transform: translate3d(3.84037929vh, 0, 18.06756406vh);
transform: translate3d(3.84037929vh, 0, 18.06756406vh);
}
60% {
-webkit-transform: translate3d(13.72677981vh, 0, 12.35964806vh);
transform: translate3d(13.72677981vh, 0, 12.35964806vh);
}
50% {
-webkit-transform: translate3d(18.370017vh, 0, 1.93076659vh);
transform: translate3d(18.370017vh, 0, 1.93076659vh);
}
40% {
-webkit-transform: translate3d(15.99653207vh, 0, -9.23560209vh);
transform: translate3d(15.99653207vh, 0, -9.23560209vh);
}
30% {
-webkit-transform: translate3d(7.51291559vh, 0, -16.87428468vh);
transform: translate3d(7.51291559vh, 0, -16.87428468vh);
}
20% {
-webkit-transform: translate3d(-3.84037929vh, 0, -18.06756406vh);
transform: translate3d(-3.84037929vh, 0, -18.06756406vh);
}
10% {
-webkit-transform: translate3d(-13.72677981vh, 0, -12.35964806vh);
transform: translate3d(-13.72677981vh, 0, -12.35964806vh);
}
0% {
-webkit-transform: translate3d(-18.370017vh, 0, -1.93076659vh);
transform: translate3d(-18.370017vh, 0, -1.93076659vh);
}
}
div span:nth-of-type(10) {
-webkit-animation: 4s an10 infinite steps(100);
animation: 4s an10 infinite steps(100);
}
@-webkit-keyframes an10 {
100% {
-webkit-transform: translate3d(-15.99653207vh, 0, -9.23560209vh);
transform: translate3d(-15.99653207vh, 0, -9.23560209vh);
}
90% {
-webkit-transform: translate3d(-18.370017vh, 0, 1.93076659vh);
transform: translate3d(-18.370017vh, 0, 1.93076659vh);
}
80% {
-webkit-transform: translate3d(-13.72677981vh, 0, 12.35964806vh);
transform: translate3d(-13.72677981vh, 0, 12.35964806vh);
}
70% {
-webkit-transform: translate3d(-3.84037929vh, 0, 18.06756406vh);
transform: translate3d(-3.84037929vh, 0, 18.06756406vh);
}
60% {
-webkit-transform: translate3d(7.51291559vh, 0, 16.87428468vh);
transform: translate3d(7.51291559vh, 0, 16.87428468vh);
}
50% {
-webkit-transform: translate3d(15.99653207vh, 0, 9.23560209vh);
transform: translate3d(15.99653207vh, 0, 9.23560209vh);
}
40% {
-webkit-transform: translate3d(18.370017vh, 0, -1.93076659vh);
transform: translate3d(18.370017vh, 0, -1.93076659vh);
}
30% {
-webkit-transform: translate3d(13.72677981vh, 0, -12.35964806vh);
transform: translate3d(13.72677981vh, 0, -12.35964806vh);
}
20% {
-webkit-transform: translate3d(3.84037929vh, 0, -18.06756406vh);
transform: translate3d(3.84037929vh, 0, -18.06756406vh);
}
10% {
-webkit-transform: translate3d(-7.51291559vh, 0, -16.87428468vh);
transform: translate3d(-7.51291559vh, 0, -16.87428468vh);
}
0% {
-webkit-transform: translate3d(-15.99653207vh, 0, -9.23560209vh);
transform: translate3d(-15.99653207vh, 0, -9.23560209vh);
}
}
@keyframes an10 {
100% {
-webkit-transform: translate3d(-15.99653207vh, 0, -9.23560209vh);
transform: translate3d(-15.99653207vh, 0, -9.23560209vh);
}
90% {
-webkit-transform: translate3d(-18.370017vh, 0, 1.93076659vh);
transform: translate3d(-18.370017vh, 0, 1.93076659vh);
}
80% {
-webkit-transform: translate3d(-13.72677981vh, 0, 12.35964806vh);
transform: translate3d(-13.72677981vh, 0, 12.35964806vh);
}
70% {
-webkit-transform: translate3d(-3.84037929vh, 0, 18.06756406vh);
transform: translate3d(-3.84037929vh, 0, 18.06756406vh);
}
60% {
-webkit-transform: translate3d(7.51291559vh, 0, 16.87428468vh);
transform: translate3d(7.51291559vh, 0, 16.87428468vh);
}
50% {
-webkit-transform: translate3d(15.99653207vh, 0, 9.23560209vh);
transform: translate3d(15.99653207vh, 0, 9.23560209vh);
}
40% {
-webkit-transform: translate3d(18.370017vh, 0, -1.93076659vh);
transform: translate3d(18.370017vh, 0, -1.93076659vh);
}
30% {
-webkit-transform: translate3d(13.72677981vh, 0, -12.35964806vh);
transform: translate3d(13.72677981vh, 0, -12.35964806vh);
}
20% {
-webkit-transform: translate3d(3.84037929vh, 0, -18.06756406vh);
transform: translate3d(3.84037929vh, 0, -18.06756406vh);
}
10% {
-webkit-transform: translate3d(-7.51291559vh, 0, -16.87428468vh);
transform: translate3d(-7.51291559vh, 0, -16.87428468vh);
}
0% {
-webkit-transform: translate3d(-15.99653207vh, 0, -9.23560209vh);
transform: translate3d(-15.99653207vh, 0, -9.23560209vh);
}
}
div span:nth-of-type(9) {
-webkit-animation: 4s an9 infinite steps(100);
animation: 4s an9 infinite steps(100);
}
@-webkit-keyframes an9 {
100% {
-webkit-transform: translate3d(-10.85710141vh, 0, -14.9435181vh);
transform: translate3d(-10.85710141vh, 0, -14.9435181vh);
}
90% {
-webkit-transform: translate3d(-17.56715911vh, 0, -5.707916vh);
transform: translate3d(-17.56715911vh, 0, -5.707916vh);
}
80% {
-webkit-transform: translate3d(-17.56715911vh, 0, 5.707916vh);
transform: translate3d(-17.56715911vh, 0, 5.707916vh);
}
70% {
-webkit-transform: translate3d(-10.85710141vh, 0, 14.9435181vh);
transform: translate3d(-10.85710141vh, 0, 14.9435181vh);
}
60% {
-webkit-transform: translate3d(0vh, 0, 18.47120419vh);
transform: translate3d(0vh, 0, 18.47120419vh);
}
50% {
-webkit-transform: translate3d(10.85710141vh, 0, 14.9435181vh);
transform: translate3d(10.85710141vh, 0, 14.9435181vh);
}
40% {
-webkit-transform: translate3d(17.56715911vh, 0, 5.707916vh);
transform: translate3d(17.56715911vh, 0, 5.707916vh);
}
30% {
-webkit-transform: translate3d(17.56715911vh, 0, -5.707916vh);
transform: translate3d(17.56715911vh, 0, -5.707916vh);
}
20% {
-webkit-transform: translate3d(10.85710141vh, 0, -14.9435181vh);
transform: translate3d(10.85710141vh, 0, -14.9435181vh);
}
10% {
-webkit-transform: translate3d(0vh, 0, -18.47120419vh);
transform: translate3d(0vh, 0, -18.47120419vh);
}
0% {
-webkit-transform: translate3d(-10.85710141vh, 0, -14.9435181vh);
transform: translate3d(-10.85710141vh, 0, -14.9435181vh);
}
}
@keyframes an9 {
100% {
-webkit-transform: translate3d(-10.85710141vh, 0, -14.9435181vh);
transform: translate3d(-10.85710141vh, 0, -14.9435181vh);
}
90% {
-webkit-transform: translate3d(-17.56715911vh, 0, -5.707916vh);
transform: translate3d(-17.56715911vh, 0, -5.707916vh);
}
80% {
-webkit-transform: translate3d(-17.56715911vh, 0, 5.707916vh);
transform: translate3d(-17.56715911vh, 0, 5.707916vh);
}
70% {
-webkit-transform: translate3d(-10.85710141vh, 0, 14.9435181vh);
transform: translate3d(-10.85710141vh, 0, 14.9435181vh);
}
60% {
-webkit-transform: translate3d(0vh, 0, 18.47120419vh);
transform: translate3d(0vh, 0, 18.47120419vh);
}
50% {
-webkit-transform: translate3d(10.85710141vh, 0, 14.9435181vh);
transform: translate3d(10.85710141vh, 0, 14.9435181vh);
}
40% {
-webkit-transform: translate3d(17.56715911vh, 0, 5.707916vh);
transform: translate3d(17.56715911vh, 0, 5.707916vh);
}
30% {
-webkit-transform: translate3d(17.56715911vh, 0, -5.707916vh);
transform: translate3d(17.56715911vh, 0, -5.707916vh);
}
20% {
-webkit-transform: translate3d(10.85710141vh, 0, -14.9435181vh);
transform: translate3d(10.85710141vh, 0, -14.9435181vh);
}
10% {
-webkit-transform: translate3d(0vh, 0, -18.47120419vh);
transform: translate3d(0vh, 0, -18.47120419vh);
}
0% {
-webkit-transform: translate3d(-10.85710141vh, 0, -14.9435181vh);
transform: translate3d(-10.85710141vh, 0, -14.9435181vh);
}
}
div span:nth-of-type(8) {
-webkit-animation: 4s an8 infinite steps(100);
animation: 4s an8 infinite steps(100);
}
@-webkit-keyframes an8 {
100% {
-webkit-transform: translate3d(-3.84037929vh, 0, -18.06756406vh);
transform: translate3d(-3.84037929vh, 0, -18.06756406vh);
}
90% {
-webkit-transform: translate3d(-13.72677981vh, 0, -12.35964806vh);
transform: translate3d(-13.72677981vh, 0, -12.35964806vh);
}
80% {
-webkit-transform: translate3d(-18.370017vh, 0, -1.93076659vh);
transform: translate3d(-18.370017vh, 0, -1.93076659vh);
}
70% {
-webkit-transform: translate3d(-15.99653207vh, 0, 9.23560209vh);
transform: translate3d(-15.99653207vh, 0, 9.23560209vh);
}
60% {
-webkit-transform: translate3d(-7.51291559vh, 0, 16.87428468vh);
transform: translate3d(-7.51291559vh, 0, 16.87428468vh);
}
50% {
-webkit-transform: translate3d(3.84037929vh, 0, 18.06756406vh);
transform: translate3d(3.84037929vh, 0, 18.06756406vh);
}
40% {
-webkit-transform: translate3d(13.72677981vh, 0, 12.35964.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0