gsap实现文字三维分割翻转动画效果代码-html代码-BFW代码库

gsap实现文字三维分割翻转动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现文字三维分割翻转动画效果代码，结合了SplitText3+GSDevTools3实现动画的控制。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Saira+Extra+Condensed:wght@800&family=Staatliches&display=swap');

body, html {
        width:100%;
        height:100%;
}

body {
        background:#12171b;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        overflow:hidden;
}

* {
        position:relative;
}

h1 {
        
}

.rotatingHeader {
        margin-bottom:2vw;

        width:fit-content;
        white-space:nowrap;

}

.rotatingHeader h1{
        font-family: 'Saira Extra Condensed', sans-serif;
        color:#444;
        font-size:100px;
        margin:0;
        padding:0;
        line-height:0.5;
        perspective:600px;
}

.rotatingHeader h1:nth-child(2) {
        color:#efefef;
}
</style.........完整代码请登录后点击上方下载按钮下载查看