纯css实现海面漂浮文字动画效果-html代码-BFW代码库

纯css实现海面漂浮文字动画效果

代码语言：html

所属分类：动画

代码描述：纯css实现海面漂浮文字动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
  --animation-time: 2s;
}

@keyframes spin1 {
  0% {
    transform: rotate(2deg) translateY(0);
  }
  50% {
    transform: rotate(-2deg) translateY(-15px);
  }
  100% {
    transform: rotate(2deg) translateY(0);
  }
}
.lt1 {
  animation: spin1 var(--animation-time) infinite alternate;
}

@keyframes spin2 {
  0% {
    transform: rotate(4deg) translateY(0);
  }
  50% {
    transform: rotate(-4deg) translateY(-15px);
  }
  100% {
    transform: rotate(4deg) translateY(0);
  }
}
.lt2 {
  animation: spin2 var(--animation-time) infinite alternate;
}

@keyframes spin3 {
  0% {
    transform: rotate(6deg) translateY(0);
  }
  50% {
    transform: rotate(-6deg) translateY(-15px);
  }
  100% {
    transform: rotate(6deg) translateY(0);
  }
}
.lt3 {
  animation: spin3 var(--animation-time) infinite alternate;
}

@keyframes spin4 {
  0% {
    transform: rotate(8deg) translateY(0);
  }
  50% {
    transform: rotate(-8deg) translateY(-15px);
  }
  100% {
    transform: rotate(8deg) translateY(0);
  }
}
.lt4 {
  animation: spin4 var(--animation-time) infinite alternate;
}

@keyframes spin5 {
  0% {
    transform: rotate(10deg) translateY(0);
  }
  50% {
    transform: rotate(-10deg) translateY(-15px);
  }
  100% {
    transform: rotate(10deg) translateY(0);
  }
}
.lt5 {
  animation: spin5 var(--animation-time) infinite alternate;
}

@keyframes spin6 {
  0% {
    transform: rotate(12deg) .........完整代码请登录后点击上方下载按钮下载查看