html 文章内容滑动效果,HTML5水平滑动切换的文章内容面板

CSS

语言：

CSSSCSS

确定

:root {

--dark: #454549;

--light: #fff;

--mist: #eee;

--shadow: rgba(0, 0, 0, 0.4);

--accent: #0dc7db;

--line: .15ch;

--line-color: var(--dark);

}

.content {

-webkit-box-flex: 0;

-webkit-flex: 0 0 100%;

-ms-flex: 0 0 100%;

flex: 0 0 100%;

padding: 1em;

overflow: auto;

will-change: transform;

-webkit-transform: translateX(0%);

transform: translateX(0%);

-webkit-transition: -webkit-transform .3s ease-out;

transition: -webkit-transform .3s ease-out;

transition: transform .3s ease-out;

transition: transform .3s ease-out, -webkit-transform .3s ease-out;

}

[step="2"] .content {

-webkit-transform: translateX(-100%);

transform: translateX(-100%);

}

[step="3"] .content {

-webkit-transform: translateX(-200%);

transform: translateX(-200%);

}

[step="4"] .content {

-webkit-transform: translateX(-300%);

transform: translateX(-300%);

}

article {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

}

section {

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

position: relative;

overflow: hidden;

}

main {

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-flow: column;

-ms-flex-flow: column;

flex-flow: column;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

}

article {

width: 50vw;

height: 50vh;

min-width: 20em;

min-height: 15em;

border: var(--line) solid var(--line-color);

border-radius: .3em;

overflow: hidden;

background: var(--light);

box-shadow: 0 1em 3em -1em var(--shadow);

}

header {

padding: 1em;

border-bottom: var(--line) solid var(--line-color);

background: var(--accent);

color: var(--light);

}

footer {

-webkit-box-flex: 0;

-webkit-flex: none;

-ms-flex: none;

flex: none;

border-top: var(--line) solid var(--line-color);

text-align: right;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

background: var(--mist);

}

footer button {

border-radius: 0;

}

button {

font-size: inherit;

font-family: inherit;

border: none;

border-radius: .2em;

padding: .65em 1.3em;

background: var(--dark);

color: var(--light);

opacity: 1;

outline: none;

cursor: pointer;

}

button[disabled] {

opacity: .3;

cursor: not-allowed;

}

button[disabled].cancel {

color: inherit;

}

button.primary:not([disabled]) {

background: var(--accent);

}

button.cancel {

background: transparent;

color: var(--accent);

}

*,

*::before,

*::after {

box-sizing: border-box;

}

html,

body {

height: 100%;

}

html {

font-size: 10px;

}

body {

margin: 0;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

font-family: Helvetica, Arial, sans-serif;

font-size: calc(1em + 1vmin);

color: var(--dark);

background: var(--light);

}

a {

color: var(--accent);

text-decoration: none;

}

h3 {

font-weight: 200;

opacity: .7;

}

h3,

h4,

p {

margin: 0;

}

h3 + *,

h4 + *,

p + * {

margin-top: 1em;

}