css实现一个方向感知三维悬浮文字层动画效果代码-html代码-BFW代码库

css实现一个方向感知三维悬浮文字层动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现一个方向感知三维悬浮文字层动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        @import url(https://fonts.googleapis.com/css?family=Bree+Serif);
        /* the important bits */
        li {
          perspective: 400px;
        }
        
        .info {
          transform: rotate3d(1, 0, 0, 90deg);
          width: 100%;
          height: 100%;
          padding: 20px;
          position: absolute;
          top: 0;
          left: 0;
          border-radius: 4px;
          pointer-events: none;
          background-color: rgba(26, 188, 156, 0.9);
        }
        
        .in-top .info {
          transform-origin: 50% 0%;
          -webkit-animation: in-top 300ms ease 0ms 1 forwards;
                  animation: in-top 300ms ease 0ms 1 forwards;
        }
        
        .in-right .info {
          transform-origin: 100% 0%;
          -webkit-animation: in-right 300ms ease 0ms 1 forwards;
                  animation: in-right 300ms ease 0ms 1 forwards;
        }
        
        .in-bottom .info {
          transform-origin: 50% 100%;
          -webkit-animation: in-bottom 300ms ease 0ms 1 forwards;
                  animation: in-bottom 300ms ease 0ms 1 forwards;
        }
        
        .in-left .info {
          transform-origin: 0% 0%;
          -webkit-animation: in-left 300ms ease 0ms 1 forwards;
                  animation: in-left 300ms ease 0ms 1 forwards;
        }
        
        .out-top .info {
          transform-origin: 50% 0%;
          -webkit-animation: out-top 300ms ease 0ms 1 forwards;
                  animation: out-top 300ms ease 0ms 1 forwards;
        }
        
        .out-right .info {
          transform-origin: 100% 50%;
          -webkit-animation: out-right 300ms ease 0ms 1 forwards;
                  animation: out-right 300ms ease 0ms 1 forwards;
        }
        
        .out-bottom .info {
          transform-origin: 50% 100%;
          -webkit-animation: out-bottom 300ms ease 0ms 1 forwards;
                  animation: out-bottom 300ms ease 0ms 1 forwards;
        }
        
        .out-left .info {
          transform-origin: 0% 0%;
          -webkit-animation: out-left 300ms ease 0ms 1 forwards;
                  animation: out-left 300ms ease 0ms 1 forwards;
        }
        
        @-webkit-keyframes in-top {
          from {
            transform: rotate3d(-1, 0, 0, 90deg);
          }
          to {
            transform: rotate3d(0, 0, 0, 0deg);
          }
        }
        
        @keyframes in-top {
          from {
            transform: rotate3d(-1, 0, 0, 90deg);
          }
          to {
            transform: rotate3d(0, 0, 0, 0deg);
          }
        }
        @-webkit-keyframes in-right {
          from {
            transform: rotate3d(0, -1, 0, 90deg);
          }
          to {
            transform: rotate3d(0, 0, 0, 0deg);
          }
        }
        @keyframes in-right {
          from {
            transform: rotate3d(0, -1, 0, 90deg);
          }
          to {
            transform: rotate3d(0, 0, 0, 0deg);
          }
        }
        @-webkit-keyframes in-bottom {
          from {
            transform: rotate3d(1, 0, 0, 90deg);
          }
          to {
            transform: rotate3d(0, 0, 0, 0deg);
          }
        }
        @keyframes in-bottom {
          from {
            transform: rotate3d(1, 0, 0, 90deg);
          }
          to {
            transform: rotate3d(0, 0, 0, 0deg);
          }
        }
        @-webkit-keyframes in-left {
          from {
            transform: rotate3d(0, 1, 0, 90deg);
          }
          to {
            transform: rotate3d(0, 0, 0, 0deg);
          }
        }
        @keyframes in-left {
          from {
            transform: rotate3d(0, 1, 0, 90deg);
          }
          to {
            transform: rotate3d(0, 0, 0, 0deg);
          }
        }
        @-webkit-keyframes out-top {
          from {
            transform: rotate3d(0, 0, 0, 0deg);
          }
          to {
            transform: rotate3d(-1, 0, 0, 104deg);
          }
        }
        @keyframes out-top {
          from {
            transform: rotate3d(0, 0, 0, 0deg);
          }
          to {
            transform: rotate3d(-1, 0, 0, 104deg);
          }
        }
        @-webkit-keyframes out-right {
          from {
            transform: rotate3d(0, 0, 0, 0deg);
  .........完整代码请登录后点击上方下载按钮下载查看