Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- body{
- overflow: hidden;}
- @font-face{
- src:url(https://dl.dropboxusercontent.com/u/4556289/devilsummonerexpandital.ttf);
- font-family:'titlefont';
- }
- @font-face{
- src:url(https://dl.dropboxusercontent.com/u/4556289/DarKneS_FoNT_by_JasonBlack.ttf);
- font-family:'answerfont';}
- #startbutton{
- position: absolute;
- top: 0px;
- left: 10%;
- right: 0px;
- bottom: 0px;
- margin: auto;
- width: 410px;
- height: 120px;
- background: transparent;
- border: 0px solid black;
- z-index: 10;
- overflow: hidden;
- opacity: 0;
- }
- #startbutton audio{
- zoom: 5000%;
- }
- #startbutton:hover ~ #namebox *{
- color: #205159;
- -webkit-transition: all 2s;
- transition: all 2s;
- text-shadow: 0px 0px 2px black;
- }
- #startbutton:active ~ #transitionbox #nameslide1,
- #startbutton:active ~ #transitionbox #nameslide2{
- -webkit-transition: all 0s;
- transition: all 0s;
- left: 0px;
- opacity: 0;
- }
- #startbutton:active ~ #transitionbox #flashrupt{
- -webkit-transition: all 0s;
- transition: all 0s;
- width: 2px;
- left: -300px;
- background: white;
- opacity: 0;
- box-shadow: 0px 0px 0px black;
- }
- #startbutton:active ~ #transitionbox{
- -webkit-transition: all 0s;
- transition: all 0s;
- opacity: 1;
- z-index: 2;
- }
- #startbutton:active ~ #namebox{
- -webkit-transition: all 0s;
- transition: all 0s;
- opacity: 0;
- z-index: 0;
- }
- #startbutton:active ~ #knifecontainer{
- -webkit-transition: all 0s 0s;
- transition: all 0s 0s;
- opacity: 1;
- }
- #startbutton:active ~ #knifecontainer #knifeimage{
- -webkit-transition: all 0s 0s;
- transition: all 0s 0s;
- opacity: 0;
- }
- #startbutton:active ~ #whole2{
- -webkit-transition: all 0.1s 0s;
- transition: all 0.1s 0s;
- z-index: 12;
- height: 100%;
- width: 100%;
- top: 100%;
- }
- #whole{
- position: absolute;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- background-image:url(http://i.imgur.com/5VMX79c.png);
- background-color: ghostwhite;
- }
- #whole2{
- position: absolute;
- top: 0px;
- left: 0px;
- height: 1px;
- width: 1px;
- z-index: 12;
- -webkit-transition: all 0s, height 1s 9999s, width 1s 9999s;;
- transition: all 0s, height 1s 9999s, width 1s 9999ss;}
- #knifecontainer{
- opacity: 0;
- -webkit-transition: all 0s 999999s;
- transition: all 0s 999999s;
- }
- #knifeimage{
- position: absolute;
- top: 0px;
- left: -5%;
- right: 0px;
- bottom: 0px;
- background-image:url(http://i.imgur.com/rHbELiW.png);
- background-repeat: no-repeat;
- background-position: top left;
- background-size: auto 230%;
- opacity: 1;
- -webkit-transition: all 2s 2.1s;
- transition: all 2s 2.1s;
- }
- #knifesilhouette{
- position: absolute;
- top: 0px;
- left: -5%;
- right: 0px;
- bottom: 0px;
- background-image:url(http://i.imgur.com/rHbELiW.png);
- background-repeat: no-repeat;
- background-position: top left;
- background-size: auto 230%;
- opacity: 1;
- -webkit-filter:saturate(0%) grayscale(100%) blur(1px);
- opacity: .5;
- }
- #transitionbox,
- #namebox{
- position: absolute;
- top: 0px;
- left: 10%;
- right: 0px;
- bottom: 0px;
- margin: auto;
- height: 400px;
- width: 400px;
- overflow: hidden;
- }
- #transitionbox{
- opacity: 0;
- z-index: 0;
- -webkit-transition: all 0s 9999s;
- transition: all 0s 9999s;
- }
- #namebox{
- opacity: 1;
- z-index: 1;
- -webkit-transition: all 0s 9999s;
- transition: all 0s 9999s;
- }
- #namedef1{
- position: absolute;
- top: -40px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- margin: auto;
- height: 42px;
- width: 400px;
- border: 0px solid black;
- font-family:'titlefont', Times New Roman;
- font-size: 80pt;
- text-align: center;
- overflow: hidden;
- box-sizing:border-box;
- color: black;
- opacity: 1;
- color: black;
- -webkit-transition: all 2s;
- transition: all 2s;
- }
- #namedef2{
- position: absolute;
- top: 60px;
- left: -1px;
- right: 0px;
- bottom: 0px;
- margin: auto;
- height: 60px;
- width: 400px;
- border: 0px solid black;
- font-family:'titlefont', Times New Roman;
- font-size: 80pt;
- text-align: center;
- overflow: hidden;
- box-sizing:border-box;
- color: black;
- -webkit-transition: all 2s;
- transition: all 2s;
- }
- #nameslide1{
- position: absolute;
- top: -40px;
- left: -10px;
- right: 0px;
- bottom: 0px;
- margin: auto;
- height: 42px;
- width: 400px;
- border: 0px solid black;
- font-family:'titlefont', Times New Roman;
- font-size: 80pt;
- text-align: center;
- overflow: hidden;
- box-sizing:border-box;
- color: black;
- opacity: 1;
- -webkit-transition: all 2s .3s ease-in, opacity .01s 0s linear;
- transition: all 2s .3s ease-in, opacity .01s 0s linear;
- color: black;
- }
- #nameslide2{
- position: absolute;
- top: 60px;
- left: 11px;
- right: 0px;
- bottom: 0px;
- margin: auto;
- height: 60px;
- width: 400px;
- border: 0px solid black;
- font-family:'titlefont', Times New Roman;
- font-size: 80pt;
- text-align: center;
- overflow: hidden;
- box-sizing:border-box;
- -webkit-transition: all 2s .3s ease-in, opacity .01s 0s;
- transition: all 2s .3s ease-in, opacity .01s 0s;
- opacity: 1;
- color: black;
- }
- #nameslide2 b,
- #namedef2 b{
- position: absolute;
- left: 0px;
- right: 0px;
- margin: auto;
- font-weight: 400;
- top: -40px;
- }
- #namedef b{
- -webkit-transition: all 2s;
- transition: all 2s;
- }
- #flashrupt{
- position: absolute;
- top: 4px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- margin: auto;
- height: 3px;
- width: 400px;
- background: black;
- box-shadow: 0px 0px 7px #205159;
- opacity: 1;
- border-radius: 90px;
- -webkit-transition: all .01s, background .2s .2s, width .4s, box-shadow 1s 1s;
- }
- #statstuff{
- position: absolute;
- bottom: 0px;
- left: 0px;
- right: 0px;
- margin: auto;
- width: 100%;
- overflow: hidden;
- font-family:'titlefont';
- font-size: 15pt;
- text-align: center;
- height: 165px;
- box-sizing: border-box;
- padding-top: 20px;
- letter-spacing: 2px;
- }
- #statsides{
- position: absolute;
- background: black;
- box-shadow: 0px 0px 5px #205159;
- -webkit-transition: all 2s 2s;
- transition: all 2s 2s;
- opacity: 1;}
- #statsides.stata{
- left: 0px;
- top: 0px;
- bottom: 0px;
- width: 3px;}
- #statsides.statb{
- right: 0px;
- top: 0px;
- bottom: 0px;
- width: 3px;}
- #statsides.statc{
- bottom: 0px;
- left: 0px;
- right: 0px;
- margin: auto;
- width: 95%;
- height: 3px;}
- #leftfloat{
- float: left;
- font-weight: 400;
- color: black;
- text-shadow: 1px 1px 2px #205159;
- width: 50%;
- height: 20px;
- text-align: left;
- box-sizing: border-box;
- padding-top: 5px;
- -webkit-transition: all 2s 2.5s;
- transition: all 2s 2.5s;
- margin-bottom: 3px;}
- #leftfloat:nth-child(even){
- padding-left: 60px;}
- #leftfloat:nth-child(odd){
- text-shadow: 0px 0px 0px black;
- padding-left: 20px;
- padding-top: 1px;
- font-family: 'answerfont', Arial;
- font-size: 15pt;
- font-weight: 600;
- }
- #startbutton:active ~ #transitionbox #statstuff #statsides,
- #startbutton:active ~ #transitionbox #statstuff #leftfloat{
- -webkit-transition: all 0s 0s;
- transition: all 0s 0s;
- opacity: 0;
- }
- </style>
- <div id="whole">
- <div id="startbutton">
- <audio controls src="https://puu.sh/uremM/24874643c7.mp3" loop=3 />
- </div>
- <div id="knifesilhouette">
- </div>
- <div id="knifecontainer">
- <div id="knifeimage">
- </div>
- </div>
- <div id="namebox">
- <div id="namedef1">
- kniFe
- </div>
- <div id="namedef2">
- <b>kniFe</b>
- </div>
- </div>
- <div id="transitionbox">
- <div id="nameslide1">
- kniFe
- </div>
- <div id="nameslide2">
- <b>kniFe</b>
- </div>
- <div id="flashrupt">
- </div>
- <div id="statstuff">
- <div id="statsides" class="stata">
- </div>
- <div id="statsides" class="statb">
- </div>
- <div id="statsides" class="statc">
- </div>
- <div id="leftfloat">
- Alias
- </div>
- <div id="leftfloat">
- K N I F E
- </div>
- <div id="leftfloat">
- Sex
- </div>
- <div id="leftfloat">
- Male
- </div>
- <div id="leftfloat">
- Height
- </div>
- <div id="leftfloat">
- 6'7"
- </div>
- <div id="leftfloat">
- Sexuality
- </div>
- <div id="leftfloat">
- Pansexual / Open
- </div>
- <div id="leftfloat">
- Affiliation
- </div>
- <div id="leftfloat">
- Silent Knights
- </div>
- </div>
- </div>
- <div id="whole2">
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement