Au theatre , by Gcyrillus

dabblet.css

/* Au theatre , by Gcyrillus */
div#theatre {
border:inset red 10px;
height:300px;
width:80%;
margin:2em auto;
text-align:center;
line-height:120px;
font-size:30px;
position:relative;
overflow:hidden;
background:black;
color:rgba(255,255,255, 0.3);
text-shadow:0 0 2px yellow , 0 0 4px black,0 0 6px white;
}
div#theatre #curtain-left
 ,  div#theatre #curtain-right
 {
content:'';
position:absolute;
z-index:2;
top:-30px;
bottom:-30px;
width:61%;
transition:all 4s ease-out;
transform:rotate(0deg);
background-color:#A90505;
background-image: linear-gradient(0,  transparent 10%, rgba(255,255,255,.25) 50% ,transparent 65% );background-repeat:repeat;
box-shadow:0 0 15px #aaa,inset 0 -60px  60px -30px  rgba(255,255,255, 0.5), inset 0 90px  60px -30px  rgba(0,0,0, 0.5);
background-size: 80px;
}
#curtain-left
 {left:-10%;}
#curtain-right
 {right:-10%;}
div#theatre:hover #curtain-right ,  div#theatre:hover #curtain-left
 {
width:0;
background-size: 1px;
transition:all 4s ease;
transform:rotate(15deg);
}
div#theatre:hover #curtain-right
 {
transition:all 4s ease;
transform:rotate(-15deg);
}
#theatre p {width:50%;margin:0.5em auto ;position:relative;z-index:3;}
#theatre p:first-of-type:before {
content:'';
position:absolute;
border-radius:150px;
box-shadow:0 0 10px 60px rgba(255,255,255,0.5) ;
height:0.1px;
width:3px;
top:6.5em;
left:49%;
transform:rotate(25deg) skew(15deg,5deg);
}

dabblet.html

<div id="theatre">
<em id="curtain-left"></em>
<em id="curtain-right"></em>
<p>Au théatre</p>
<p>Ce soir !</p>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}