文字视觉差异交互效果-html代码-BFW代码库

文字视觉差异交互效果

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> - Spotify wrapped effect</title>

<style>
  @import url("https://fonts.googleapis.com/css?family=Codystar:300&display=swap");
:root {
  --default-text: #fff;
  --default-background: #000;
  --color-primary: hsl(77, 92%, 71%);
  --color-secondary: hsl(163, 32%, 43%);
  --color-tertiary: hsl(0, 0%, 100%);
  --color-quaternary: hsl(324, 86%, 53%);
}

body {
  background: var(--default-background);
  color: var(--default-text);
  font-family: 'Codystar', sans-serif;
  line-height: 1.6;
  font-size: 3.2rem;
  letter-spacing: -2px;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: 'one two three' 'four five six' 'seven eight nine';
  height: 100vh;
  perspective: 1000px;
}

.hover-area {
  align-self: stretch;
  justify-self: stretch;
  z-index: 1;
}

.area-1 {
  grid-area: one;
}

.area-2 {
  grid-area: two;
}

.area-3 {
  grid-area: three;
}

.area-4 {
  grid-area: four;
}

.area-5 {
  grid-area: five;
}

.area-6 {
  grid-area: six;
}

.area-7 {
  grid-area: seven;
}

.area-8 {
  grid-area: eight;
}

.area-9 {
  grid-area: nine;
}

.hover-area:nth-of-type(1):hover ~ .content {
  transform: rotateY(10deg) rotateX(-10deg);
}
.hover-area:nth-of-type(1):hover ~ .content .secondary, .hover-area:nth-of-type(1):hover ~ .content .quaternary {
  transform: translateX(-0.5rem) rotateY(2deg) rotateX(-2deg);
}

.hover-area:nth-of-type(2):hover ~ .content {
  transform: rotateY(0deg) rotateX(-10deg);
}
.hover-area:nth-of-type(2):hover ~ .content .secondary, .hover-area:nth-of-type(2):hover ~ .content .quaternary {
  transform: translateX(0) rotateX(0) rotateX(-2deg);
}

.hover-area:nth-of-type(3):hover ~ .content {
  transform: rotateY(-10deg) rotateX(-10deg);
}
.hover-area:nth-of-type(3):hover ~ .content .secondary, .hover-area:nth-of-type(3):hover ~ .content .quaternary {
  transform: translateX(0.5rem) rotateY(-2deg) rotateX(-2deg);
}

.hover-area:nth-of-type(4):hover ~ .content {
  transform: rotateY(10deg);
}
.hover-area:nth-of-type(4):hover ~ .content .secondary, .hover-area:nth-of-type(4):hover ~ .content .quaternary {
  transform: translateX(-0.5rem) rotateX(2deg);
}

.hover-area:nth-of-type(5):hover ~ .content {
  transform: rotateY(0deg);
}
.hover-area:nth-of-type(5):hover ~ .content .secondary, .hover-area:nth-of-type(5):hover ~ .content .quaternary {
  transform: translateX(0) rotateX(0);
}

.hover-area:nth-of-type(6):hover ~ .........完整代码请登录后点击上方下载按钮下载查看