Telegram Spoiler

by vovkasolovev

HTML

<style>
:root{
    --spoiler-blur: 20px;
    --spoiler-color: #0008;
    --spoiler-opacity: 0.8;
    --spoiler-text: 'Показать';
    --spoiler-text-color: white;
    --spoiler-text-bg: var(--spoiler-color);
	--spoiler-radius: 3px;
}
  /* Blur container */
  .spoiler:not(.spoiler-show) > *{filter: blur(var(--spoiler-blur));}
  .spoiler.spoiler-show .spoiler-container {filter: blur(0);}
  .spoiler:hover{cursor:pointer}
  
  .spoiler {
    width: fit-content;
    height: fit-content;
    position: relative;
    overflow: hidden;
	border-radius:calc(var(--spoiler-radius) * 2);
  }  
  .spoiler-container, .spoiler-container:before{  
    display: block;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    transition: 0.35s;
  }

  /* Crop container */
  .spoiler-container{overflow: hidden; position: relative;
  }
  /* Background color */
  :not(.spoiler-show)>.spoiler-container:before{content: ''; position: absolute;
    width: calc(100% + var(--spoiler-blur) * 2);
    height:calc(100% + var(--spoiler-blur) * 2);
    margin: calc(0px - var(--spoiler-blur));
    background-color: var(--spoiler-color);
    z-index: 3;
  }
  
  /* Button container */
 :not(.spoiler-show).spoiler::before{
    content: var(--spoiler-text);
    color: var(--spoiler-text-color);
    background:var(--spoiler-text-bg);
    padding: 3px 6px;
    border-radius: var(--spoiler-radius);
    position: absolute;
    white-space: pre;
    display: inline;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
  }
  
  @keyframes spoiler-animation {
  0% {
    background-position: 
    0 0, 
    0 0;
  }
  100% {
    background-position: 
    calc(0.7 * var(--background-size)) calc(0.9 * var(--background-size)), 
    var(--background-size) calc(-0.8 * var(--background-size)) ;
  }
}
  /* Particles container */
  :not(.spoiler-show).spoiler:after{content: ''; position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + var(--spoiler-blur) * 2);
   ...