鼠标悬浮文字动画效果-BFW代码库

鼠标悬浮文字动画效果
代码语言：html
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Link &amp; Button - Shatter Effect</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
      /* Hover over a link/button, can tab too. */

/* A11y: Screen readers will only read word one time. (.shadow will be read, .clone will be ignored) */

/* By the way, There are some neat tricks in this one. */

/* default/reset */
/* =============================================================================== */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a,
a:link,
a:focus,
a:hover,
a:active {
  box-shadow: none;
  outline: none;
}

button::-moz-focus-inner {
  border: 0;
}

html {
  font-size: 62.5%;
}

body {
  min-height: 100vh;
  padding: 4rem 16rem;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;

  background: hsl(220, 25%, 10%);

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@media screen and (max-width: 960px) {

  body {
    justify-content: center;
    flex-direction: column;
  }

}

/* container */
/* =============================================================================== */
.container {
  height: 48rem;
  padding: 0 6rem;
  margin: 1rem;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* link */
/* =============================================================================== */
.link {
  --color: hsl(200, 60%, 50%);
  --shadow: hsl(230, 5%, 66%);
  --border-color: hsl(230, 5%, 44%);

  color: var(--color);
  border-bottom: 1px solid var(--border-color);

  font-size: 1.8rem;
  font-weight: normal;
  text-decoration: none;
  letter-spacing: .2rem;

  cursor: pointer;
  position: relative;

  transition: .4s;
}

.link:hover,
.link:focus,
.link:active {
  border-color: currentColor;
}

/* button */
/* most of the css is same as link, just for clear understanding of the code. */
/* =============================================================================== */
.button {
  --color: hsl(140, 60%, 50%);
  --shadow: hsl(230, 5%, 66%);
  --border-color: hsl(230, 5%, 44%);

  padding: 1.4rem 3.2rem;
  border: 1px solid var(--border-color);
  border-radius: 100rem;

  color: var(--color);
  background: transparent;

  font-family: inherit;
  font-size: 1.8rem;
  font-weight: normal;
  letter-spacing: .2rem;

  cursor: pointer;

  position: relative;
  transition: .4s;
}

.button:hover,
.button:focus,
.button:active {
  border-color: currentColor;
}

/* rest */
/* =============================================================================== */
.shadow {
  color: var(--shadow);
  transition: .4s;
}

.clone {
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
}

.letter {
  --r: 20deg;
  --m-h: 150px;
  --m-v: 150px;

  -webkit-transform: rotate(var(--r)) translate(var(--m-h), var(--m-v));

          transform: rotate(var(--r)) translate(var(--m-h), var(--m-v));
  transition: .3s;
}

/* link, button */
/* =============================================================================== */
.link:hover .letter,
.link:focus .letter,
.button:hover .letter,
.button:focus .letter {
  .........完整代码请登录后点击上方下载按钮下载查看
鼠标悬浮文字动画效果

网友评论0
