html 印刷标志CSS

Posted 2021-05-11

#titleContainer {
margin-top: 89px;
margin-bottom: 150px;
}
.row .row {
width: auto;
margin-left: 0em;
margin-right: 0em;
margin-top: 0;
margin-bottom: 0;
max-width: none;
}
.row .row:before, .row .row:after {
content: " ";
display: table;
}

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#titleContainer h1 {
font-size: 122px;
margin-bottom: 20px;
}
#titleContainer p:first-child, #titleContainer h1 {
font-family: 'bebas_neueregular';
}
#titleContainer p, #titleContainer h1 {
text-align: center;
font-weight: normal;
color: white;
margin: 0;
padding: 0;
}
#titleContainer p.desc {
text-transform: uppercase;
font-family: 'Calibri';
font-size: 17px;
margin-bottom: 10px;
}
#titleContainer p, #titleContainer h1 {
text-align: center;
font-weight: normal;
color: white;
margin: 0;
padding: 0;
}
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

<div id="titleContainer" class="row clear-fix">
::before
    	<p>The</p>
    	<h1 class="mainTitle"><span class="char1" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(32px) rotate(-9deg);">L</span><span class="char2" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(20px) rotate(-7deg);">O</span><span class="char3" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(10px) rotate(-5deg);">R</span><span class="char4" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(4px) rotate(-3deg);">E</span><span class="char5" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(1px) rotate(-1deg);">M</span><span class="char6 empty" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg);">&nbsp;</span><span class="char7" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(1px) rotate(1deg);">I</span><span class="char8" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(3px) rotate(3deg);">P</span><span class="char9" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(8px) rotate(4deg);">S</span><span class="char10" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(16px) rotate(6deg);">U</span><span class="char11" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(29px) rotate(9deg);">M</span></h1>
        <p class="desc">Ac, etiam magna odio purus egestas</p>
        <p class="desc desc2">magna porta lundium, scelerisque elit.</p>
::after
    </div>