jquery实现探索火星旋转文字入场动画效果代码

代码语言:html

所属分类:动画

代码描述:jquery实现探索火星旋转文字入场动画效果代码

代码标签: jquery 探索 火星 旋转 文字 入场 动画

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

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

<head>
    <meta charset="UTF-8">
    <style>
        @font-face {
      font-family: "agency";
      src: url("//repo.bfw.wiki/bfwrepo/fonts/agency_fb-2.eot");
      /* IE9 Compat Modes */
      src: url("//repo.bfw.wiki/bfwrepo/fonts/agency_fb-2.eot?#iefix") format("embedded-opentype"), url("//repo.bfw.wiki/bfwrepo/fonts/agency_fb-2.woff") format("woff"), url("//repo.bfw.wiki/bfwrepo/fonts/agency_fb-2.ttf") format("truetype"), url("//repo.bfw.wiki/bfwrepo/fonts/agency_fb-2.svg") format("svg");
      /* Legacy iOS */
      font-style: normal;
      font-weight: 400;
    }
    html {
      font-size: 20px;
    }
    
    body {
      height: 100vh;
      overflow: hidden;
      background-color: #000;
    }
    
    .alpha {
      position: absolute;
      top: 50%;
      left: 50%;
      font-family: "agency";
      text-transform: uppercase;
      color: #fff;
      font-weight: 100;
      font-size: 5em;
      transform-origin: center center;
      transform: translate3d(-50%, -50%, 0) scale(1.4);
      opacity: 0;
      transition: opacity 4s ease-out, transform 4s ease-out, letter-spacing 4s ease-out, -webkit-filter 3s ease-out, filt.........完整代码请登录后点击上方下载按钮下载查看

网友评论0