CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100);

body {

overflow: hidden;

height: 100vh;

width: 100vw;

background-image: url("http://themes-pixeden.com/playground/text/tenue/assets/img/texture.jpg");

}

.tenue-shadow {

font-family: 'Josefin Sans', sans-serif;

/* You could add: */

font-weight: 100;

text-shadow: -0.00585em -0.00273em 0.1px #a498ab, -0.00878em -0.00546em 0.3px #a59aac, -0.01463em -0.00818em 0.5px #a79bad, -0.01755em -0.01091em 0.7px #a89dae, -0.0234em -0.01364em 0.9px #a99eb0, -0.02633em -0.01637em 1.1px #aaa0b1, -0.03218em -0.0191em 1.3px #aca1b2, -0.0351em -0.02182em 1.5px #ada2b3, -0.04096em -0.02455em 1.7px #aea4b4, -0.04388em -0.02728em 1.9px #b0a5b6, -0.04973em -0.03001em 2.1px #b1a7b7, -0.05266em -0.03274em 2.3px #b2a8b8, -0.05851em -0.03546em 2.5px #b3a9b9, -0.06143em -0.03819em 2.7px #b4abba, -0.06728em -0.04092em 2.9px #b6acbb, -0.07021em -0.04365em 3.1px #b7adbc, -0.07606em -0.04638em 3.3px #b8afbd, -0.07899em -0.0491em 3.5px #b9b0be, -0.08484em -0.05183em 3.7px #bab1bf, -0.08776em -0.05456em 3.9px #bbb3c0, -0.09361em -0.05729em 4.1px #bcb4c2, -0.09654em -0.06002em 4.3px #beb5c3, -0.10239em -0.06274em 4.5px #bfb6c4, -0.10531em -0.06547em 4.7px #c0b8c5, -0.11117em -0.0682em 4.9px #c1b9c6, -0.11409em -0.07093em 5.1px #c2bac7, -0.11994em -0.07366em 5.3px #c3bbc8, -0.12287em -0.07638em 5.5px #c4bcc9, -0.12872em -0.07911em 5.7px #c5beca, -0.13164em -0.08184em 5.9px #c6bfca, -0.13749em -0.08457em 6.1px #c7c0cb, -0.14042em -0.0873em 6.3px #c8c1cc, -0.14627em -0.09002em 6.5px #c9c2cd, -0.1492em -0.09275em 6.7px #cac3ce, -0.15505em -0.09548em 6.9px #cbc5cf, -0.15797em -0.09821em 7.1px #ccc6d0, -0.16382em -0.10094em 7.3px #cdc7d1, -0.16675em -0.10366em 7.5px #cec8d2, -0.1726em -0.10639em 7.7px #cfc9d3, -0.17552em -0.10912em 7.9px #d0cad4, -0.18138em -0.11185em 8.1px #d1cbd5, -0.1843em -0.11458em 8.3px #d2ccd5, -0.19015em -0.1173em 8.5px #d3cdd6, -0.19308em -0.12003em 8.7px #d4ced7, -0.19893em -0.12276em 8.9px #d5cfd8, -0.20185em -0.12549em 9.1px #d6d0d9, -0.2077em -0.12822em 9.3px #d7d1da, -0.21063em -0.13094em 9.5px #d7d2da, -0.21648em -0.13367em 9.7px #d8d3db, -0.21941em -0.1364em 9.9px #d9d4dc, -0.22526em -0.13913em 10.1px #dad5dd, -0.22818em -0.14186em 10.3px #dbd6de, -0.23403em -0.14458em 10.5px #dcd7df, -0.23696em -0.14731em 10.7px #ddd8df, -0.24281em -0.15004em 10.9px #ded9e0, -0.24573em -0.15277em 11.1px #dedae1, -0.25159em -0.1555em 11.3px #dfdbe2, -0.25451em -0.15822em 11.5px #e0dce2, -0.26036em -0.16095em 11.7px #e1dde3, -0.26329em -0.16368em 11.9px #e2dee4, -0.26914em -0.16641em 12.1px #e3dfe5, -0.27206em -0.16914em 12.3px #e3e0e5, -0.27791em -0.17186em 12.5px #e4e1e6, -0.28084em -0.17459em 12.7px #e5e2e7, -0.28669em -0.17732em 12.9px #e6e2e8, -0.28962em -0.18005em 13.1px #e6e3e8, -0.29547em -0.18278em 13.3px #e7e4e9, -0.29839em -0.1855em 13.5px #e8e5ea, -0.30424em -0.18823em 13.7px #e9e6ea, -0.30717em -0.19096em 13.9px #eae7eb, -0.31302em -0.19369em 14.1px #eae8ec, -0.31594em -0.19642em 14.3px #ebe8ed, -0.3218em -0.19914em 14.5px #ece9ed, -0.32472em -0.20187em 14.7px #edeaee, -0.33057em -0.2046em 14.9px #edebef, -0.3335em -0.20733em 15.1px #eeecef, -0.33935em -0.21006em 15.3px #efedf0, -0.34227em -0.21278em 15.5px #efedf1, -0.34812em -0.21551em 15.7px #f0eef1, -0.35105em -0.21824em 15.9px #f1eff2, -0.3569em -0.22097em 16.1px #f1f0f2, -0.35983em -0.2237em 16.3px #f2f1f3, -0.36568em -0.22642em 16.5px #f3f1f4, -0.3686em -0.22915em 16.7px #f4f2f4, -0.37445em -0.23188em 16.9px #f4f3f5, -0.37738em -0.23461em 17.1px #f5f4f6, -0.38323em -0.23734em 17.3px #f6f4f6, -0.38615em -0.24006em 17.5px #f6f5f7, -0.39201em -0.24279em 17.7px #f7f6f7, -0.39493em -0.24552em 17.9px #f8f7f8, -0.40078em -0.24825em 18.3px #f8f7f9, -0.40371em -0.25098em 18.7px #f9f8f9, -0.40956em -0.2537em 19.1px #faf9fa, -0.41248em -0.25643em 19.5px #fafafa, -0.41833em -0.25916em 19.9px #fbfafb, -0.42126em -0.26189em 20.3px #fbfbfc, -0.42711em -0.26462em 20.7px #fcfcfc, -0.43004em -0.26734em 21.7px #fdfcfd, -0.43589em -0.27007em 22.7px #fdfdfd, -0.43881em -0.2728em 23.7px #fefefe, -0.44466em -0.27553em 24.7px white;

mix-blend-mode: multiply;

}

.tenue-shadow #one {

color: #ff003b;

}

.tenue-shadow #two {

color: #e0f;

}

.tenue-shadow #three {

color: #50f;

}

.tenue-shadow #four {

color: #00d9ff;

}

.tenue-shadow #five {

color: #0f8;

}

.tenue-shadow #six {

color: #df0;

}

.tenue-shadow #seven {

color: #f80;

}

.tenue-extras {

font-size: 19vh;

letter-spacing: 0.34em;

line-height: 3.5;

margin-bottom: 0.5em;

padding-left: 0.34em;

margin-top: 0;

overflow: hidden;

padding-top: 1em;

position: relative;

text-align: center;

text-transform: none;

word-wrap: break-word;

}

.tenue-overlay {

background-blend-mode: difference, color;

background-image: linear-gradient(45deg, rgba(255, 0, 0, 0) 0%, #ff2424 13%, rgba(255, 36, 255, 0.84) 15%, #c87f5b 25%, rgba(211, 101, 80, 0.73) 33%, #5bc8c8 48%, rgba(91, 200, 200, 0.9) 49%, #c87f5b 57%, #c8c85b 63%, #b6c85b 67%, #d26251 74%, rgba(37, 254, 59, 0.8) 84%, #c7c55c 86%, rgba(37, 254, 59, 0.7) 100%);

background-repeat: no-repeat;

background-size: cover;

height: 400%;

left: 0;

mix-blend-mode: difference;

opacity: 0.3;

position: absolute;

top: 0;

width: 200%;

animation: ring 5s cubic-bezier(0.74, 0.31, 0.37, 0.8) infinite alternate;

}

@keyframes ring {

50% {

transform: scale(3);

}

100% {

transform: translate(-50%, -50%) rotateZ(360deg);

}

}

.u-dn {

display: none;

}