Advertisement
austinh115

[HTML/CSS] xat.me/soar current xs (as of then and now)

Jan 30th, 2017
220
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.58 KB | None | 0 0
  1. background:#575859}/** CSS By OrangeJuice (638877683) **/*{padding:0}*{margin:0}*{font-family:Helvetica , sans-serif}html,body,[name=denopeion],[name=animation]{width:100%}html,body{overflow:hidden}html,body,[name=letter],[name=denopeion],[name=animation]{position:fixed}html,body,[name=animation]{top:0%}html,body,[name=animation]{left:0%}[name=letter]{font-size:120px}[name=letter],[name=denopeion]{font-family:Helvetica}[name=letter]{font-weight:Bold}[name=letter],[name=denopeion]{color:rgba(18,22,26,0.7)}[name=letter]{width:120px}[name=letter]{height:120px}[name=letter],[name=denopeion]{text-align:center}[name=letter]{vertical-align:middle}[name=letter]{line-height:120px}[name=letter],[name=cloud],[name=drops]{top:50%}[name=letter],[name=cloud],[name=drops]{left:50%}[name=letter]{margin-top:-60px}[name=letter],[name=cloud] div:nth-of-type(4){margin-left:-60px}[name=letter]{opacity:1}[name=letter],[name=denopeion]{z-index:100}[name=denopeion]{bottom:10px}[name=denopeion]{font-weight:200}[name=denopeion]{font-size:11px}[name=denopeion]{letter-spacing:1px}body,[name=animation]{height:100%}[name=animation]{z-index:1}[name=cloud],[name=cloud] div,[name=drops],[name=drops] div,[name=drops] div:before{position:absolute}[name=cloud]{-webkit-transform:scale( 0.65 )}[name=cloud]{-moz-transform:scale( 0.65 )}[name=cloud]{-ms-transform:scale( 0.65 )}[name=cloud]{-o-transform:scale( 0.65 )}[name=cloud]{transform:scale( 0.65 )}[name=cloud] div{width:200px}[name=cloud] div{height:200px}[name=cloud] div{background-color:rgba( 215,216,218,1 )}[name=cloud] div{border-radius:100px}[name=cloud] div:nth-of-type(1){animation:poof 5s ease-in-out -1s infinite alternate none}[name=cloud] div:nth-of-type(1){-webkit-animation:poof 5s ease-in-out -1s infinite alternate none}[name=cloud] div:nth-of-type(1){margin-top:-100px}[name=cloud] div:nth-of-type(1),[name=drops] div:nth-of-type(1){margin-left:-100px}[name=cloud] div:nth-of-type(2){animation:poof 5s ease-in-out -2s infinite alternate none}[name=cloud] div:nth-of-type(2){-webkit-animation:poof 5s ease-in-out -2s infinite alternate none}[name=cloud] div:nth-of-type(2),[name=cloud] div:nth-of-type(5){margin-top:-90px}[name=cloud] div:nth-of-type(2){margin-left:-240px}[name=cloud] div:nth-of-type(3){animation:poof 5s ease-in-out -3s infinite alternate none}[name=cloud] div:nth-of-type(3){-webkit-animation:poof 5s ease-in-out -3s infinite alternate none}[name=cloud] div:nth-of-type(3){margin-top:-150px}[name=cloud] div:nth-of-type(3){margin-left:-180px}[name=cloud] div:nth-of-type(4){animation:poof 5s ease-in-out -4s infinite alternate none}[name=cloud] div:nth-of-type(4){-webkit-animation:poof 5s ease-in-out -4s infinite alternate none}[name=cloud] div:nth-of-type(4){margin-top:-170px}[name=cloud] div:nth-of-type(5){animation:poof 5s ease-in-out -5s infinite alternate none}[name=cloud] div:nth-of-type(5){-webkit-animation:poof 5s ease-in-out -5s infinite alternate none}[name=cloud] div:nth-of-type(5),[name=drops],[name=drops] div:nth-of-type(6){margin-left:-20px}[name=drops]{z-index:-1}[name=drops]{margin-top:50px}[name=drops] div{width:10px}[name=drops] div{height:10px}[name=drops] div{border-radius:10px}[name=drops] div{background-color:rgba(233,234,245,1)}[name=drops] div{margin-top:-5px}[name=drops] div{margin-left:-5px}[name=drops] div:before{content:""}[name=drops] div:before{border-bottom:20px solid rgba(233,234,245,1)}[name=drops] div:before{border-left:5px solid transparent}[name=drops] div:before{border-right:5px solid transparent}[name=drops] div:before{margin-top:-16px}[name=drops] div:nth-of-type(1){animation:drip 1s ease-in -0.0s infinite normal none}[name=drops] div:nth-of-type(1){-webkit-animation:drip 1s ease-in -0.0s infinite normal none}[name=drops] div:nth-of-type(2){margin-left:100px}[name=drops] div:nth-of-type(2){animation:drip 1.1s ease-in -0.1s infinite normal none}[name=drops] div:nth-of-type(2){-webkit-animation:drip 1.1s ease-in -0.1s infinite normal none}[name=drops] div:nth-of-type(3){margin-left:-75px}[name=drops] div:nth-of-type(3){animation:drip 1s ease-in -0.2s infinite normal none}[name=drops] div:nth-of-type(3){-webkit-animation:drip 1s ease-in -0.2s infinite normal none}[name=drops] div:nth-of-type(4){margin-left:60px}[name=drops] div:nth-of-type(4){animation:drip 1.2s ease-in -0.3s infinite normal none}[name=drops] div:nth-of-type(4){-webkit-animation:drip 1.2s ease-in -0.3s infinite normal none}[name=drops] div:nth-of-type(5){margin-left:30px}[name=drops] div:nth-of-type(5){animation:drip 1s ease-in -0.4s infinite normal none}[name=drops] div:nth-of-type(5){-webkit-animation:drip 1s ease-in -0.4s infinite normal none}[name=drops] div:nth-of-type(6){animation:drip 1.3s ease-in -0.5s infinite normal none}[name=drops] div:nth-of-type(6){-webkit-animation:drip 1.3s ease-in -0.5s infinite normal none}[name=drops] div:nth-of-type(7){margin-left:10px}[name=drops] div:nth-of-type(7){animation:drip 1s ease-in -0.6s infinite normal none}[name=drops] div:nth-of-type(7){-webkit-animation:drip 1s ease-in -0.6s infinite normal none}[name=drops] div:nth-of-type(8){margin-left:-40px}[name=drops] div:nth-of-type(8){animation:drip 1.2s ease-in -0.7s infinite normal none}[name=drops] div:nth-of-type(8){-webkit-animation:drip 1.2s ease-in -0.7s infinite normal none}[name=drops] div:nth-of-type(9){margin-left:50px}[name=drops] div:nth-of-type(9){animation:drip 1s ease-in -0.8s infinite normal none}[name=drops] div:nth-of-type(9){-webkit-animation:drip 1s ease-in -0.8s infinite normal none}[name=drops] div:nth-of-type(10){margin-left:-65px}[name=drops] div:nth-of-type(10){animation:drip 1.1s ease-in -0.9s infinite normal none}[name=drops] div:nth-of-type(10){-webkit-animation:drip 1.1s ease-in -0.9s infinite normal none}@keyframes drip{100%{transform:translate(0px,1000px)}0%{transform:translate(0px,0px)}}@keyframes poof{100%{transform:translate(-4px,-2px)}93%{transform:translate(10px,4px)}82%{transform:translate(-6px,-3px)}74%{transform:translate(10px,8px)}61%{transform:translate(-8px,-2px)}48%{transform:translate(10px,-4px)}36%{transform:translate(-6px,4px)}25%{transform:translate(10px,0px)}15%{transform:translate(-5px,-3px)}8%{transform:translate(10px,2px)}0%{transform:translate(-10px,4px)}}[name=takiri]{outline:none}[name=takiri]{text-decoration:none}[name=takiri]{position:absolute}[name=takiri]{font-size:8em}[name=takiri]{line-height:1}[name=takiri]{color:#9e9ba4}[name=takiri]{display:inline-block}[name=takiri]{font-style:italic}[name=takiri]{font-family:'Playfair Display', serif}[name=takiri]{font-weight:700}[name=takiri]{font-size:7em}[name=takiri]{padding:0 10px 20px}[name=takiri]{-webkit-transition:color 0.5s}[name=takiri]{transition:color 0.5s}[name=takiri]:hover{color:#1e1a1b}[name=takiri]::before{content:''}[name=takiri]::before,[name=takiri] span{position:absolute}[name=takiri]::before{height:36px}[name=takiri]::before{width:120%}[name=takiri]::before{top:50%}[name=takiri]::before{margin-top:-18px}[name=takiri]::before{left:-10%}[name=takiri]::before{z-index:-1}[name=takiri]::before{background:#F9F9F9}[name=takiri]::before{-webkit-transform:rotate3d(0,0,1,45deg) scale3d(0,1,1)}[name=takiri]::before{transform:rotate3d(0,0,1,45deg) scale3d(0,1,1)}[name=takiri]::before{-webkit-transition:-webkit-transform 0.5s}[name=takiri]::before{transition:transform 0.5s}[name=takiri]:hover::before{-webkit-transform:rotate3d(0,0,1,45deg) scale3d(1,1,1)}[name=takiri]:hover::before{transform:rotate3d(0,0,1,45deg) scale3d(1,1,1)}[name=takiri] span{font-size:20%}[name=takiri] span{font-weight:400}[name=takiri] span{right:15px}[name=takiri] span{color:#e53369}[name=takiri] span{bottom:0}[name=takiri] span{opacity:0}[name=takiri] span{-webkit-transform:translate3d(-10px,-10px,0)}[name=takiri] span{transform:translate3d(-10px,-10px,0)}[name=takiri] span{-webkit-transition:-webkit-transform 0.5s, opacity 0.5s}[name=takiri] span{transition:transform 0.5s, opacity 0.5s}[name=takiri]:hover span{opacity:1}[name=takiri]:hover span{-webkit-transform:translate3d(0,0,0)}[name=takiri]{z-index:9999}[name=takiri]{left:50%}[name=takiri]{bottom:15%}[name=takiri]{transform:translate(-50%,-50%)}[name=takiri]:hover span{transform:translate3d(0,0,0)}*{;
  2.  
  3. <a name="takiri" href="#">Soar <span>FEX Assistant</span></a>
  4.  
  5.   <div name="letter">S</div>
  6. <div name="denopeion">is for Serenity</div>
  7.  
  8. <div name="animation">
  9.     <div name="cloud">
  10.         <div></div>
  11.         <div></div>
  12.         <div></div>
  13.         <div></div>
  14.         <div></div>
  15.     </div>
  16.     <div name="drops">
  17.         <div></div>
  18.         <div></div>
  19.         <div></div>
  20.         <div></div>
  21.         <div></div>
  22.         <div></div>
  23.         <div></div>
  24.         <div></div>
  25.         <div></div>
  26.         <div></div>
  27.     </div>
  28. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement