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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0