html登陆切换效果,切换效果1.html

谁践踏了优雅 2022-10-06 00:56 279阅读 0赞

Document

@import url("https://fonts.googleapis.com/css?family=Signika");

\*,

::before,

::after \{

box-sizing: border-box;

body \{

margin: 0;

height: 100vh;

overflow: hidden;

display: flex;

line-height: 1.5;

font-family: 'Signika', cursive;

font-weight: 300;

background-color: \#21213d;

color: \#fff;

a \{

text-decoration: none;

color: \#3369e7;

\#check \{

display: none;

\#check+label \{

position: absolute;

top: 1em;

left: 1em;

z-index: 1;

display: flex;

align-items: center;

cursor: pointer;

\#check+label::before \{

position: absolute;

content: '';

top: -1em;

left: -1em;

width: 100vw;

height: 100vh;

background-color: rgba(33, 33, 61, 0.5);

transform-origin: 50% 50%;

transform: scale(1.3);

visibility: hidden;

opacity: 0;

transition: all 250ms linear;

\#check+label svg \{

margin-right: 0.5em;

\#check+label svg path \{

transform-origin: 35% 50%;

transition: transform 166.6666666667ms cubic-bezier(0.06, 0.63, 0.91, 0.66);

\#check:checked+label~aside \{

transform: none;

\#check:checked+label::before \{

left: calc(25vw - 1em);

transform: scale(1);

visibility: visible;

opacity: 1;

@media (max-width: 576px) \{

\#check:checked+label::before \{

left: calc(50vw - 1em);

\#check:checked+label svg \#one \{

transform: rotate(45deg);

\#check:checked+label svg \#two \{

transform: rotate(-45deg);

\#check:checked+label~article \{

z-index: -1;

transform: translateX(25vw) scale(0.7);

border-radius: 0.25em;

user-select: none;

pointer-events: none;

aside,

article \{

padding: 2.5em 1em 0.25em;

transition: all 250ms cubic-bezier(0.06, 0.63, 0.91, 0.66);

aside \{

position: absolute;

width: 25vw;

height: 100%;

display: flex;

flex-direction: column;

justify-content: space-between;

background-image: linear-gradient(45deg, \#3369e7, \#2ede98);

transform: translateX(-100%);

@media (max-width: 576px) \{

aside \{

width: 50vw;

article \{

position: relative;

transform-origin: 10% 50%;

width: 100%;

background-image: linear-gradient(45deg, \#1cc7d0, \#2ede98);

article .wrapper \{

margin: auto;

padding: 2em;

max-width: 90%;

height: 100%;

display: flex;

flex-direction: column;

justify-content: space-between;

article .wrapper h1 \{

margin: 0;

article .wrapper .footer \{

text-align: right;

Click me

## Title ##

*  Nav text
 *  Nav text
 *  Nav text
 *  Nav text
 *  Nav text

# Off-Canvas menu on Pure CSS #

Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident rerum unde porro consequatur

doloribus ex distinctio similique, voluptas repellendus voluptates nam dolorum! Repudiandae maxime,

itaque vero dolorem distinctio inventore explicabo!

Odio eaque cum blanditiis esse, earum saepe voluptate quae aliquid possimus facere non qui illo

necessitatibus eveniet ab sit quaerat. Atque animi nulla veritatis molestiae qui ipsam ut assumenda

facilis?

Follow me [in Twitter][]

一键复制

编辑

Web IDE

原始数据

按行查看

历史

[in Twitter]: https://twitter.com/andrejsharapov

html登陆切换效果,切换效果1.html

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关【HTML+CSS+JS实现登陆动画效果】

相关 html登陆切换效果,切换效果1.html

相关图片切换效果!

相关导航栏切换效果

相关选项卡切换效果，点击切换图片

相关 UIView切换效果

相关 html 水印效果

相关图片切换效果

相关 vue页面切换效果（slide效果切换）

相关 tab切换效果