CSS JS 内容滑块, 混合渐变背景

下载代码

html

css

分享到微信朋友圈

html

<section class="content">
        <article>
            <header>
                <h1>Get the middle seat if you don't check in on time</h1>
            </header>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </article>
        <article data-active="true">
            <header>
                <h1>Your boarding zone is "recruiter"</h1>
            </header>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, reiciendis.</p>
        </article>
        <article data-id="3">
            <header>
                <h1>Check in for your flight online</h1>
            </header>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet dignissimos corporis dolor.</p>
        </article>
        <article data-id="4">
            <header>
                <h1>Get through security eventually</h1>
            </header>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint eaque adipisci sit?</p>
        </article>
    </section>
</main>

css

:root {
  --green: #37c4b1;
  --cyan: #25aad8;
  --blue: #4092e3;
  --purple: #7d54c1;
  --pink: #c776a3;
  --orange: #ee8877;
  --deep-purple: #281c4c;
  --duration: 0.7s;
  --ease: cubic-bezier(0.6, 0, 0.2, 1);
  --transition: transform var(--duration) var(--ease);
}

*,
*:before,
*:after {
  box-sizing: border-box;
  position: relative;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--deep-purple);
  overflow: hidden;
}

#app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: 90vmin;
  width: 55vmin;
}
#app > section {
  margin: 5vmin 8vmin;
  grid-area: 1 / 1;
}

section {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 800px;
          perspective: 800px;
  will-change: transform;
}
section > * {
  flex: 0 0 100%;
  grid-area: 1 / 1;
}

.backgrounds {
  -webkit-filter: url("#goo");
          filter: url("#goo");
  pointer-events: none;
}

.background {
  will-change: transform;
  border-radius: 2vmin;
  background-image: linear-gradient(to bottom, var(--primary, blue), var(--secondary, pink));
}
.background::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 3;
  background-image: linear-gradient(to bottom, #4b3777, #331847);
  opacity: 0.8;
  transition: inherit;
  transition-property: opacity;
}
.background[data-active]::before {
  opacity: 0.01;
}

article {
  display: flex;
  flex-direction: column;
}

.background,
article {
  will-change: transform;
  transition: var(--transition);
  transition-property: z-index, -webkit-transform, -webkit-transform-origin;
  transition-property: transform, transform-origin, z-index;
  transition-property: transform, transform-origin, z-index, -webkit-transform, -webkit-transform-origin;
  padding: 5vmin;
  color: white;
  -webkit-transform-origin: right center;
          transform-origin: right center;
  -webkit-transform: translateX(-90%) translateZ(-25vmin) rotateY(40deg);
          transform: translateX(-90%) translateZ(-25vmin) rotateY(40deg);
}
.background[data-active],
article[data-active] {
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: translateX(0) translateZ(0) rotateY(0deg);
          transform: translateX(0) translateZ(0) rotateY(0deg);
  z-index: 3;
}
.background[data-active] ~ *,
article[data-active] ~ * {
  z-index: -1;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transform: translateX(140%) translateZ(-25vmin) rotateY(-40deg);
          transform: translateX(140%) translateZ(-25vmin) rotateY(-40deg);
}
.background[data-active] + *,
article[data-active] + * {
  z-index: 1;
  -webkit-transform: translateX(90%) translateZ(-25vmin) rotateY(-40deg);
          transform: translateX(90%) translateZ(-25vmin) rotateY(-40deg);
}

article {
  opacity: 0;
  transition-property: opacity, z-index, -webkit-transform, -webkit-transform-origin;
  transition-property: transform, transform-origin, opacity, z-index;
  transition-property: transform, transform-origin, opacity, z-index, -webkit-transform, -webkit-transform-origin;
}
article[data-active] {
  opacity: 1;
}

h1 {
  font-size: 4vmin;
  line-height: 1.2;
}

p {
  font-size: 2.5vmin;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg