文字分离旋转动画-html代码-BFW代码库

文字分离旋转动画

代码语言：html

所属分类：动画

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

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

<title> Hard Work </title>
<link rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/mca5lss.css">
<style>
      body {
 background-color: #483C46;
 overflow: hidden;
 text-align:center;
  display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 width: 100%;
 height: 100%;
 visibility: hidden;
 
}

text {
 font-size: 84px;
 font-family: base-mono-narrow, monospace;
 font-family: zeitung-mono, sans-serif;
font-weight: 700;
font-style: normal;
 
}
    </style>

</head>
<body translate="no">
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<defs>
<path class="myPath" fill="none" stroke="red" d="M496.7,343H303.3c-23.6,0-43-18.6-43-43s19.3-43,43-43h193.4c23.6,0,43,19.2,43,43
  C539.7,323.8,520.3,343,496.7,343z" />
</defs>
<g class="work">
<text x="-0">K</text>
<text x="0">R</text>
<text x="0">O</text>
<text>W</text>
</g>
<g class="hard">
<text x="-0">D</text>
<text x="-0">R</text>
<text>A</text>
<text x="0">H</text>
</g>
</svg>

<script src='http://repo.bfw.wiki/bfwrepo/js/TweenMax-latest-beta.js'></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/ScrubGSAPTimeline_deb.........完整代码请登录后点击上方下载按钮下载查看