html怎么搞浮动标代码,CSS浮动标签

css

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

:root {

/* generic */

--gutterSm: 0.4rem;

--gutterMd: 0.8rem;

--gutterLg: 1.6rem;

--gutterXl: 2.4rem;

--gutterXx: 7.2rem;

--colorPrimary400: #7e57c2;

--colorPrimary600: #5e35b1;

--colorPrimary800: #4527a0;

--fontFamily: "Dosis", sans-serif;

--fontSizeSm: 1.2rem;

--fontSizeMd: 1.6rem;

--fontSizeLg: 2.1rem;

--fontSizeXl: 2.8rem;

--fontSizeXx: 3.6rem;

--lineHeightSm: 1.1;

--lineHeightMd: 1.8;

--transitionDuration: 300ms;

--transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1);

/* floated labels */

--inputPaddingV: var(--gutterMd);

--inputPaddingH: var(--gutterLg);

--inputFontSize: var(--fontSizeLg);

--inputLineHeight: var(--lineHeightMd);

--labelScaleFactor: 0.8;

--labelDefaultPosY: 50%;

--labelTransformedPosY: calc( (var(--labelDefaultPosY)) - (var(--inputPaddingV) * var(--labelScaleFactor)) - (var(--inputFontSize) * var(--inputLineHeight)) );

--inputTransitionDuration: var(--transitionDuration);

--inputTransitionTF: var(--transitionTF);

}

*,

*::before,

*::after {

box-sizing: border-box;

}

html {

font-size: 10px;

}

body {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

overflow: hidden;

width: 100vw;

height: 100vh;

color: #455A64;

background-color: #7E57C2;

font-family: var(--fontFamily);

font-size: var(--fontSizeMd);

line-height: var(--lineHeightMd);

}

.Wrapper {

-webkit-box-flex: 0;

-ms-flex: 0 0 80%;

flex: 0 0 80%;

max-width: 80%;

}

.Title {

margin: 0 0 var(--gutterXx) 0;

padding: 0;

color: #fff;

font-size: var(--fontSizeXx);

font-weight: 400;

line-height: var(--lineHeightSm);

text-align: center;

text-shadow: -0.1rem 0.1rem 0.2rem var(--colorPrimary800);

}

.Input {

position: relative;

}

.Input-text {

display: block;

margin: 0;

padding: var(--inputPaddingV) var(--inputPaddingH);

color: inherit;

width: 100%;

font-family: inherit;

font-size: var(--inputFontSize);

font-weight: inherit;

line-height: var(--inputLineHeight);

border: none;

border-radius: 0.4rem;

-webkit-transition: box-shadow var(--transitionDuration);

transition: box-shadow var(--transitionDuration);

}

.Input-text:focus {

outline: none;

box-shadow: 0.2rem 0.8rem 1.6rem var(--colorPrimary600);

}

.Input-label {

display: block;

position: absolute;

bottom: 50%;

left: 1rem;

color: #311B92;

font-family: inherit;

font-size: var(--inputFontSize);

font-weight: inherit;

line-height: var(--inputLineHeight);

opacity: 0;

-webkit-transform: translate3d(0, var(--labelDefaultPosY), 0) scale(1);

transform: translate3d(0, var(--labelDefaultPosY), 0) scale(1);

-webkit-transform-origin: 0 0;

transform-origin: 0 0;

-webkit-transition: opacity var(--inputTransitionDuration) var(--inputTransitionTF), visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF), z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF), -webkit-transform var(--inputTransitionDuration) var(--inputTransitionTF);

transition: opacity var(--inputTransitionDuration) var(--inputTransitionTF), visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF), z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF), -webkit-transform var(--inputTransitionDuration) var(--inputTransitionTF);

transition: opacity var(--inputTransitionDuration) var(--inputTransitionTF), transform var(--inputTransitionDuration) var(--inputTransitionTF), visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF), z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);

transition: opacity var(--inputTransitionDuration) var(--inputTransitionTF), transform var(--inputTransitionDuration) var(--inputTransitionTF), visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF), z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF), -webkit-transform var(--inputTransitionDuration) var(--inputTransitionTF);

}

.Input-text:placeholder-shown + .Input-label {

visibility: hidden;

z-index: -1;

}

.Input-text:not(:placeholder-shown) + .Input-label,

.Input-text:focus:not(:placeholder-shown) + .Input-label {

visibility: visible;

z-index: 1;

opacity: 1;

-webkit-transform: translate3d(0, var(--labelTransformedPosY), 0) scale(var(--labelScaleFactor));

transform: translate3d(0, var(--labelTransformedPosY), 0) scale(var(--labelScaleFactor));

-webkit-transition: visibility 0ms, z-index 0ms, -webkit-transform var(--inputTransitionDuration);

transition: visibility 0ms, z-index 0ms, -webkit-transform var(--inputTransitionDuration);

transition: transform var(--inputTransitionDuration), visibility 0ms, z-index 0ms;

transition: transform var(--inputTransitionDuration), visibility 0ms, z-index 0ms, -webkit-transform var(--inputTransitionDuration);

}