css实现文字菜单鼠标悬停翻转动画效果代码-html代码-BFW代码库

css实现文字菜单鼠标悬停翻转动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现文字菜单鼠标悬停翻转动画效果代码

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

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

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

  
  
  
<style>
.quick-flip {
  --transition-duration: 0.325s;
  --timing-function: cubic-bezier(0.66, 0, 0.34, 1);
  /*   --timing-function: linear(0, 0.234 11.8%, 0.403 18.4%, 0.624 24.7%, 0.999 33.3%, 0.76 39.9%, 0.705 42.6%, 0.687 45.2%, 0.703 47.7%, 0.753 50.3%, 0.999 57.7%, 0.89 61.8%, 0.865 63.6%, 0.857 65.3%, 0.865 67%, 0.887 68.8%, 0.999 74.5%, 0.957 77.5%, 0.944 80.2%, 0.954 82.7%, 1 88.2%, 0.988 91.9%, 1); */

  overflow-y: clip;

  > * {
    /* inline elements can't use transforms */
    display: block;

    /* the transform is moving it up
       then the translate has a  */
    transition: transform var(--transition-duration) var(--timing-function),
      translate 0ms calc(var(--transition-duration) / 2);
  }

  &:is(:hover, :focus-within) > * {
    transform: translateY(-2lh);
    translate: 0 2lh;
  }

  &:focus-within {
    outline: 2px solid var(--teal);
    border-radius: 4p.........完整代码请登录后点击上方下载按钮下载查看