js+css实现横向滚动足球年份大事记效果代码-html代码-BFW代码库

js+css实现横向滚动足球年份大事记效果代码

代码语言：html

代码描述：js+css实现横向滚动足球年份大事记效果代码，底部可横向拖动，点击年份范围可进行滚动切换，点击上下运动小球可显示文字。

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

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

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

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:root {
  --title-1: 3.2rem;
  --title-2: 1.6rem;
  --title-3: 1.25rem;
  --text: 1rem;
  --emoji: 2.5rem;
  --grey-light: #f5f5f5;
    /* colours based on UEFA's Euro 2024 identity */
  --white: #fff;
  --red: #fe0000;
  --blue: #143dda;
  --green: #24b760;
  --yellow: #ffca00;
  --black: #000;
}

@media only screen and (max-width: 1600px) {
  :root {
    --title-1: 2.5rem;
  }
}

@media only screen and (max-width: 1400px) {
  :root {
    --title-1: 2rem;
    --emoji: 2rem;
  }
}

@media only screen and (max-width: 1024px) {
  :root {
    --title-1: 1.5rem;
    --title-2: 1.2rem;
    --title-3: 1rem;
  }
}

@media only screen and (max-width: 767px) {
  :root {
    --title-1: 1.25rem;
    --title-2: .9rem;
    --title-3: .8rem;
    --text: .8rem;
    --emoji: 1.5rem;
  }
}

html {
  width: 100%;
  height: 100%;
  font-family: "Prompt", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  background: var(--blue);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

h1 {
  font-weight: 600;
  font-size: var(--title-1);
  white-space: nowrap;
}

h2 {
  font-weight: 400;
  font-size: var(--title-2);
}

h3,
h4,
h5,
h6 {
  font-weight: 400;
  font-size: var(--title-3);
  line-height: 1.3;
  word-spacing: -2px;
}

p {
  font-size: var(--text);
  line-height: 1.3;
}

a {
  text-decoration: overline;
  transition: all .3s ease;
}

a:hover,
a:active,
a.active,
a:focus {
  outline: 0;
  text-decoration: underline;
}

button {
  transition: transform .3s ease;
}

button:hover,
button:focus {
  transform: scale(1.2);
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9;
  color: #fff;
  pointer-events: none;
}

header:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  background: var(--blue);
}

@media(max-width: 550px) {
  header:after {
    width: 100%;
    height: 10.1vh;
  }
}

nav svg {
  position: relative;
  fill: var(--blue);
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
}

@media(max-width: 550px) {
  nav svg {
    margin-top: 10vh;
  }
}

nav text {
  transform: translateY(-8px);
  pointer-events: auto;
}

nav a {
  font-size: .8rem;
  font-weight: 400;
  margin: 0 2rem;
  display: inline;
  opacity: .5;
  /* firefox fallback */
  fill: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  pointer-events: auto;
}

@media(max-width: 1400px) {
  nav a {
    font-size: 1rem;
  }
}

nav a:hover,
nav a:active,
nav a.active,
nav a:focus {
  opacity: 1;
  fill: #fff;
  text-decoration: none;
}

.page-info {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  padding-top: .8rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 10;
}

@media(min-height: 500px) {
  .page-info {
    padding-top: .8rem;
  }
}

@media(min-width: 280px) {
  .page-info h3 {
    whi.........完整代码请登录后点击上方下载按钮下载查看