js实现文字悬浮分割跳出动画代码-html代码-BFW代码库

js实现文字悬浮分割跳出动画代码

代码语言：html

所属分类：悬停

代码描述：js实现文字悬浮分割跳出动画代码

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

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

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

  
  

  
<style>
:root {
  --black: #252423;
  --white: #F6F4F2;
  --white-2: #FFF;
  --grey: #b8b6b3;
  --red: #FF4B4B;
  --orange: #FF8F42;
  --lightorange: #FFC730;
  --yellow: #F6FF56;
  --citrus: #A4FF4F;
  --green: #18FF74;
  --darkgreen: #00D672;
  --turquoise: #3CFFEC;
  --skyblue: #61C3FF;
  --kingblue: #5A87FF;
  --lavender: #8453E3;
  --purple: #C26EFF;
  --pink: #FB89FB;

  --input-border-radius: .25rem;
}

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

html,
body {
  background-color: var(--black);
  color: var(--white);
  font-family: sans-serif;
}

.black { color: var(--black); }
.white { color: var(--white); }
.red { color: var(--red); }
.blue { color: var(--skyblue); }
.green { color: var(--green); }

.grid {
  --one-cell: 100px;
  --border-color: rgba(255,255,255,.75);
  flex-grow: 1;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
}

.grid:before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(-90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(-90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    .........完整代码请登录后点击上方下载按钮下载查看