perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

start test mouses in css

Browse Source
This commit is contained in:
asus
2023-11-19 16:35:11 +01:00
parent f80c7608b2
commit f027ca2752
5 changed files with 110 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
index.html
View File

@@ -479,20 +479,20 @@
 
</pre>
<pre class="frame f3">
 
  

  
  
   
   
  
  
   
  
 
 
  

  
  
   
   
  
  
   
  
 
</pre>
<pre class="frame f4">
@@ -646,6 +646,14 @@
-->
<div class="ascii" id="test"></div>
<figure class="frames_container mouse" id="mouse_test">
<div class="ascii frame f1"></div>
<div class="ascii frame f2"></div>
<div class="ascii frame f3"></div>
<div class="ascii frame f4"></div>
</figure>

10
styles/elements/mouses.css
View File

@@ -10,10 +10,10 @@
border: 1px solid blue;
*/
}
pre.frame.hide {
.frame.hide {
display: none;
}
pre.frame {
.frame {
position: relative;
grid-column: 1;
grid-row: 1;
@@ -35,9 +35,9 @@ pre.frame {
animation-direction: normal;
}
pre.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);}
pre.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);}
pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);}
.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);}
.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);}
.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);}
@keyframes ascii_frame {
0% {opacity: 1;}

101
styles/elements/test.css
View File

@@ -1,24 +1,87 @@
#test::after {
content: "  \a   \a   \a  \a \a  \a  \a  \a  \a    \a    \a  \a     \a    \a  \a ";
white-space: pre-wrap;
/*
white-space: pre;
}
 
  
  
 

 
 
 
 
  
 
    
  
 
.mouse .frame {
white-space: pre;
}
#mouse_test .frame.f1::before {
content: " \A \A  \A   \A \A   \A   \A    \A    \A   \A   \A    \A   \A  ";
/*
 

  
  
  
  
  
  
   
  
 
*/
}
#mouse_test .frame.f2::before {
content: " \A \A  \A   \A \A   \A   \A    \A    \A  \A   \A    \A   \A  ";
/*
 
  

  
  
   
   
 
  
   
  
 
*/
}
#mouse_test .frame.f3::before {
content: " \A \A  \A   \A \A   \A   \A    \A    \A   \A   \A    \A   \A  ";
/*
 
  

  
  
   
   
  
  
   
  
 
*/
}
#mouse_test .frame.f4::before {
content: " \A   \A  \A   \A    \A   \A   \A    \A    \A    \A    \A  ";
/*

  
 
  
   
  
  
   
   
   
   
 
*/
}

2
styles/frames.css
View File

@@ -1,2 +0,0 @@

2
styles/text.css
View File

@@ -36,7 +36,7 @@ h3 { margin: 20px 0px; font-size: 1.75rem; }
h4 { margin: 20px 0px; font-size: 1.5rem; }
h5 { margin: 10px 0px; font-size: 1.25rem; }
h6 { margin: 10px 0px; font-size: 1.0rem; }
pre {
pre, .ascii {
line-height: 0.8;
font-size: min(2.2vw, 1.0rem);
}