css实现文字绕美女李环绕动画效果代码-html代码-BFW代码库

代码语言：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-tran.........完整代码请登录后点击上方下载按钮下载查看