Advertisement
naocrrds

๐Ÿ’€ drr ac scrollboxes, cr cyberpinked

Aug 14th, 2022 (edited)
2,919
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.37 KB | None | 0 0
  1. <center>
  2. <div id="contec">
  3. <span>FILE 1</span><mark>NAOCRRDS</mark>
  4. <p> Cake lemon drops soufflรฉ gingerbread icing gingerbread cheesecake cheesecake. Icing cookie gummies I love I love cotton candy sugar plum. Icing chupa chups danish dragรฉe chocolate bar cookie dessert I love.</p>
  5. </div>
  6. </div>
  7. </center>
  8.  
  9. <style>
  10. @font-face {
  11. font-family: starborn;
  12. src: url(https://dl.dropbox.com/s/l0541on0m5eqvdj/Starborn.ttf);
  13. }
  14.  
  15. @font-face {
  16. font-family: "VCr";
  17. src: url(https://cinni.net/fonts/basiic.ttf);
  18. }
  19.  
  20. mark, span {
  21. background-color:transparent;
  22. font-size: 1.8em;
  23. font-family: starborn;
  24. font-weight:700;
  25. color:#fff;
  26. text-align:center;
  27. -webkit-text-stroke-width: 1.2px;
  28. -webkit-text-stroke-color: #0f1315; -webkit-text-fill-color: #fff; position: relative; z-index: 9; display:inline-block;
  29. }
  30.  
  31.  
  32. #contec p, #contec a {
  33. text-align: left;
  34. font-family: "VCr";
  35. color: #83a1be;
  36. transition: opacity 1000ms;
  37. }
  38.  
  39. #contec:hover{
  40. overflow-x:hidden;
  41. overflow-y:scroll;
  42. }
  43.  
  44. #contec:hover p, #contec:hover a {
  45. font-size: 0.75em;
  46. color: #fff;
  47. text-align: left;
  48. font-family: vcr;
  49. -webkit-animation: text-focus-in 1s cubic-bezier(.55, .085, .68, .53) both;
  50. animation: text-focus-in 1s cubic-bezier(.55, .085, .68, .53) both
  51. }
  52.  
  53. mark{display:none;}
  54.  
  55. #contec:hover mark {
  56. font-weight: 700;
  57. font-size: 1.75em;
  58. text-align: center;
  59. -webkit-text-stroke-width: 1px;
  60. -webkit-text-stroke-color: #fff;
  61. -webkit-text-fill-color: #a0beac;
  62. z-index: 9999;
  63. display: inline;
  64. }
  65.  
  66. #contec:hover span{
  67. display: none;
  68. }
  69.  
  70. #contec {
  71. -webkit-box-shadow: 1px 1px 5px 0px rgba(160, 190, 172, 0.78);
  72. box-shadow: 1px 1px 5px 0px rgba(160, 190, 172, 0.78);
  73. border: 2px solid #d3e1d4;
  74. background: #83a1be;
  75. border-radius: 7px;
  76. width: 40%;
  77. height: 120px;
  78. transition: 0.6s ease;
  79. padding: 5px;
  80. cursor: help;
  81. overflow: scroll;
  82. overflow-x: hidden;
  83. display: inline-block;
  84. transition: transform 1s;
  85. z-index: 8;
  86. overflow:hidden;
  87. }
  88.  
  89. #contec:hover {
  90. background: #83a1be;
  91. z-index: 9999;
  92. position: relative;
  93. width: 40%;
  94. height: 130px;
  95. transform: translate(13px, 48px) scale(1.8, 1.8);
  96. }
  97.  
  98. /* ---------------------------------------------- *
  99. Generated by Animista on 2022-4-19 11:37:1 *
  100. Licensed under FreeBSD License. * See http://animista.net/license for more info. *
  101. w: http://animista.net, t: @cssanimista
  102. * ---------------------------------------------- */
  103. @-webkit-keyframes text-focus-in {
  104. 0% {
  105. -webkit-filter: blur(12px);
  106. filter: blur(12px);
  107. opacity: 0
  108. }
  109.  
  110. 100% {
  111. -webkit-filter: blur(0);
  112. filter: blur(0);
  113. opacity: 1
  114. }
  115. }
  116.  
  117. @keyframes text-focus-in {
  118. 0% {
  119. -webkit-filter: blur(12px);
  120. filter: blur(12px);
  121. opacity: 0
  122. }
  123.  
  124. 100% {
  125. -webkit-filter: blur(0);
  126. filter: blur(0);
  127. opacity: 1
  128. }
  129. }
  130. </style>
  131.  
  132. <br><br/>
  133. thanks to this stack overflow question <u>https://stackoverflow.com/questions/47427056/how-to-replace-on-div-with-another-on-hover-css-only</U> ๐Ÿ’‹
  134. <br>
  135. THIS IS ONLY JUST A SCRATCH CODE n sub to <a href="https://youtube.com/@naocrrds">naocrrds</a> btw
  136.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement